Swiper 슬라이드 자동재생 무한 롤링 (Swiper slider autoplay infinite rolling)

Swiper.js

 

 

Swiper 슬라이드 자동재생 무한 롤링 (Swiper slider autoplay infinite rolling) 코드펜 예제 소스코드입니다.

자동으로 넘어가는 컨베이어 효과인데 swiper 슬라이드에서 autoplay 를 설정해두고 css에서 transition-timing-function 값을 조정해줘서 계속해서 롤링되는 효과를 구현했습니다.

 

swiper에 적용해준 css 코드

.swiper-container {position: relative; margin: 30px 20px; overflow: hidden;}
.swiper-container .swiper-wrapper {transition-timing-function: linear !important; position: relative;}
.swiper-container .swiper-slide {width: auto; padding: 10px;}

 

 

JS 코드입니다.

let rollingSwiper; // Swiper 슬라이드
 
// 롤링시작 함수
function PlayRollingSwiper(target){
  rollingSwiper = new Swiper('.swiper-container', {
    spaceBetween: 0,
    centeredSlides: true,
    speed: 6000,
    autoplay: {
      delay: 1,
    },
    loop: true,
    slidesPerView: 'auto',
    allowTouchMove: false,
    disableOnInteraction: false,
  });
}
 
// 페이지 로드
window.addEventListener('load', function(){
  PlayRollingSwiper();
});