[swiper] 스와이퍼 방향과, 무한으로 천천히 흐르게 하는 법 !

슬라이드는 스와이퍼 사용 

https://swiperjs.com/

Swiper - The Most Modern Mobile Touch Slider

 

HTML

  <div class="swiper mySwiper1">
    <div class="swiper-wrapper">
      <div class="swiper-slide">Slide 1</div>
      <div class="swiper-slide">Slide 2</div>
      <div class="swiper-slide">Slide 3</div>
      <div class="swiper-slide">Slide 4</div>
      <div class="swiper-slide">Slide 5</div>
      <div class="swiper-slide">Slide 6</div>
      <div class="swiper-slide">Slide 7</div>
      <div class="swiper-slide">Slide 8</div>
      <div class="swiper-slide">Slide 9</div>
    </div>
    <div class="swiper-pagination"></div>
  </div>
  
    <div class="swiper mySwiper2" dir="rtl" >
    <div class="swiper-wrapper">
      <div class="swiper-slide">Slide 1</div>
      <div class="swiper-slide">Slide 2</div>
      <div class="swiper-slide">Slide 3</div>
      <div class="swiper-slide">Slide 4</div>
      <div class="swiper-slide">Slide 5</div>
      <div class="swiper-slide">Slide 6</div>
      <div class="swiper-slide">Slide 7</div>
      <div class="swiper-slide">Slide 8</div>
      <div class="swiper-slide">Slide 9</div>
    </div>
    <div class="swiper-pagination"></div>
  </div>

 <div class="swiper mySwiper2" dir="rtl" >

- ltr : left to right 왼쪽에서 오른쪽으로 

- rtl : right to left , 오른쪽에서 왼쪽으로 

 

CSS 

transition-timing-function의 영향을 받는 CSS 속성에 대해 중간값을 계산하는 방법을 설정합니다. (균일한 속도로 전환)

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

 

javascript

var swiper = new Swiper(".swiper", {
        slidesPerView: 1,
        spaceBetween: 10,
        autoplay: {
            delay: 0, // important !!
            disableOnInteraction: false,
        },
        speed: 5000,
        loop: true,
        loopAdditionalSlides: 1,
        slidesPerView: 5,
    });

autoplay에 delay : 0 꼭 써주기 !