swiper 무한 자동 롤링 기능 구현 speed 속도

안녕하세요

찐망고 입니다.

오늘은 siwper를 이용하여 무한 롤링을 만들어 볼거에요.

이젠 다 swiper로 해결하려는 마음이에요.

 

구루미비즈

롤링 애니메이션

 

 

이미지들이 좌우로 무한 롤링되서 움직입니다. 

예전엔 저런 애니메이션을 js로도 하고 css로도 어거지로 만들기도 했는데

swiper를 사용하면 아주 편합니다.

 

포스팅을 이제서야 하...

 

 

일단 이미지를 슬라이드 width값으로 지정하고 싶으면

swiper에서 freemode를 사용하는 것이 좋습니다.

swiper는 slidesPerView에 지정된 숫자에 따라 자동으로 width값을 잡는데요.

freemode를 사용하게 되면 사용자가 직접 css에서 width값과 여백을 지정해 줘야 합니다.

const swiperSlides = document.querySelectorAll('.swiper');

swiperSlides.forEach(function (element, index) {
    element.classList.add("swiper-" + index);
    let swiper = new Swiper(".swiper-" + index, {
      autoplay: {
            delay: 1, 
            // 슬라이드가 자동으로 전환되기까지의 시간 간격
            desableOnInteraction: false, 
            // arrow나 pagination이용 후 자동 재생을 비활성화 할지의 여부
      },
      speed: 8e3,
      // 슬라이드가 자동으로 전환되는 속도를 설정
      loop: true,
      // 슬라이드가 무한 순환
      slidesPerView: "auto",
      // 슬라이드가 표시되는 갯수를 설정
      freemode: true
      // 슬라이드가 자유롭게 스와이프 되도록 설정
    });
});

 

클래스를 추가하는 이유는 각각의 swiper인스턴스가 고유한 클래스를 가지도록 하기 위해서 인데요

swiper라이브러리는 클래스 선택자를 사용하여 요소를 찾습니다.

각 swiper인스턴스에 대한 고유한 클래스를 추가하여 각각의 swiper가 서로 다른 요소에 연결되도록 합니다.

 

참고로 speed에서 사용한 8e3은 8곱하기 10의 3제곱을 뜻합니다.

즉 8000이고, 이를 과학적 표기법, 부동소수점 표기법이라고 합니다.

예를 들어 1000000000 이라는 숫자는 얼마인지 알아내려면 0을 세어야 하지만

1e9라고 입력하면 즉시 알 수 있습니다.

 

 

css도 수정해줘야 하는데요.

swiper의 freemode에 맞춰 작업하는건 물론이고 

.swiper-wrapper에 적용된 transition-timing-function을 linear로 변경해야 합니다.

아니면 하나의 슬라이드가 움직일때마다 멈추는 느낌이 나거든요.

.swiper-wrapper {
	transition-timing-function: linear;
}

 

 

 

 

코드펜에서 롤링되는 슬라이드를 확인해보세요.

 

See the Pen swiper rolling by 찐망고 (@nnwbliyz-the-styleful) on CodePen.