HTML&CSS,  jQuery

jQuery:スライドの切り替え3(prevボタンとnextボタンの設置)

JQuery:スライドの切り替え3(prevとnextボタンの設置)

全体の手順

①prevとnextボタンをhtmlに設置

<div class="change-btn-wrapper">
  <div class="change-btn prev-btn">← 前へ</div>
  <div class="change-btn next-btn">次へ →</div>
</div>

②prevとnextボタンのクリックイベント

現在表示されている画像からactiveを取り外し、
prevボタンがクリックされたときには、表示されている画像の
前の画像にativeをnextボタンがクリックされたときには
表示されているが画像の次の画像にactiveをつける
(if文での記述)

jquery

$('.change-btn').click(function() {
    var $displaySlide = $('.active');
    $displaySlide.removeClass('active');
    if ($(this).hasClass('next-btn')) {
      $displaySlide.next().addClass('active');
    } else {
      $displaySlide.prev().addClass('active');
    }
 });
  
③1枚目の画像が表示されているときは、prevボタンが、
4枚目の画像が表示されているときは、nextボタンが
表示されないようにする

indexメソッドで表示されている画像のインデックス番号を取得。
インデックス番号が0と3の時、ボタンが表示されないようにする。
(if文での記述)

var slideIndex = $('.slide').index($('.active'));
if(slideIndex == 0){
    $('.prev-btn').hide();
} else if(slideIndex == 3){
    $('.next-btn').hide();
}

④ボタンがクリックされていないとき

初期状態では、クリックイベントが発動していないため、
1枚目にprevボタンが表示されてしまう。
そこで、CSSにdisplay:none;の記述を加え、
prevボタンを表示しないようにする

CSS

.prev-btn {
   display:none;
 }

⑤このままの状態では、prevボタンが常に表示されない状態になってしまうので、
クリックイベント内で、prevとnextボタンを両方、表示させるようにする
(③のifの条件分岐の前に記述)

$('.change-btn').show();

⑥1枚目と4枚目の画像が表示されたときの
prev、nextボタンの状態は、前回まで作っていた、
番号ボタンをクリックしたときにも適用される必要があるので、
③と⑤の記述は、prevとnextボタンのクリックイベント内だけでなく
インデックスボタンのクリックイベント内にも記述する。

コメントを残す

メールアドレスが公開されることはありません。