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

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

QA

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

본문

너무 급해서 다시 올립니다

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

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> 이런식으로 해보세요 스와이퍼 슬라이드 클래스를 이미지 여러개로 묶어주세요

 

답변을 작성하시기 전에 로그인 해주세요.
전체 124,045 | RSS
QA 내용 검색

회원로그인

(주)에스아이알소프트 / 대표:홍석명 / (06211) 서울특별시 강남구 역삼동 707-34 한신인터밸리24 서관 1404호 / E-Mail: admin@sir.kr
사업자등록번호: 217-81-36347 / 통신판매업신고번호:2014-서울강남-02098호 / 개인정보보호책임자:김민섭(minsup@sir.kr)
© SIRSOFT