swiper pause icon button (정지 아이콘)

Question

스와이퍼로 오토플레이를 일시정지할 수 있는 버튼을 어떻게 만들 수 있을까요? const swiper &#61; new Swiper('.product-selection-slide', { loop: true, slidesPerView: 5, spaceBetween: 10, navigation: { nextEl: '.swiper-button-next', prevEl: '.swiper-button-prev', }, pagination: { el: '.swiper-pagination', }, autoplay: { delay: 2500, disableOnInteraction: false, } }); $('.stop').on('click', function(){ swiper.stop(); return false; });

킁킁탐정 · Answer

https://swiperjs.com/swiper-api#method-swiper-pause

킁킁탐정 · Answer

swiper가 모듈화가 되어있고 모듈마다 별도 문서가 존재합니다.구조를 잘 보시면 new Swiper를 하변서 modules: [ Navigation, Autoplay ] 처럼 사용할 모듈을 입력해야합니다. 하지만 단일 번들 파일을 사용하는 경우에는 모든 모듈이 포함되어있습니다.node.js같은걸 이용한다면 모듈을 지정은 중요한 부분입니다.https://swiperjs.com/swiper-api#using-js-modules단순하게 script 태그에 단일 번들 파일을 지정해서 사용하는 경우라면 modules 속성을지정할 필요가 없습니다. 대신 모듈의 속성 또는 메소드에 접근은 모듈 이름으로된 객체를 통해서 가능합니다.예를들어 autoplay는 swiper.autoplay.pause() 처럼 접근 가능합니다. 비록 모듈 문에서는 swiper.pause() 처럼되어 있어 오해할 소지가 있습니다.https://swiperjs.com/swiper-api#modules 좌측 메뉴에 목록과https://swiperjs.com/swiper-api#using-build-script 에 포함된 기본 모듈 이름이 1:1 대응되는점도알아두시면 좋습니다.간단한 동작하는 예제를 만들어봤습니다.https://jsfiddle.net/q2z6w4ts/

swiper pause icon button (정지 아이콘)

2개의 답변

기술 목록