swiper로 부드럽게 자동 롤링 구현하기

css에서 감싸주는 랩퍼 transform에 linear 속성을 추가하면 됨.

 

 

HTML

<div class="swiper-container">
  <div class="swiper-wrapper">
    <div class="swiper-slide">슬라이드 1</div>
    <div class="swiper-slide">슬라이드 2</div>
    <div class="swiper-slide">슬라이드 3</div>
    <div class="swiper-slide">슬라이드 4</div>
    <div class="swiper-slide">슬라이드 5</div>
    <div class="swiper-slide">슬라이드 6</div>
    <div class="swiper-slide">슬라이드 7</div>
  </div>
</div>

 

CSS

.swiper-container {
  width: 100%;
  height: 100%;
  overflow: hidden;  /* 슬라이드가 컨테이너 밖으로 나가지 않도록 */
}

.swiper-wrapper {
  display: flex;
  transition: transform 0.3s linear;
}

.swiper-slide {
  display: flex;
  justify-content: center;
  align-items: center;
  background-color: lightgray;
  transition: transform 0.3s;
}

 

 

JS

const swiper = new Swiper('.swiper-container', {
  slidesPerView: 3,   // 한 번에 보여지는 슬라이드의 개수 (여기서는 3개)
  loop: true,  // 슬라이드를 끝까지 도달하면 다시 처음으로 돌아가는 무한 루프 설정
  observeParents: true,  // 부모 요소의 변화를 감지하여 슬라이더를 자동으로 재조정
  observe: true,  // 슬라이드 자체나 부모 요소의 변화를 감지하여 슬라이드를 재조정
  spaceBetween: 10,  // 각 슬라이드 간의 간격 (여기서는 10px)
  autoplay: {  // 자동 슬라이드 전환 설정
    delay: 0,     // 슬라이드 전환 간의 대기 시간 (0ms로 설정 시 즉시 전환)
    disableOnInteraction: false    // 사용자가 슬라이드를 터치하거나 클릭하더라도 자동 전환이 멈추지 않도록 설정
  },
  speed: 5000,  // 슬라이드 전환의 속도 (여기서는 5000ms = 5초)
});

 

 

https://codepen.io/ivy-love/pen/emOKqya