流れる無限ループスライダー

2024年6月3日

一定速度で横に流れ続ける無限ループスライドについて記述します
特徴としては、以下のようなことです
１）一定速度で横に流れる
２）一枚ずつでなく連続的に動く

それでは、具体的に記述していきます。

表示例は以下の通りです

１）HTML

<div class = "heart">
    <div class="swiper-container js-swiper-heart">
      <div class="swiper-wrapper">
        <div class="swiper-slide">
          <div class="slide-img">
              <img src="images/LITTLEQUEEN.jpg" alt="Swiper01">
          </div>
        </div>
        <div class="swiper-slide">
          <div class="slide-img">
              <img src="images/DOG.jpg" alt="Swiper02">
          </div>
        </div>
        <div class="swiper-slide">
          <div class="slide-img">
              <img src="images/BEBE.jpg" alt="Swiper03">
          </div>
        </div>
        <div class="swiper-slide">
          <div class="slide-img">
              <img src="images/PRIVATE.jpg" alt="Swiper04">
          </div>
        </div>
        <div class="swiper-slide">
          <div class="slide-img">
              <img src="images/PASION.jpg" alt="Swiper05">
          </div>
        </div>
        <div class="swiper-slide">
          <div class="slide-img">
              <img src="images/BRIGADE.jpg" alt="Swiper06">
          </div>
        </div>
      </div>
    </div>  
  </div>

２）CSS

.swiper-img {
  height:240px;
  width: 100%;
}

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

ポイント
１）高さをそろえるため.swiper-imgにheight:240px;を指定
２）スライドする速度を一定にするため、.swiper-wrapperにtransition-timing-function: linear;を指定

３）JS

var swiper = new Swiper('.js-swiper-heart', {
  slidesPerView: 2,
  spaceBetween: 0,
  centeredSlides: true,
  breakpoints: {
    768: {
      slidesPerView: 4,
    },
    1024: {
      slidesPerView: 6,
      centeredSlides: false,
    }
  },
  loop: true,
  autoplay: {
    delay: 0,
    disableOnInteraction: false
  },
  speed:3000,
});

　autoplay:{deley:0 とすることで止まる時間を０にする➡流れるようなスライドとなる　

よかったらシェアしてね！