【jQuery・プラグインなし】自作スライドショーの作り方｜サムネイルあり｜前・次の矢印ボタンあり｜JavaScript (JS)

普段はHPへのスライドショー関係の実装はJSプラグインslick.jsを使っているのですが、

最近、jQueryでプラグインなしでスライドショーを実装する必要が出てきたので、こちらでコードを共有します。

 

jQueryスライドショー実装方法

HTML

<div class="slider">
  <div class="slider__wrapper">
    <!-- メインスライドショー -->
    <ul class="slider__list">
      <li class="slider__item is-current">
        <figure class="slider__img"> <img src="img01" alt="イメージ1"> </figure>
      </li>
      <li class="slider__item">
        <figure class="slider__img"> <img src="img02" alt="イメージ2"> </figure>
      </li>
      <li class="slider__item">
        <figure class="slider__img"> <img src="img03" alt="イメージ3"> </figure>
      </li>
    </ul>
    <!-- 前・次の矢印ボタン -->
    <div class="slider__arrow is-prev"></div>
    <div class="slider__arrow is-next"></div>
  </div>
  <!-- サムネイル -->
  <div class="slider__thumbnail">
    <ul class="slider__thumbnail__list">
      <li class="slider__thumbnail__item slider__thumbnail-current">
        <figure class="slider__thumbnail__img"> <img src="thumb-img01.jpg" alt="イメージ1"> </figure>
      </li>
      <li class="slider__thumbnail__item">
        <figure class="slider__thumbnail__img"> <img src="thumb-img02.jpg" alt="イメージ2"> </figure>
      </li>
      <li class="slider__thumbnail__item">
        <figure class="slider__thumbnail__img"> <img src="thumb-img03.jpg" alt="イメージ3"> </figure>
      </li>
    </ul>
  </div>
</div>

 

SCSS (CSS)

.slider {
  &__wrapper {
    position: relative;
  }
  &__list {
    position: relative;
    width: 100%;
    height: 0;
    padding-bottom: 132.87%;
    z-index: 1;
  }
  &__arrow {
    width: 4rem;
    height: 4rem;
    display: block;
    background-color: transparent;
    background-size: contain;
    background-repeat: no-repeat;
    position: absolute;
    top: 0;
    bottom: 0;
    margin: auto 0;
    z-index: 2;
    cursor: pointer;
    &.is-prev {
      background-image: url("../img/icon/ico-slider-left.png");
      left: 0;
      background-position: left center;
    }
    &.is-next {
      background-image: url("../img/icon/ico-slider-right.png");
      right: 0;
      background-position: right center;
    }
  }
  &__item {
    position: absolute;
    width: 100%;
    top: 0;
    left: 0;
    opacity: 0;
    transition: all 1s ease-in;
    &.is-current {
      opacity: 1;
    }
  }
  &__img {
    position: relative;
    width: 100%;
  }
  &__thumbnail {
    &__list {
      display: flex;
      flex-wrap: wrap;
    }
    &__item {
      width: 15%;
      margin-right: 2%;
      margin-bottom: 3%;
      cursor: pointer;
      &.thumbnail-current {
        position: relative;
        &::after {
          content: "";
          position: absolute;
          top: 0;
          left: 0;
          width: 100%;
          height: 100%;
          border: 2px solid #e1c7ca;
          box-sizing: border-box;
        }
      }
      img {
        width: 100%;
      }
    }
  }
}

 

 

jQuery (js)

// item kv
jQuery(function () {
      var curentNum = 0;
      var itemNum = $('.slider__item').length; // 画像item数取得
      // slider 関数
      function sliderAction() {
        if (curentNum >= itemNum) {
          curentNum = 1;
        } else {
          curentNum = curentNum + 1;
        }
        $('.slider__item').removeClass("is-current");
        $('.slider__thumbnail__item').removeClass("thumbnail-current");
        $('.slider__thumbnail__item:nth-child(' + (curentNum) + ')').addClass("is-current");
        $(''.slider__thumbnail__item: nth - child(' + (curentNum) + ')
          ').addClass("thumbnail-current");
        }
        // メインスライダー 処理
        var setSlider = setInterval(sliderAction, 3000);
        // サムネイルクリック処理
        $('.slider__thumbnail__item').click(function () {
          clearInterval(setSlider);
          var count = $(this).index();
          curentNum = count;
          sliderAction();
          setSlider = setInterval(sliderAction, 3000);
        });
        // 前のボタンをクリックした時の処理
        $('.slider__arrow.is-prev').click(function () {
          clearInterval(setSlider);
          if (curentNum <= 1) {
            curentNum = itemNum - 1;
          } else {
            curentNum = curentNum - 2;
          }
          sliderAction();
          setSlider = setInterval(sliderAction, 3000);
        });
        // 次のボタンをクリックした時の処理
        $('.slider__arrow.is-next').click(function () {
          clearInterval(setSlider);
          sliderAction();
          setSlider = setInterval(sliderAction, 3000);
        });
      });

 

ご参考までに