swiper 혼자 멈추는 오류 왜이럴까요 ㅠㅠ 채택완료
애애
1년 전
조회 2,245
두개를 연달아 넣어두었으며 클래스명도 다 다르게 줬습니다! 초반에는 괜찮게 구현되다가 갑자기 autoplay가 멈추네요ㅠㅠ 왜그럴까요 ...
html
</p>
<p>//첫번째 스와이퍼</p>
<p><div class="swiper-container main_cont05_swiper01" dir="rtl"></p>
<p><div class="swiper-wrapper"></p>
<p><div class="swiper-slide main_cont05_01_slide"></p>
<p><img src="<?php echo G5_THEME_URL?>/img/main_cont05_img01.jpg" alt=""></p>
<p></div></p>
<p><div class="swiper-slide main_cont05_01_slide"></p>
<p><img src="<?php echo G5_THEME_URL?>/img/main_cont05_img02.jpg" alt=""></p>
<p></div></p>
<p><div class="swiper-slide main_cont05_01_slide"></p>
<p><img src="<?php echo G5_THEME_URL?>/img/main_cont05_img03.jpg" alt=""></p>
<p></div></p>
<p><div class="swiper-slide main_cont05_01_slide"></p>
<p><img src="<?php echo G5_THEME_URL?>/img/main_cont05_img04.jpg" alt=""></p>
<p></div></p>
<p><div class="swiper-slide main_cont05_01_slide"></p>
<p><img src="<?php echo G5_THEME_URL?>/img/main_cont05_img05.jpg" alt=""></p>
<p></div></p>
<p></div></p>
<p></div></p>
<p> </p>
<p>//두번째 스와이퍼</p>
<p><div class="swiper-container main_cont05_swiper02" dir="ltr"></p>
<p><div class="swiper-wrapper"></p>
<p><div class="swiper-slide main_cont05_02_slide"></p>
<p><img src="<?php echo G5_THEME_URL?>/img/main_cont05_img01.jpg" alt=""></p>
<p></div></p>
<p><div class="swiper-slide main_cont05_02_slide"></p>
<p><img src="<?php echo G5_THEME_URL?>/img/main_cont05_img02.jpg" alt=""></p>
<p></div></p>
<p><div class="swiper-slide main_cont05_02_slide"></p>
<p><img src="<?php echo G5_THEME_URL?>/img/main_cont05_img03.jpg" alt=""></p>
<p></div></p>
<p><div class="swiper-slide main_cont05_02_slide"></p>
<p><img src="<?php echo G5_THEME_URL?>/img/main_cont05_img04.jpg" alt=""></p>
<p></div></p>
<p><div class="swiper-slide main_cont05_02_slide"></p>
<p><img src="<?php echo G5_THEME_URL?>/img/main_cont05_img05.jpg" alt=""></p>
<p></div></p>
<p></div></p>
<p></div></p>
<p>
자바스크립트
</p>
<p>// main_cont05_swiper01</p>
<p>var main_cont05_swiper_num01 = $('.main_cont05_swiper01').find('.main_cont05_01_slide');</p>
<p>var main_cont05_swiper01 = new Swiper('.main_cont05_swiper01', {</p>
<p>slidesPerView: "auto",</p>
<p>spaceBetween: 10,</p>
<p>autoplay: {</p>
<p>delay: 0,</p>
<p>disableOnInteraction: false,</p>
<p>},</p>
<p>allowTouchMove: false,</p>
<p>touchRatio: 0.2,</p>
<p>speed: 7000,</p>
<p>// freeMode: true,</p>
<p>loop: true,</p>
<p>loopedSlides: main_cont05_swiper_num01.length,</p>
<p>observer: true,</p>
<p>observeParents: true,</p>
<p>});</p>
<p> </p>
<p>// main_cont05_swiper02</p>
<p>var main_cont05_swiper_num02 = $('.main_cont05_swiper02').find('.main_cont05_02_slide');</p>
<p>var main_cont05_swiper02 = new Swiper('.main_cont05_swiper02', {</p>
<p>slidesPerView: "auto",</p>
<p>spaceBetween: 10,</p>
<p>autoplay: {</p>
<p>delay: 0,</p>
<p>disableOnInteraction: false,</p>
<p>},</p>
<p>allowTouchMove: false,</p>
<p>// touchRatio: 0.2,</p>
<p>speed: 7000,</p>
<p>// freeMode: true,</p>
<p>loop: true,</p>
<p>loopedSlides: main_cont05_swiper_num02.length,</p>
<p>observer: true,</p>
<p>observeParents: true,</p>
<p>pauseOnFocus: false,</p>
<p>});</p>
<p>
</p>
<p>
댓글을 작성하려면 로그인이 필요합니다.
답변 1개
채택된 답변
+20 포인트
1년 전
다음과 같이 해보시겠어요?
</p>
<p>// 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,
});</p>
<p>// 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,
});
로그인 후 평가할 수 있습니다
답변에 대한 댓글 3개
�
애애
1년 전
안녕하세요 해당 방법으로 해봤는데, 그대로네요 .. 처음엔 잘되는듯하다가 몇 바퀴 돌고나면 멈추는 것 같습니다 ㅠㅠ
�
웹메이킹
1년 전
[code]
autoplay: {
delay: 5000, // 5000 밀리초 = 5초, 적절한 값으로 조절
disableOnInteraction: false,
},
[/code]
이 값이 자동 재생 간격을 의미합니다. 이 값이 적을수록 간격이 짧아지므로 적절히 조정해 보세요
그래도 안되신다면 다음과 같이 적용해 보시겠어요?
[code]
// 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');
});
[/code]
또한 개발자모드에서 콘솔에서 어떠한 에러가 출력되는지 확인해 보시고 수정을 하시는게 좋을 듯 합니다
autoplay: {
delay: 5000, // 5000 밀리초 = 5초, 적절한 값으로 조절
disableOnInteraction: false,
},
[/code]
이 값이 자동 재생 간격을 의미합니다. 이 값이 적을수록 간격이 짧아지므로 적절히 조정해 보세요
그래도 안되신다면 다음과 같이 적용해 보시겠어요?
[code]
// 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');
});
[/code]
또한 개발자모드에서 콘솔에서 어떠한 에러가 출력되는지 확인해 보시고 수정을 하시는게 좋을 듯 합니다
�
애애
1년 전
개발자도구에서도 오류가 없었고, 안내해주신 방법으로는 수정이 안되네요 ㅠㅠ 그래도 다른 방법 이것저것 해보다가 수정되었습니다! 도움주셔서 감사합니다 ㅎㅎ
댓글을 작성하려면 로그인이 필요합니다.
답변을 작성하려면 로그인이 필요합니다.
로그인