【jQuery】スライドショーにボタンを実装して1枚送りできるようにする

プログラミング
Photo by John Hoang on Unsplash

シュテル(@sterchannel2020)です!

スライドショーを前後1枚ずつ動かせるボタンを作りたい…

前回のスライドショー下のボタン実装と合わせてこれもかかせませんね!

さっそく勉強していきます👍

prevメソッドとnextメソッドを 覚える

まずは新たなメソッド、

prevメソッド

nextメソッド

を用いて実装していきます。

prevメソッド

jQueryオブジェクトの兄弟要素(同じ階層の要素)の中から1つ前の要素を取得できるメソッドです。

nextメソッド

jQueryオブジェクトの兄弟要素(同じ階層の要素)の中から1つうしろの要素を取得できるメソッドです。

ボタンを設置する

まずはHTMLファイルにて、スライドを前後に送るためのボタンを設置します。

「←前へ 次へ→」

というものですね。

ボタンのdivを2つ作って、それらをさらにdivで囲みます。

ボタンのクラス名は2つ付けます。たとえば、

“change-btn prev-btn(もしくはnext-btn)”

として1つ目のchange-btnを起爆用、2つ目の prev-btn(もしくはnext-btn) が条件づけとして使われます。

クリックイベントを作る①(今activeが付いてる要素から外す)

$(‘.change-btn’).click(function() {

change-btnのクリックされたら、

var $displaySlide = $(‘.active’)

activeクラスを持つ要素を変数 $displaySlide に代入し、

$displaySlide.removeClass(‘active’);

変数$displaySlideからactiveクラスを取り除きます

クリックイベントを作る②(クリックしたボタンに紐づく要素にactiveを付ける)

if($(this).hasClass(‘next-btn’)){

クリックした要素がnext-btnクラスを持っているなら、

$displaySlide.next().addClass(‘active’);

変数の次の要素にactiveクラスを付ける

} else {

もしそうでないなら、

$displaySlide.prev().addClass(‘active’); };

変数の前の要素にactiveクラスを付ける

まとめ:activeの付け替えで動作を実装することを理解した!

今回あたらしいメソッドprevとnextを覚えましたが、

やはり肝としては

「もれなく、効率的にactiveクラスを付け替える」

ことだなと思いました。

ボタンはまだ完成でないので次回に続きます👍

タイトルとURLをコピーしました