jQueryを使ったスライドショー下のボタンの作り方

シュテル(@sterchannel2020)です！

jQueryを使ってスライドショー下によくあるボタンを実装したいんだけどどうすればいいんだろ…

スライドショーの下によくあるボタン。見たい画像を表示させられるボタンですね。

スライドショーには必須の機能ですので、スラスラ実装できるようになっておきたいですね。

この記事ではjQueryを使って自作していきます。

スライドショーの仕組み

全ての画像をdisplay:none;で消しておいて、activeというクラスが付いた画像だけをdisplay:block;して表示させる

というのが基本的な仕組みです。

言い換えると

「activeというクラスの付け外し＝画像の表示／非表示」

になっているということです。

スライドの下部にあるボタンをクリックすると、

表示中の画像からactiveクラスを外し、該当する画像にactiveクラスをつける

という動作がおこなわれて、その結果別の画像が表示されるわけです。

indexメソッドとは、指定した要素のindex番号を取得できます。

たとえば…

$(‘li’).index($(‘.active’));

だと、「li」要素の中の「.active」要素のindex番号を取得できます。

これと「this要素」をつかって、

「今クリックした要素のindex番号」を取得することもできるんです。

スライドショーの動作に使える気配がしますね。

eqメソッドとは、

jQueryオブジェクトの中からeqの引数の数字と同じindex番号の要素を取得できます。

たとえば…

$(‘li’).eq(2).css(‘color’,’red’);

だと、$(‘li’)の中のindex番号が「2」のjQueryオブジェクト（3個目のli要素）を取得して赤にすることができます。

（番号が0から始まることに注意！）

スライドショーにおいては、

「eqメソッドで取得したindex番号を持つ要素にactiveクラスを付けてあげて、その結果、画像を表示させることができる」

という感じです。

この流れで書いていくとスライドショー下のボタンは完成です！