【jQuery】ゆっくり流れる無限ループスライダー（逆向きも）

昔、下の記事でSlick.jsを使った無限ループスライダーの実装方法を紹介しましたが、

【簡単】slick.jsで無限ループスライダー

いろいろ問題があるうえ逆向き（左から右）ができないということで、今回はプラグインなしでjQuery+CSSで実装する方法を紹介します。

こんな感じになります↓

それでは実装してみましょう。

html

<div class="slider">
  <div class="slider__inner">
    <div class="slider__item"><img src="https://meshikui.com/wp-content/uploads/2020/07/iphone8IMGL8205_TP_V.jpg" alt="" width="300"></div>
    <div class="slider__item"><img src="https://meshikui.com/wp-content/uploads/2020/07/200713.jpg" alt="" width="300"></div>
    <div class="slider__item"><img src="https://meshikui.com/wp-content/uploads/2020/07/200701.jpg" alt="" width="300"></div>
    <div class="slider__item"><img src="https://meshikui.com/wp-content/uploads/2020/05/blackmondayIMGL0444_TP_V.jpg" alt="" width="300"></div>
    <div class="slider__item"><img src="https://meshikui.com/wp-content/uploads/2020/04/200402.jpg" alt="" width="300"></div>
  </div>
</div>

jQuery

グループ一つではループできないので、jQueryで３つに分身させます。

<script>
  $(function(){
    $('.slider__inner').each(function(){
      var sliderWidth = $(this).width();

      $(this).clone(true).insertBefore(this);
      $(this).clone(true).insertAfter(this);

      $('.slider').css('width', sliderWidth*3); // 親要素の横幅を子要素の３倍にする
    });
  });
</script>

CSS

CSS Animationを使って動かします。
まずは、全てを横並びにしましょう。

.slider {
  display: flex;
}
.slider__inner {
  display: flex;
}

続いてアニメーションの部分。

右から左

.slider__inner:first-child {
  animation: loop 90s linear infinite;
}

.slider__inner:nth-child(2) {
  animation: loop2 90s -60s linear infinite;
}

.slider__inner:last-child {
  animation: loop3 90s -30s linear infinite;
}

@keyframes loop {
  0% {
    transform: translateX(200%);
  }
  to {
    transform: translateX(-100%);
  }
}

@keyframes loop2 {
  0% {
    transform: translateX(100%);
  }
  to {
    transform: translateX(-200%);
  }
}

@keyframes loop3 {
  0% {
    transform: translateX(0%);
  }
  to {
    transform: translateX(-300%);
  }
}

２つめと３つめのグループのdulationを、speedの-1/3、-2/3にするのがポイント。

左から右

.slider__inner:first-child {
  animation: loop 90s linear infinite;
}

.slider__inner:nth-child(2) {
  animation: loop2 90s -60s linear infinite;
}

.slider__inner:last-child {
  animation: loop3 90s -30s linear infinite;
}

@keyframes loop {
  0% {
    transform: translateX(-100%);
  }
  to {
    transform: translateX(200%);
  }
}

@keyframes loop2 {
  0% {
    transform: translateX(-200%);
  }
  to {
    transform: translateX(100%);
  }
}

@keyframes loop3 {
  0% {
    transform: translateX(-300%);
  }
  to {
    transform: translateX(0%);
  }
}

地味に需要があるかもしれない！最初ちょっと崩れるかもなぁってときは、ローディング画面にするか透明にしとくか、適当に隠しておきましょう。
現場からは以上です。