【JavaScript】簡易的なスライドショーの実装方法【プラグインなし】

  • 投稿日
  • 著者 くまだ
  • カテゴリー Web制作

どうも、くまだです。

スライドショーの実装では、SlickやSwiperをよく使うのですが、それらプラグインを使わない場合の超簡易的なスライドショーの実装メモ。簡易的なものなので、Swiperほどのカスタマイズ性は一切ないです。

JavaScriptで簡易的なスライドショーの実装する方法（プラグインなし）

コードと動きは以下のようになります。

  <div class="mvWrap">
    <div class="mv" id="slides">
      <img src="images/sample.png" alt="mv01" />
      <img src="images/sample2.png" alt="mv02" />
      <img src="images/sample3.jpg" alt="mv03" />
    </div>
  </div>
  <section></section>
.mvWrap {
  position: relative;
}

.mv {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 600px;
  overflow: hidden;
}

.mv img {
  position: absolute;
  width: 100%;
  top: 0;
  left: 0;
  height: 100%;
  object-fit: cover;
  transition: 3s linear transform .5s;
}

.mv img.zoom {
  transform: scale(1.05);
}
section {
  background-color: orange;
  height: 2000px;
}
let nowPos = 0;
let nextPos = 1; 
const slideshow = document.getElementById("slides");
const slides = slideshow.querySelectorAll("img");
const slideLength = slides.length; 
const fadeTime = 1500;
const showTime = 3000;

const hideAllSlides = () => {
  slides.forEach((slide) => {
    slide.style.opacity = 0;
  });
};


hideAllSlides();

slides[0].style.opacity = 1;

const changeSlide = () => {
  // 現在の画像をフェードアウト
  slides[nowPos].style.opacity = 0;
  slides[nowPos].classList.remove("zoom");

  slides[nextPos].style.opacity = 1;
  slides[nextPos].classList.add("zoom");


  nowPos++;
  nextPos++;

  nowPos %= slideLength;
  nextPos %= slideLength;
};

setInterval(changeSlide, showTime);

3秒ごとに画像が拡大しながら切り替わる処理。

画像はCSSの以下の部分でpositionプロパティで重ねる。overflowは画像拡大時のコンテンツからはみ出し対策で非表示に。

.mvWrap {
  position: relative;
}

.mv {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 600px;
  overflow: hidden;
}

.mv img {
  position: absolute;
  width: 100%;
  top: 0;
  left: 0;
  height: 100%;
}

以下のJS部分で、現在の画像、次の画像、切り替わりの時間やスライドの画像を取得したり設定したりしてます。slides.lengthの部分で、スライド枚数が変わっても対応できるように設定。

let nowPos = 0; // 現在の画像
let nextPos = 1; // 次の画像
const slideshow = document.getElementById("slides");
const slides = slideshow.querySelectorAll("img");
const slideLength = slides.length; 
const fadeTime = 1500;
const showTime = 3000;

いったんすべての画像を非表示にします。初期化的な感じで。

// すべての画像を非表示にする関数
const hideAllSlides = () => {
  slides.forEach((slide) => {
    slide.style.opacity = 0;
  });
};

// 最初にすべての画像を非表示
hideAllSlides();

次にスライドの0番目（つまり1枚目）を表示します。

slides[0].style.opacity = 1;

次に画像を切り替え処理。今表示している画像をopacity: 0;で非表示、次の画像をopacity:1;にして表示。

// 画像を切り替える関数
const changeSlide = () => {
  // 現在の画像をフェードアウト
  slides[nowPos].style.opacity = 0;

  // 次の画像をフェードイン
  slides[nextPos].style.opacity = 1;

  // インクリメント
  nowPos++;
  nextPos++;

  // インデックスをスライドの数を超えないようにする
  nowPos %= slideLength;
  nextPos %= slideLength;
};

インクリメントの部分は値を1ずつ増やして次の画像を切り替え。

nowPos %= slideLength;のあたりの記述は、nowPosやnextPosの値がslideLengthの数（スライドの枚数）を超えないようにするものです。例えばnowPosがslideLengthの値を超えた場合、0から再度カウントアップ。再度カウントアップするので、スライドが無限ループするようになります。

%=は、例えばnowPosの値をslideLengthで割った余りを再代入する意味になります。

nowPosの1枚目のスライドのときは、nowPosが0、slideLengthは3になります。slideLengthはスライドの全枚数です。

2枚目のスライドのときは、nowPosが1、slideLengthは3のまま。

3枚目のスライドのときはnowPosが2、slideLengthは3のまま。しかし、この時点でnextPosは3になっていて、slideLenghtの3と等しくなるため、スライドが0にリセットされて1枚目にループします。

以上、簡易的なスライドショーの実装メモでした。

ここまで読んでくださりありがとうございました。

JavaScript

この記事を書いた人

くまだ

記事一覧