jQueryでプラグインを使わないスライダー

※ 当サイトではアフィリエイト広告を利用しています。

こんにちは、meiです。
今回はプラグインを使わない、簡単なスライダーの実装方法についてです。
実案件ではスライダーといえば、swiperやslickなどで実装することが多いものの、arrowsやdotsなどの要素が必要なければこれで十分かもしれません。
サンプルはこちらをご覧ください。

HTMLはこちら
cssはこちら
jsはこちら
まとめ

HTMLはこちら

<div class="slide js-slide">
        <div class="image src1 is-active"><img src="./images/img_01.jpg" alt=""></div>
        <div class="image src2"><img src="./images/img_02.jpg" alt=""></div>
        <div class="image src3"><img src="./images/img_03.jpg" alt=""></div>
        <div class="image src4"><img src="./images/img_04.jpg" alt=""></div>
        <div class="image src5"><img src="./images/img_05.jpg" alt=""></div>
</div>

cssはこちら

.slide {
  width: 600px;
  height: 400px;
  margin: 0 auto;
  position: relative;
}
@media screen and (max-width: 768px) {
  .slide {
　　width: 100%;
　　height: auto;
　　aspect-ratio: 3/2;
　}
}
.slide .image {
  position: absolute;
  top: 0;
  left: 0;
  z-index: 0;
  opacity: 0;
  transition: opacity 0s ease-in-out;/*フェードイン*/
}
.slide .image img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}
.slide .image.is-active {
  opacity: 1;
}

jsはこちら

$('.js-slide').each(function(){
  let $slides = $(this).find('.image'),
      slideCount = $slides.length,
      currentIndex = 0;
      lastIndex = slideCount - 1;

    setInterval(changeImage, 2000); 

    function changeImage(){
      let nextIndex = (currentIndex + 1) % slideCount;
      $slides.eq(currentIndex).removeClass('is-active');
      $slides.eq(nextIndex).addClass('is-active');
      currentIndex = nextIndex;
    }		
});

setIntervalによって一定の時間に特定の処理を繰り返します。

”nextIndex = (currentIndex + 1) % slideCount”　→次のスライドのインデックス番号＝現在のスライドのインデックス番号に1を足したもの(インデックス番号は0から始まるので1を足す)をスライド総数で割った余りという意味。これにより、インデックスが1つずつ入れ替わりつつ、lastIndex(最後のインデックス：総枚数-1）になると次は最初のインデックス（0）に戻るようになります。