ブログ

jQueryでスライダーを自作する方法

Kazunori Ichikawa
2024.04.18

システム開発

＃JavaScript
＃jquery

こんにちは、エンジニアの市川です！
今回はjQueryを使用して、スライダーを作成する方法を紹介します。
最近はjQueryを使わずにJavaScript（以下、JS）を書くことが多いのですが、jQueryを使用して書く方も多いと思うので、jQueryを使用したコードの解説をしていきます。
サンプルデータをダウンロードできるようにしたので、そちらを参照しながら読み進めてください。
PHASE毎の差分も見ると追加した内容がわかりやすいと思います。
jQueryを使わない方向けのサンプルデータ（class記法によるJS）も用意してあります。

デモページ（今回作成するスライダー）

サンプルデータ

スライダ―はWebサイトを制作していると実装する機会が多くあります。
実装方法としては「Swiper」「Slick」といった代表的なライブラリを扱うことがほとんどです。
そのような方法を利用したスライダーの動きを、CSSとJSを組み合わせることによって作成していきます。

スライダーの仕様

今回作成するスライダーの仕様を決めるため、まず「Swiper」を使用してスライダ―を作成します。

デモページ（Swiper）

Swiperの設定は下記になります。

let swiper = new Swiper('.js-swiper', {
  // スライドをループ可能にする
  loop: true,
  // 各スライドの幅をCSSで設定できるようにする
  slidesPerView: 'auto',
  // 最初のスライドが中央に配置されるようにする
  centeredSlides: true,
  // ドラッグやフリックによるスライドの変更を許可しない
  allowTouchMove: false,
  // スライドの位置を変更する為のナビゲーションを用意する
  navigation: {
    nextEl: ".swiper-button-next",
    prevEl: ".swiper-button-prev",
  },
});

SwiperのCSSによるレイアウト調整の説明は省略します。
これが今回作成するスライダーの仕様になります。

それではデモページ（Swiper）と同じようなレイアウトとスライドの動きを実装してきます。

PHASE1
「HTMLとCSSの設定」

デモページ（Swiper）では最初のスライドが中央に配置されていますが、その対応などはJSを使って設定します。

mainタグ内のHTML構造はSwiperのデモページと同様に
classを編集し、CSSで各スライドとスライドボタンのレイアウトを調整
各スライドの1階層上の親要素（以降「スライドの親要素」）の開始位置をCSSで画面の中央に設定

デモページ（PHASE1）

PHASE2
「各スライドの複製」

デモページ（Swiper）の各スライド（class名「swiper-slide」）をChromeの検証ツールで見ていただくとわかりますが、各スライドが3倍に複製されています。（HTMLで4スライドを記載しているのであれば12スライドになります）

JS該当箇所「slideClone()」

変数「cloneItem」に各スライドのHTMLを代入
複製したHTMLを代入する変数「replaceItem」に、変数「cloneItem」を変数「cloneCount」の回数代入
「スライドの親要素」の子要素のHTMLを変数「replaceItem」に置換

デモページ（PHASE2）

PHASE3
「スライドの親要素を位置調整」

登録したスライドの数が4つの場合、複製したことで12スライド表示されますが、5つ目のスライドを中央にするための設定です。

JS該当箇所「window.addEventListener(‘load’,」

スライドの幅を取得し、変数「slideW」に代入
HTMLに登録したスライドの数を変数「slideTotal」に代入
変数「slideTotal」に変数「slideW」をかけた値に、変数「slideW」の半分の値を足したものを変数「xValue」に代入
「スライドの親要素」の開始位置を変数「xValue」の値分マイナス方向に設定

デモページ（PHASE3）

PHASE4
「スライドボタンの設定」

この時点でボタンをクリックすることでスライドを移動させるところまで完了しています。
ループ処理の対応はしていないので、スライドの移動が発生しなくなると、変数「slideFlag」が「false」のままになり動かなくなります。

JS該当箇所「prevClick()」「nextClick()」「slideItems.on(‘transitionend’,」

スライドボタンをクリック時、変数「slideFlag」の値を「false」に変更
変数「xValue」の値から変数「slideW」の値を戻るボタンのときは引き、次へボタンのときは足し「スライドの親要素」の位置を変更
「スライドの親要素」の位置を変更し、「transitionend」を利用して変数「slideFlag」の値を「true」に変更

デモページ（PHASE4）

PHASE5
「スライドのループ処理」

今回作成するスライダ―はHTMLで4スライドを設定した場合、複製されて12スライドになります。
このうち先頭から4~9番目のスライドが中央に表示されるタイミングがありますが、4番目が表示されたときは8番目の同じ画像の位置に移動し、9番目が表示されたときは5番目の同じ画像の位置に移動することでループの処理を実装しています。
わかりやすいよう下記のデモページで季節をナンバーに変更し、位置変更に少し時間をかけています。

JS該当箇所「prevClick()」「nextClick()」「slideItems.on(‘transitionend’,」「setPosition()」

変数「currentNum」に最初中央に配置されるスライドをスライド番号として「1」を設定
「prevClick()」呼び出し時、変数「currentNum」の値から「1」を引く処理を追加
「nextClick()」呼び出し時、変数「currentNum」の値から「1」を足す処理を追加
「slideItems.on(‘transitionend’,」が実行されたとき、「slideFlag」の値を「true」に変更していた箇所を「setPosition()」を呼び出す形に変更
「setPosition()」呼び出し時、変数「currentNum」の値が「1」より小さいか、変数「slideTotal」より大きい場合、変数「currentNum」の値を変更し、変数「xValue」の値を再設定して、transitionが効かないように変更し、「スライドの親要素」の位置を変更
「setPosition()」に「slideFlag」の値を「true」にする処理を追加

デモページ（PHASE5）

デモページ（ナンバーにしたもの）