[javascript] swiper.js 롤링이 처음으로 돌아가는 방법

슬라이더를 구현할 때 많이 사용하는 자바스크립트 라이브러리 중에 swiper.js가 있습니다.

 

오늘은 슬라이더를 넘길 때 처음으로 돌아가게 하는 방법에 대해 살펴보겠습니다. Swiper 객체를 생성할 때 loop 파라미터를 true로 설정해주면 됩니다.

 

var mySwiper = new Swiper('.swiper-container', {
  loop: true, // 무한 루프 설정
  direction: 'vertical', // 수직 방향 설정 (수평으로 변경 가능)
  slidesPerView: 1, // 한 번에 표시되는 슬라이드 수
  spaceBetween: 10, // 슬라이드 간의 간격 설정

  autoplay: {
    delay: 3000, // 롤링 간격 설정 (3초로 예시)
    disableOnInteraction: false, // 사용자 상호 작용 시 자동 롤링 중지 여부
  },
});

 

 

loop 파라미터를 true로 설정하면 continuous loop 모드로 세팅됩니다. 

 

참고자료

[1] https://swiperjs.com/get-started