最初のスライドを表示している時は「前へ」ボタンはいらないよなぁ…
ですよね。
同様に最後のスライドの表示中には「次へ」ボタンはいらないですよね。
今日はここを勉強します。
まずはクリックイベントを設定する
$(‘.change-btn’).click(function() {
changeボタンのクリックイベントを設定
var $displaySlide = $(‘.active’);
$displaySlide.removeClass(‘active’);
if ($(this).hasClass(‘next-btn’)) {
$displaySlide.next().addClass(‘active’);
} else {
$displaySlide.prev().addClass(‘active’);
}
これは前回の記事で実装した部分ですね。
最初／最後のスライド表示中だけボタンを隠す
var slideIndex = $(‘.slide’).index($(‘.active’));
変数slideIndexにスライドのactive要素を代入します。
$(‘.change-btn’).show();
showメソッドでchange-btn要素（「前へ」「次へ」）を一旦表示します。
if(slideIndex==0){
$(‘.prev-btn’).hide();
}else if(slideIndex==3){
$(‘.next-btn’).hide();
}
});
「変数」と「if／else if」を使い、最初のスライド／最後のスライドを表示している場合は各ボタンを隠すようにします。
これで前後1枚ずつ送るボタンが完成です。
