jQuery的滑塊問題，禁用下一個按鈕第一張幻燈片

Question

$(document).ready(function(){  
 
    //  if ($(".slick-slide").hasClass('slick-current')) { 
 
    //   $(".slick-arrow").click(function(){ 
 
    //   $(".slick-current .maintoggle").slideUp("slow"); 
 
    //  }); 
 
    //   } 
 

 

 
    $(".nav-next").click(function(){   
 
    $(".slide.active img").animate({left: "-100%"}, 1000, "linear"); 
 
    $(".slide.active + div img").animate({left: "0"}, 1000, "linear", function(){ 
 

 

 
     $(".slide.active").removeClass('active').addClass('prev-slide').delay(1000).next().addClass('active'); 
 
    });   
 
    }); 
 
    $(".nav-prev").click(function(){   
 
    $(".slide.active img").animate({left: "100%"}, 1000, "linear"); 
 
    $(".prev-slide img").animate({left: "0"}, 1000, "linear", function(){ 
 
     $(".slide.active").removeClass('active').delay(1000).prev().addClass('active'); 
 
    });   
 
    }); 
 

 
    $('.nav-next').click(function(){ 
 
    $('.maintoggle').slideUp(); 
 
    setTimeout(function(){ 
 
     $('.maintoggle').slideDown(); 
 
    }, 1500); 
 
    }); 
 
    $('.nav-prev').click(function(){ 
 
    $('.maintoggle').slideUp(); 
 
    setTimeout(function(){ 
 
     $('.maintoggle').slideDown(); 
 
    }, 1500); 
 
    });

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 
<div class="content-main"> 
 
    <div class="slider-main"> 
 
    <div class="slide active"> 
 
     <img src="images/1.jpg" class="img-width"> 
 
     <div class="maintoggle"> 
 
     <div class="showdiv"> 
 
      <div class="row"> 
 
      <div class="col-sm-4"> 
 
       <h5 class="tggl">1. When something is designed to look beautiful, it tends to work that way, too.</h5> 
 
      </div> 
 
      <div class="col-sm-8"> 
 
       <div class="row"> 
 
       <div class="col-sm-6"> 
 
        <p>Lorem Ipsum is simply dummy text </p> 
 
       </div> 
 
       <div class="col-sm-6"> 
 
        <p>It was popularised in the 1960s with the release of Letraset sheets</p> 
 
       </div> 
 
       </div> 
 
      </div> 
 
      </div> 
 
     </div> 
 
     </div> 
 
    </div> 
 
    <div class="slide"> 
 
     <img src="images/2.jpg" class="img-width"> 
 
     <div class="maintoggle"> 
 
     <div class="showdiv"> 
 
      <div class="row"> 
 
      <div class="col-sm-4"> 
 
       <h5 class="tggl">2. When something is designed to look beautiful, .</h5> 
 
      </div> 
 
      <div class="col-sm-8"> 
 
       <div class="row"> 
 
       <div class="col-sm-6"> 
 
        <p>Lorem Ipsum is simply dummy text of the printing and typesetting industry. </p> 
 
       </div> 
 
       <div class="col-sm-6"> 
 
        <p>It was popularised in the 1960s with the release</p> 
 
       </div> 
 
       </div> 
 
      </div> 
 
      </div> 
 
     </div> 
 
     </div> 
 
    </div> 
 
    <div class="slide"> 
 
     <img src="images/3.jpg" class="img-width"> 
 
     <div class="maintoggle"> 
 
     <div class="showdiv"> 
 
      <div class="row"> 
 
      <div class="col-sm-4"> 
 
       <h5 class="tggl">3. When something is designed to look beautiful, it tends to work that way, too.</h5> 
 
      </div> 
 
      <div class="col-sm-8"> 
 
       <div class="row"> 
 
       <div class="col-sm-6"> 
 
        <p>Lorem Ipsum is simply dummy text of the printing and typesetting industry. </p> 
 
       </div> 
 
       <div class="col-sm-6"> 
 
        <p>It was popularised in the 1960s with the release of Letraset sheets </p> 
 
       </div> 
 
       </div> 
 
      </div> 
 
      </div> 
 
     </div> 
 
     </div> 
 
    </div> 
 

 
    </div> 
 
    <div class="section-box"> 
 
    <div class="row"> 
 
     <div class="col-sm-2 col-xs-12"> 
 
     <div id="right-blk"> 
 
      <div class="hidebtn">Hide</div>    
 
      <div class="slide-nav"> 
 
      <a class="nav-prev nav-arrow"><i class="fa fa-angle-left"></i></a> 
 
      <span>&nbsp;</span> 
 
      <a class="nav-next nav-arrow"><i class="fa fa-angle-right"></i></a> 
 
      </div> 
 
     </div> 
 
     </div> 
 
    </div> 
 
    </div> 
 
</div>

Answer 1

嘗試這樣的事：

$(".nav-next").click(function(){ 
    $(".nav-prev").show(); 
    if($(".slide.active").next().is('.slide:last')) { 
     $(".nav-next").hide(); 
    } 
}); 

$(".nav-prev").click(function(){ 
    $(".nav-next").show(); 
    if($(".slide.active").prev().is('.slide:first')) { 
     $(".nav-prev").hide(); 
    }