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