HTML&CSS,  jQuery

jQuery:スライドの切り替え(全体のコード)

jQuery:スライドの切り替え(全体のコード)
※分かりやすいように関数でまとめていないバージョンです

html

<div class="change-btn-wrapper">
   <div class="change-btn prev-btn">← 前へ</div>
   <div class="change-btn next-btn">次へ →</div>
</div>
<ul class="slides">
   <li class="slide active"><img src="#"></li>
   <li class="slide"><img src="#"></li>
   <li class="slide"><img src="#"></li>
   <li class="slide"><img src="#"></li>
</ul>
<div class="index-btn-wrapper">
   <div class="index-btn">1</div>
   <div class="index-btn"6gt;2</div>
   <div class="index-btn">3</div>
   <div class="index-btn">4</div>6gt; 
</div>

CSS(抜粋)

 .prev-btn {
   cursor: pointer;
   float: left;
   display:none;
 }

 .slide {
   display: none;
 }

 .active {
   display: block;
 }
 
jquery

$(function() {
   $('.index-btn').click(function() {
     $('.active').removeClass('active');
     var clickedIndex = $('.index-btn').index($(this));
     $('.slide').eq(clickedIndex).addClass('active');
     var slideIndex = $('.slide').index($('.active'));
     $('.change-btn').show();
     if(slideIndex == 0){
       $('.prev-btn').hide(); 
     } else if(slideIndex == 3){
       $('.next-btn').hide(); }
   });

   $('.change-btn').click(function() {
     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'));
   $('.change-btn').show();
   if (slideIndex == 0) {
      $('.prev-btn').hide();
    } else if (slideIndex == 3) {
       $('.next-btn').hide();
    }
  });
});


コメントを残す

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