ZeroPlus Media > Web制作 > JavaScript > 【jQuery】プラグインを使わずにスライドショーを作る方法

【jQuery】プラグインを使わずにスライドショーを作る方法

2022/03/10

2023/04/22

この記事ではHTNL、CSS、jQueryを用いて「プラグインを使わずにスライドショーを作る方法」について解説します。なお、スライドショーはslickやswiperなどプラグインを用いて簡単に実装することができます。複数のメソッドを使用しますが、使い方を理解できればスライドショーに限らずさまざまな場面で活用することができます。

この記事で身につく内容

プラグインを使わずにスライドショーを作る方法
複数のメソッドの使い方

関連記事として、「jQueryのスライドショープラグインのおすすめ3選」をまとめた記事を下記に解説していますので、合わせて一読ください。

【jQuery】初心者でも簡単！スライドショーおすすめプラグイン3選

プログラミング学習でこのような経験はありませんか？

目標に向けて何を学べば良いかわからない
調べても解決策が見つからない
現場レベルのスキルが身につくのか不安

これらの悩みは、学習環境を整えることで全て解決することができます。

ZeroPlus Gateでは、30日間無料で最適な学習環境を提供しています。

なんでも相談できる専属メンター
いつでも技術相談ができるプロ講師
元IT企業CTO監修のカリキュラム

条件なしでこのレベルの環境を無料で提供しているのはZeroPlus Gateだけです。
ただし、無料サービスの提供には参加者の数に制限があります。

少しでも興味がある方は、以下のリンクからサービスの詳細をご覧ください。

今すぐZeroPlus Gateの詳細を見る

スライドショーを実装する方法
プラグインを使わずに実装したスライドショーサンプル
まとめ

スライドショーを実装する方法

HTMLで構造を記述し、CSSでスタイルを整えた後、jQueryで動きを付けていきます。

今回作成するスライドショーの動きとしては下記のようになります。

スライドショーのHTMLを準備する

HTMLの構造は下記になります。

<body>
  <div class="slide-items" id="js-slide">
    <img src="images/dummy.png" alt="">
    <img src="images/dummy2.jpg" alt="">
    <img src="images/dummy3.jpg" alt="">
  </div>
  <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.6.0/jquery.min.js"></script>
  <script src="main.js"></script>
</body>

imgタグには画像を適用します。スライドをjQueryで制御するのでidを付与します。scriptタグにはjQueryのCDNファイルを適用します。

スライドショーのCSSを整える

CSSは下記になります。

.slide-items {
  list-style: none;
  position: relative;
  width: 50%;
  height: 50%;
  overflow: hidden;
}

.slide-items img {
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
}

出力結果

この時点では画像が3枚重なっている状態です。ここからjQueryで動きをつけていきます。

jQueryでスライドショーの動きを制御する

main.jsファイルに下記の記述をします。

スライドショーで表示させたい画像をfindメソッドを使って要素（下記ではimgタグ）を取得し、変数に格納します。

const slides = $("#js-slide").find("img");
const slideLength = slides.length;

findメソッドは、選択した要素の子孫要素を検索して条件に当てはまる要素を見つけるメソッドです。$("#js-slide").find("img");の場合は、「#js-slideの中のimgタグ」を探して取得しています。

lengthプロパティは、文字列の長さや配列の要素数を取得するプロパティです。
変数slidesの中に、格納した配列の要素数（画像の枚数）を取得し、変数に格納します。

画像の表示・非表示の切り替えをhideメソッド、showメソッドを使用します。

hideメソッドは要素を非表示にするメソッドです。

showメソッドは要素を表示するメソッドです。

書き方としては下記のように記述します。

変数名.メソッド();

showメソッド、hideメソッドを使う場合は、例えば下記のように記述します。

slides.hide(); // 要素を非表示にする
slides.show(); // 要素を表示する

まず変数slidesの中の最初の画像を表示させたいので、下記のように記述します。

slides.eq(0).show();

eq()メソッドは、インデックス番号の要素を取得することができます。
eq(0).show();は1番目（最初の要素）を表示させるという意味になります。

このように複数のメソッドを「.（ドット）」でつなげる方法をメソッドチェーンといいます。

