【JavaScript】スライドショーレスポンシブ対応

仕様

• 表示されるのは1枚
• スライドが最後までいくと最初に戻りループさせる
• 現在のスライドに対応するポインタを表示

html

slideとdotの数は同じにする

index.html

<div class="slideshow">
    <div class="slide-contents" data-slide="0">
        <div class="slide slide0 active" style="background-image: url({{image-path}})"></div>
        <div class="slide slide1" style="background-image: url({{image-path}})"></div>
        <div class="slide slide2" style="background-image: url({{image-path}})"></div>
    </div>
    <div class="dots">
        <div class="dot dot0 active"></div>
        <div class="dot dot1"></div>
        <div class="dot dot2"></div>
    </div>
</div>

css

画像のサイズは16:9とする

style.css

.slideshow {
  width: 90%
  position: relative;
  overflow: hidden;
}

.slideshow .slide-contents {
  position: relative;
}

.slideshow .slide-contents .slide {
  display: none;
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  background-repeat: no-repeat;
  background-size: cover;
  background-position: center;
}

 .slideshow .slide-contents .slide:before {
  content: '';
  display: block;
  padding-top: 56.25%;
}

 .slideshow .slide-contents .slide.slide0 {
  display: block;
  position: relative;
}

.dots {
  margin-top: 15px;
  display: flex;
  justify-content: center;
}

.dots .dot {
  width: 10px;
  height: 10px;
  background-color: #ccc;
  border-radius: 50%;
  margin-left: 10px;
}

.dots .dot:first-child {
  margin-left: 0
}

.dots .dot.active {
  background-color: blue;
}

処理のフロー

1. 現在のスライド番号を取得し、次のスライド番号を計算する
2. 次にアクティブになるスライドにactiveクラスを付け替える（ポインタも同様）
3. アクティブにしたスライドをフェイドインで前面に表示する
4. 現在のスライド番号を更新する

１〜４を繰り返す

slideshow.js

/*
  selector baseのcssセレクタ
  interval 次のスライドに切り替わる時間
  animationTime スライド切り替え時のアニメーション時間
*/
const slideshow = (selector, interval = 2600, animationTime = 1000) => {
  const INTERVAL = 250;
  let slideCount = 0;
  let slideBase = $(selector);
    if(!slideBase.length) {
      return;
    }
  let slideContents = slideBase.find('.slide-contents');
  let slideLen = slideContents.find('.slide').length;

  // アクティブのスライド番号を取得
  const currentNum = () => {
    return slideContents.data('slide') || 0;
  }

  // スライド番号をノーマライズ
  const normalizeSlideNum = (num) => {
    if(num == slideLen) {
      return 0;
    } else if(num < 0) {
      return slideLen - 1;
    } else {
      return num;
    }
  };

  // スライドのjqueryオブジェクトを取得
  const getSlide = (num) => {
    if(num == 'active') {
      return slideContents.find('.slide.active')
    } else {
      return slideContents.find(`.slide${num}`)
    }
  };
  
  // 実行
  const run = () => {
    var nextNum = normalizeSlideNum(currentNum() + 1);
    slideCount = slideCount + 1;
    getSlide('active').removeClass('active');
    getSlide(nextNum).addClass('active');
    slideBase.find('.dots .dot.active').removeClass('active');
    slideBase.find(`.dots .dot${nextNum}`).addClass('active');
    // チラツキ防止のため一度hiddenにしてからフェイドインさせる
    getSlide(nextNum).hide().css('z-index', slideCount).fadeIn(animationTime);
    slideContents.data('slide', nextNum);
    setTimeout(run, interval)
  };

  run();
};

slideshow('.slideshow');