在光滑的滑块中仅禁用一次上一个箭头答案

【问题标题】：disable previous arrow only one time in slick slider在光滑的滑块中仅禁用一次上一个箭头
【发布时间】：2017-05-30 23:40:04
【问题描述】：

我编写了一个 javascript 函数，当当前幻灯片为 0 时禁用“上一个”箭头，当我到达最后一张幻灯片时禁用“下一个”箭头。我希望在页面加载时仅禁用一次“上一个”箭头，然后即使在到达第一张幻灯片（当前幻灯片：0）之后，我也希望“上一个”箭头可见。目前，我有 3 张幻灯片 (0,1,2)

我尝试使用 onload() 函数仅在第一次加载时隐藏箭头，但这不起作用。

$(function(){  
  $('.hero-slider').slick({ 
        slidesToShow: 1,
        slidesToScroll: 1,
        arrows: true,
        dots:false,
        infinite: true
    });
  var currentSlide = $('.hero-slider').slick('slickCurrentSlide');
    if(currentSlide==0)
    {
        $('.slick-prev').hide();
    }
    else if(currentSlide==2)
    {
        $('.slick-next').hide();
    }
});

$('.hero-slider').on('afterChange', function(){
  console.log($('.hero-slider').slick('slickCurrentSlide'));
  var currentSlide = $('.hero-slider').slick('slickCurrentSlide');
    if(currentSlide==0)
    {
        $('.slick-prev').hide();
        $('.slick-next').show();
    }
    else if(currentSlide==2)
    {
        $('.slick-next').hide();
        $('.slick-prev').show();
    }
    if(currentSlide>0 && currentSlide<2)
    {
        $('.slick-prev').show();
        $('.slick-next').show();
    }
});

【问题讨论】：

@Pranav 这是工作代码。在这里，当我的幻灯片到达最后阶段时，“下一个”箭头被禁用，而当它在第一张幻灯片中时，“上一个”箭头被禁用。我不希望在第一次加载页面后禁用“上一个”箭头。
jsfiddle.net/4cquwuLv/3
预期的行为是什么？我仍然不清楚
显示第一张幻灯片时（加载页面时），“上一个”箭头的状态为 hide()。当我的滑块完成一轮显示所有幻灯片然后从 0 重新开始时，我希望将状态更改为 show()。
非常感谢您的帮助！它现在正在工作。

标签： javascript slick.js

【解决方案1】：

只保留滑块初始化代码，移除事件处理程序和其他代码。

jQuery(function($) {  
 $('.hero-slider').slick({ 
        slidesToShow: 1,
        slidesToScroll: 1,
        arrows: true,
        dots:false,
        infinite: true
    });
});

jQuery(function($) {  
 $('.hero-slider').slick({ 
        slidesToShow: 1,
        slidesToScroll: 1,
        arrows: true,
        dots:false,
        infinite: true
    });
});

<link href="https://cdnjs.cloudflare.com/ajax/libs/slick-carousel/1.6.0/slick.css" rel="stylesheet"/>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.8.2/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/slick-carousel/1.6.0/slick.js"></script>
<section class="info-banner">
      <div class="hero-slider">
        <div class="info-slider-content" style="background-image: url(images/visual2.jpg);">
          <div class="banner-content info-content">
            <p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit.Aenean commodo ligula                    eget dolor. Aenean massa. Cum sociis natoque penatibus et </p>          
          </div>
        </div>
        <div class="info-slider-content" style="background-image: url(images/visual3.jpg);">
          <div class="banner-content info-content">
            <p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Aenean commodo ligula                  eget dolor. Aenean massa</p>
          </div>
        </div>
        <div class="info-slider-content" style="background-image: url(images/visual2.jpg);">
          <div class="banner-content info-content">
            <p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Aenean commodo ligula                  eget dolor. Aenean massa. Cum sociis natoque penatibus et </p>
          </div>
        </div>
      </div>
    </section>

更新：如果您想最初隐藏按钮，然后在幻灯片更改后更新事件处理程序中的按钮一次（使用one() 方法只执行一次）。

jQuery(function($) {
  $('.hero-slider').slick({
    slidesToShow: 1,
    slidesToScroll: 1,
    arrows: true,
    dots: false,
    infinite: true
  });
  var currentSlide = $('.hero-slider').slick('slickCurrentSlide');
  $('.slick-prev').toggle(currentSlide != 0);
  $('.slick-next').toggle(currentSlide != 2);

  $('.hero-slider').one('afterChange', function() {
    $('.slick-prev,.slick-next').show();
  });
});

jQuery(function($) {
  $('.hero-slider').slick({
    slidesToShow: 1,
    slidesToScroll: 1,
    arrows: true,
    dots: false,
    infinite: true
  });
  var currentSlide = $('.hero-slider').slick('slickCurrentSlide');
  $('.slick-prev').toggle(currentSlide != 0);
  $('.slick-next').toggle(currentSlide != 2);
  
  $('.hero-slider').one('afterChange', function() {
    $('.slick-prev,.slick-next').show();
  });
});

<link href="https://cdnjs.cloudflare.com/ajax/libs/slick-carousel/1.6.0/slick.css" rel="stylesheet" />
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.8.2/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/slick-carousel/1.6.0/slick.js"></script>
<section class="info-banner">
  <div class="hero-slider">
    <div class="info-slider-content" style="background-image: url(images/visual2.jpg);">
      <div class="banner-content info-content">
        <p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit.Aenean commodo ligula eget dolor. Aenean massa. Cum sociis natoque penatibus et</p>
      </div>
    </div>
    <div class="info-slider-content" style="background-image: url(images/visual3.jpg);">
      <div class="banner-content info-content">
        <p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Aenean commodo ligula eget dolor. Aenean massa</p>
      </div>
    </div>
    <div class="info-slider-content" style="background-image: url(images/visual2.jpg);">
      <div class="banner-content info-content">
        <p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Aenean commodo ligula eget dolor. Aenean massa. Cum sociis natoque penatibus et</p>
      </div>
    </div>
  </div>
</section>

【讨论】：

您提供的代码在到达下一张幻灯片（幻灯片 1）时禁用“下一张”和“上一张”箭头。
更新后的代码没有禁用“上一个”箭头。我之前也尝试过这种逻辑。幻灯片正在移动，但当它到达第 0 张幻灯片时，前一个箭头被禁用
仍然是同样的问题：/“上一个”箭头仍然处于禁用状态