현재 스와이퍼 작동 오류로 도와주세요 ㅜㅜㅜㅜ

현재 스와이퍼 작동 오류로 도와주세요 ㅜㅜㅜㅜ

QA

현재 스와이퍼 작동 오류로 도와주세요 ㅜㅜㅜㅜ

답변 1

본문

너무 급해서 다시 올립니다

스와이퍼가 첫장부터 순차적으로 나오지않고, 화면에 두장씩 보이도록 세팅한것도 안먹고

loop 해놓았는데 5장 나오고 끊깁니다 

swiper-wrapper 너비를 건드려야 하는건지 스크립트 오류인지 도움 좀 부탁드리겠습니다 ㅜㅜ

 

html 입니다

   <section class="hard rolling" data-aos="fade-up" data-aos-duration="1200" data-aos-offset="300">

        <div class="w1240">

          <div class="hardtxt">

          </div>

 

           <!-- Swiper -->

          <div class="swiper mySwiper second">

            <div class="swiper-wrapper">

              <div class="swiper-slide">

                <img src="<?php echo G5_THEME_URL?>/img/roll-1.png">

              </div>

              <div class="swiper-slide">

                <img src="<?php echo G5_THEME_URL?>/img/roll-2.png">

              </div>

              <div class="swiper-slide" >

                <img src="<?php echo G5_THEME_URL?>/img/roll-3.png">

              </div>

              <div class="swiper-slide">

                <img src="<?php echo G5_THEME_URL?>/img/roll-4.png">

              </div>

              <div class="swiper-slide">

                <img src="<?php echo G5_THEME_URL?>/img/roll-5.png">

              </div>

            </div>  

         

          </div>

         

        </div>

    </section>

 

css 입니다

.w1240 {width: 1240px; margin: auto;}

.hardtxt h5.mb110 {margin-bottom: 110px;}

.mySwiper.second .swiper-slide img {width: 600px !important; height: 311px !important; transform: none !important; transition: 0.3s;}

.mySwiper.second .swiper-slide img:hover {filter: drop-shadow(2px 4px 6px rgb(160, 160, 160));}

 

js입니다

 

  <!-- Link Swiper's CSS -->

<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/swiper@11/swiper-bundle.min.css" />

 

<!-- Swiper coverflow JS -->

 <script src="https://cdn.jsdelivr.net/npm/swiper@11/swiper-bundle.min.js"></script>

 

  var swiper = new Swiper(".mySwiper.second", {

      initialSlide: 1,

      effect: "slide",

      observer: true,

      observeParents: true,

      grabCursor: true,

      autoplay: {

        delay: 4000,

        disableOnInteraction: false,

      },  

      loop: true,

      slidesPerView: "2",  

    });

 

 

 

이 질문에 댓글 쓰기 :

답변 1

  <div class="swiper-slide">

<img src="<?php echo G5_THEME_URL?>/img/roll-1.png">

<img src="<?php echo G5_THEME_URL?>/img/roll-2.png">

<img src="<?php echo G5_THEME_URL?>/img/roll-3.png">

</div> 이런식으로 해보세요 스와이퍼 슬라이드 클래스를 이미지 여러개로 묶어주세요

 

답변을 작성하시기 전에 로그인 해주세요.
QA 내용 검색
질문등록
전체 124,233
© SIRSOFT
현재 페이지 제일 처음으로