シュテル(@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クラスを付け替える」
ことだなと思いました。
ボタンはまだ完成でないので次回に続きます👍