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');
});
또한 개발자모드에서 콘솔에서 어떠한 에러가 출력되는지 확인해 보시고 수정을 하시는게 좋을 듯 합니다
개발자도구에서도 오류가 없었고, 안내해주신 방법으로는 수정이 안되네요 ㅠㅠ 그래도 다른 방법 이것저것 해보다가 수정되었습니다! 도움주셔서 감사합니다 ㅎㅎ
답변을 작성하시기 전에 로그인 해주세요.