【jQuery】プラグインを使わず自作できるシンプルスライダー（コピペで簡単）

  jQuery プログラミング

この記事を書いている僕は、フロントエンドエンジニア歴が15年ほど。

web業界からゲーム業界まで数多くのwebサイトやアプリケーションを制作しています。

こういった僕が、分かりやすく解説していきます。

読者の悩み

  • プラグインを使わず自作で作ってみたい
  • スクラッチでイチからコーディングするのは大変そうだけど大丈夫かな
  • メンテナンスなどいろいろめんどくさそう

こういった疑問に答えます。

本記事の内容

  • jQueryで自作スライダーをコピペで実装できます
  • 様々な知識の組み合わせが必要ですが１つ１つ解説していくので安心して進めていけます
  • シンプルでカスタマイズやメンテナンスもしやすく簡単に作れます

デモページを用意

デモページを用意してますので実際に動きが確認できます。

DEMO

サンプルコードを用意

コード［HTML / SCSS / CSS / jQuery］をGitHubの方でも確認できます。

実際のソースコードをアップしているのでクローンしてもOKです。

phpファイル
scssファイル
jsファイル
cssファイル

デモページとソースコードを確認しながらご覧ください。

骨組みは以下の5つです。

  • indexメソッド
  • prevメソッドとnextメソッド
  • ボタンの表示/非表示（条件分岐）
  • 共通部分の関数化
  • length（要素の個数を取得）

様々な知識の組み合わせが必要ですが、１つ１つ解説していくので安心して進めていきましょう。

目次

スライドの仕組み

スライド機能の実装の仕方は以下です。

<section class="c-slider">
    ︙
  <ul class="slides">
    <li class="slide active"><img src="https://buff-design.com/demo/img/shutterstock_1833221329.jpg"></li>
    <li class="slide"><img src="https://buff-design.com/demo/img/shutterstock_1165873744.jpg"></li>
    <li class="slide"><img src="https://buff-design.com/demo/img/shutterstock_394814620.jpg"></li>
    <li class="slide"><img src="https://buff-design.com/demo/img/shutterstock_365414408.jpg"></li>
    <li class="slide"><img src="https://buff-design.com/demo/img/shutterstock_675503758.jpg"></li>
  </ul>
    ︙
</section>

「.slide」要素は「display: none;」を用いて基本的に表示されないようにし、activeクラスがついた「.slide」要素だけが表示されるようにします。

このactiveクラスをjQueryによって付け替えることによって、表示されるスライドを変更していきます。

ではコードを見ていきます。

indexメソッド

「.active」クラスがついた要素のインデックス番号を取得するにはindexメソッドを用いると簡単にできます。

var slideIndex = $('.slide').index($('.active'));

「.active」クラスがついた要素のインデックス番号を取得するには、「.slide」要素の中の「.active」要素のインデックス番号を取得し変数slideIndexに代入します。

$('.index-btn').click(function() {
    ︙
  var clickedIndex = $('.index-btn').index($(this));
    ︙
});

clickイベントの中でクリックされた要素のインデックス番号を取得し変数clickedIndexに代入します。

上記の「$(this)」にはクリックした要素が入っています。それをindexメソッドの引数に指定することで、クリックした要素のインデックス番号を取得することができます。

$('.slide').eq(clickedIndex).addClass('active');

eqメソッドを用いるとjQueryオブジェクトの中からeqの引数の数字と同じインデックス番号の要素を取得できます。

上記ではクリックされた要素のインデックス番号（変数clickedIndex）を引数に指定し、「.slide」要素に「.active」クラスを追加します。

今回登場した「変数slideIndex」「変数clickedIndex」の頭には$を付けません。その理由は、変数の頭に$を付けるのはjQueryオブジェクトが格納されていることをわかりやすくするためです。文字列や数値を格納する時は$を付けません。

prevメソッドとnextメソッド

スライドに「前へ」ボタンと「次へ」ボタンを実装し、一枚送りで表示できるようにします。

<div class="change-btn-wrapper">
  <div class="change-btn prev-btn">← 前へ</div>
  <div class="change-btn next-btn">次へ →</div>
</div>
$('.change-btn').click(function() {
  var $displaySlide = $('.active');
  $displaySlide.removeClass('active');
  if ($(this).hasClass('next-btn')) {
    $displaySlide.next().addClass('active');
  } else {
    $displaySlide.prev().addClass('active');
  }
    ︙
});

prevメソッド

$displaySlide.prev().addClass('active');

prevメソッドはjQueryオブジェクトの兄弟要素（同じ階層の要素）の中から1つ前の要素を取得することができます。

クリックされた要素の「.active」クラスを削除し、１つ前の要素に「.active」クラスを追加します。

nextメソッド

$displaySlide.next().addClass('active');

nextメソッドは1つ後ろの要素を取得することができます。

クリックされた要素の「.active」クラスを削除し、１つ後ろの要素に「.active」クラスを追加します。

ボタンの表示/非表示（条件分岐）

最初のスライドが表示されている時は「前へ」ボタンを、最後のスライドが表示されている時は、「次へ」ボタンを隠します。

if (slideIndex == 0) {
  $('.prev-btn').hide();
} else if (slideIndex == $('.slide').length - 1) {
  $('.next-btn').hide();
}

ボタンの表示を切り替えるために、上記ような条件分岐を行います。スライドのインデックス番号や、「if, else if」を組み合わせて実装していきます。

共通部分の関数化

作った処理が2つのclickイベントで全く同じコードになっている場合、共通部分をtoggleChangeBtn()という関数にまとめていきます。

function toggleChangeBtn() {
  var slideIndex = $('.slide').index($('.active'));
    $('.change-btn').show();
  if (slideIndex == 0) {
    $('.prev-btn').hide();
  } else if (slideIndex == $('.slide').length - 1) {
    $('.next-btn').hide();
  }
}

定義した関数をそれぞれのclickイベントの中で呼び出します。関数を呼び出すには、その関数名を記述するだけです。

$('.index-btn').click(function() {
    ︙
toggleChangeBtn();
    ︙
});

$('.change-btn').click(function() {
    ︙
toggleChangeBtn();
    ︙
});

これで同じ処理を関数一箇所にまとめることができます。これ以降処理の内容が変わっても関数の定義部分を書き換えるだけで済むようになります。

length（要素の個数を取得）

先程ボタンの表示/非表示でありましたが、スライドの枚数が変わっても動くようにします。

$('.slide').length - 1

lengthを用いると、jQueryオブジェクトの要素の個数を取得できます。

これを活用して、スライドの枚数が変わっても、関数の内容を書き換えなくて済むようにしてます。

今回は以上になります。

スライダーはjQueryの様々な知識の組み合わせが必要ですが、１つ１つ理解すれば難しいものではありません。

作成方法が不安な方は是非参考にしていただけると嬉しいです。

一覧へ

Recommended