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

Swiper.js

 

See the Pen Swiper 슬라이드 자동 무한 롤링 (Swiper slide infinite rolling) by kimyangsun (@kimyangsun) on CodePen.

 

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();
});