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

try something like this:

 $(".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();
    }