swiper 혼자 멈추는 오류 왜이럴까요 ㅠㅠ

매출이 오르면 내리는 수수료! 지금 수수료센터에서 전자결제(PG)수수료 비교견적 신청해 보세요!
swiper 혼자 멈추는 오류 왜이럴까요 ㅠㅠ

QA

swiper 혼자 멈추는 오류 왜이럴까요 ㅠㅠ

본문

두개를 연달아 넣어두었으며 클래스명도 다 다르게 줬습니다! 초반에는 괜찮게 구현되다가 갑자기 autoplay가 멈추네요ㅠㅠ 왜그럴까요 ... 

 

 

html


//첫번째 스와이퍼
<div class="swiper-container main_cont05_swiper01" dir="rtl">
<div class="swiper-wrapper">
<div class="swiper-slide main_cont05_01_slide">
<img src="<?php echo G5_THEME_URL?>/img/main_cont05_img01.jpg" alt="">
</div>
<div class="swiper-slide main_cont05_01_slide">
<img src="<?php echo G5_THEME_URL?>/img/main_cont05_img02.jpg" alt="">
</div>
<div class="swiper-slide main_cont05_01_slide">
<img src="<?php echo G5_THEME_URL?>/img/main_cont05_img03.jpg" alt="">
</div>
<div class="swiper-slide main_cont05_01_slide">
<img src="<?php echo G5_THEME_URL?>/img/main_cont05_img04.jpg" alt="">
</div>
<div class="swiper-slide main_cont05_01_slide">
<img src="<?php echo G5_THEME_URL?>/img/main_cont05_img05.jpg" alt="">
</div>
</div>
</div>
 
//두번째 스와이퍼
<div class="swiper-container main_cont05_swiper02" dir="ltr">
<div class="swiper-wrapper">
<div class="swiper-slide main_cont05_02_slide">
<img src="<?php echo G5_THEME_URL?>/img/main_cont05_img01.jpg" alt="">
</div>
<div class="swiper-slide main_cont05_02_slide">
<img src="<?php echo G5_THEME_URL?>/img/main_cont05_img02.jpg" alt="">
</div>
<div class="swiper-slide main_cont05_02_slide">
<img src="<?php echo G5_THEME_URL?>/img/main_cont05_img03.jpg" alt="">
</div>
<div class="swiper-slide main_cont05_02_slide">
<img src="<?php echo G5_THEME_URL?>/img/main_cont05_img04.jpg" alt="">
</div>
<div class="swiper-slide main_cont05_02_slide">
<img src="<?php echo G5_THEME_URL?>/img/main_cont05_img05.jpg" alt="">
</div>
</div>
</div>

 

자바스크립트


// main_cont05_swiper01
var main_cont05_swiper_num01 = $('.main_cont05_swiper01').find('.main_cont05_01_slide');
var main_cont05_swiper01 = new Swiper('.main_cont05_swiper01', {
slidesPerView: "auto",
spaceBetween: 10,
autoplay: {
delay: 0,
disableOnInteraction: false,
},
allowTouchMove: false,
touchRatio: 0.2,
speed: 7000,
// freeMode: true,
loop: true,
loopedSlides: main_cont05_swiper_num01.length,
observer: true,
observeParents: true,
});
 
// main_cont05_swiper02
var main_cont05_swiper_num02 = $('.main_cont05_swiper02').find('.main_cont05_02_slide');
var main_cont05_swiper02 = new Swiper('.main_cont05_swiper02', {
slidesPerView: "auto",
spaceBetween: 10,
autoplay: {
delay: 0,
disableOnInteraction: false,
},
allowTouchMove: false,
// touchRatio: 0.2,
speed: 7000,
// freeMode: true,
loop: true,
loopedSlides: main_cont05_swiper_num02.length,
observer: true,
observeParents: true,
pauseOnFocus: false,
});

 

이 질문에 댓글 쓰기 :

답변 1

다음과 같이 해보시겠어요?


// main_cont05_swiper01
var main_cont05_swiper_num01 = $('.main_cont05_swiper01').find('.main_cont05_01_slide');
var main_cont05_swiper01 = new Swiper('.main_cont05_swiper01', {
    slidesPerView: "auto",
    spaceBetween: 10,
    autoplay: {
        delay: 5000, // 적절한 값을 설정하세요 (밀리초 단위)
        disableOnInteraction: false,
    },
    allowTouchMove: false,
    touchRatio: 0.2,
    speed: 7000,
    loop: true,
    loopedSlides: main_cont05_swiper_num01.length,
    observer: true,
    observeParents: true,
});
// main_cont05_swiper02
var main_cont05_swiper_num02 = $('.main_cont05_swiper02').find('.main_cont05_02_slide');
var main_cont05_swiper02 = new Swiper('.main_cont05_swiper02', {
    slidesPerView: "auto",
    spaceBetween: 10,
    autoplay: {
        delay: 5000, // 적절한 값을 설정하세요 (밀리초 단위)
        disableOnInteraction: false,
    },
    allowTouchMove: false,
    speed: 7000,
    loop: true,
    loopedSlides: main_cont05_swiper_num02.length,
    observer: true,
    observeParents: true,
    pauseOnFocus: false,
});


autoplay: {
    delay: 5000, // 5000 밀리초 = 5초, 적절한 값으로 조절
    disableOnInteraction: false,
},

이 값이 자동 재생 간격을 의미합니다. 이 값이 적을수록 간격이 짧아지므로 적절히 조정해 보세요
그래도 안되신다면  다음과 같이 적용해 보시겠어요?


// main_cont05_swiper01
var main_cont05_swiper_num01 = $('.main_cont05_swiper01').find('.main_cont05_01_slide');

var main_cont05_swiper01 = new Swiper('.main_cont05_swiper01', {
    slidesPerView: "auto",
    spaceBetween: 10,
    autoplay: {
        delay: 5000, // 적절한 값을 설정하세요 (밀리초 단위)
        disableOnInteraction: false,
    },
    allowTouchMove: false,
    touchRatio: 0.2,
    speed: 7000,
    loop: true,
    loopedSlides: main_cont05_swiper_num01.length,
    observer: true,
    observeParents: true,
});

// main_cont05_swiper02
var main_cont05_swiper_num02 = $('.main_cont05_swiper02').find('.main_cont05_02_slide');

var main_cont05_swiper02 = new Swiper('.main_cont05_swiper02', {
    slidesPerView: "auto",
    spaceBetween: 10,
    autoplay: {
        delay: 5000, // 적절한 값을 설정하세요 (밀리초 단위)
        disableOnInteraction: false,
    },
    allowTouchMove: false,
    speed: 7000,
    loop: true,
    loopedSlides: main_cont05_swiper_num02.length,
    observer: true,
    observeParents: true,
    pauseOnFocus: false,
});

// Swiper 이벤트 모니터링
main_cont05_swiper01.on('slideChange', function () {
    console.log('Swiper 01: Slide changed');
});

main_cont05_swiper02.on('slideChange', function () {
    console.log('Swiper 02: Slide changed');
});


또한 개발자모드에서 콘솔에서 어떠한 에러가 출력되는지 확인해 보시고 수정을 하시는게 좋을 듯 합니다

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

회원로그인

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