次に下記の記述をします。

let now = 0;　//初期状態
let next = 1;

const slidesshow = () => {
  slides.eq(now % slideLength).fadeOut();
  slides.eq(next % slideLength).fadeIn();

  now++; //1ずつカウントアップ
  next++; // 1ずつカウントアップ
};

slideshow(); // 実行

fadeOutメソッドは、要素を徐々に非表示にするメソッドです。

fadeInメソッドは、徐々に要素を表示させるメソッドです。

fadeOut、fadeInの（）の中に数値を入れると、その数値に合わせて変化します。
数値を変数で管理したいので、下記のように書き換えます。

const fade = 1500;
const slidesshow = () => {
  slides.eq(now % slideLength).fadeOut(fade); // fadeOutの()に変数をいれる
  slides.eq(next % slideLength).fadeIn(fade); // fadeInの()に変数をいれる
  now++
  next++
};

slideshow();

変数slidesの中にはfindメソッドで取得したimgタグが格納されており、それをeqメソッドで要素を取得します。

変数slideLengthで要素数（画像の枚数）を取得しているので、それをスライド1回ずつカウントアップしながら「%」で割った数の「余り」を算出します。

％：割り算の「余り」を求める算術演算子。

const slidesshow = () => {
  slides.eq(now % slideLength).fadeOut(fade);
  // 0 % 3 = 0
  // 1 % 3 = 1
  // 2 % 3 = 2
  // 3 % 3 = 0
  // 4 % 3 = 1

  slides.eq(next % slideLength).fadeIn(fade);
  // 1 % 3 = 1
  // 2 % 3 = 2
  // 3 % 3 = 0
  // 4 % 3 = 1
  // 5 % 3 = 2

  now++;
  next++;
};
slidesshow();

上記コードのイメージとしては、下記のようになります。

slidesshowが呼び出される（now = 0, next = 1）
1. 0%3（nowの値 % slideLengthに格納された画像の枚数） = 0 →（最初の画像が初期状態で表示⇀フェードアウト）
2. 1%3（nextの値 % slideLengthに格納された画像の枚数） = 1 →（2枚目の画像がフェードイン）
3. now++ と next++ で1ずつカウントアップ
slidesshowが呼び出される（now = 1, next = 2）
1. 1%3 = 1（2枚目の画像がフェードアウト）
2. 2%3 = 2（3枚目の画像がフェードイン）
3. now++ と next++ で1ずつカウントアップ
slidesshowが呼び出される（now = 2, next = 3）
1. 2%3 = 2 （3枚目の画像がフェードアウト）
2. 3%3 = 0（1枚目の画像がフェードイン）
3. now++ と next++ で1ずつカウントアップ

以下、繰り返し。

現状では一瞬で画像が切り替わり、繰り返しの動きもないのでsetIntervalメソッドを使用します。

setInterval(slidesshow);

setIntervalメソッドは、一定の時間が経過する毎に関数を呼びだすことができるメソッドです。

ここでconsole.logを使って変数nowやnextの動きを確認してみると、下記のようにカウントが1ずつ増えているのが確認できます。

下記はconsole.log(now);を使用した場合です。

現状だと繰り返しスライドショーのプログラムが実行されますが、スライドの切り替え時間が早いので、setIntervalメソッドに引数を適用して遅延時間を設定します。

const show = 3000;
setInterval(slidesshow, show);

これでほぼ完成ですが、さらにスライドしたときに画像をズームして切り替えたいので、下記のように記述します。

const slidesshow = () => {
  slides.eq(now % slideLength).fadeOut(fade).removeClass("zoom");
  slides.eq(next % slideLength).fadeIn(fade).addClass("zoom");
  now++;
  next++;
};

addClassメソッドとremoveClassメソッドをつなげて、zoomクラスのつけ外しを行います。そしてCSSにzoomクラスが付与したときのスタイルを記述します。

.slide-items img {
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  width: 100%;
  height: 100%;
  transition: 4s linear transform .4s; /* 追記 */
  object-fit: cover;
}
/* 追記 */
.slide-items .zoom {
  transform: scale(1.05);
}

これでスライドショーが完成しました。