Slick Slider - 从不同的幻灯片视图中删除箭头答案

【问题标题】：Slick Slider - remove arrows from different slide viewsSlick Slider - 从不同的幻灯片视图中删除箭头
【发布时间】：2016-02-12 22:30:35
【问题描述】：

我正在使用 slick.js 为滑块提供动力。我想在第一张幻灯片处于活动状态时删除“上一张”箭头，在最后一张幻灯片处于活动状态时删除“下一张”箭头。当最后一张幻灯片处于活动状态时，我可能需要删除两个箭头。是否有一个光滑的事件函数或 jquery 函数可以做到这一点？

【问题讨论】：

为什么要删除最后一张幻灯片上的两个箭头？您还提到要删除最后一张幻灯片上的下一个箭头。最后一张和最后一张幻灯片是什么意思？他们是一回事，对吧？
是的，它们是一样的。因此，如果我在最后一张幻灯片上，我不希望出现下一个箭头 - 因为没有下一张幻灯片，我不想重新开始。

标签： jquery slick.js

【解决方案1】：

要禁用第一张幻灯片上的上一个箭头和最后一张幻灯片上的下一个箭头，您可以在如下所示的平滑初始化上定义infinite : false,。

 $("#slider").slick({
        infinite : false
  });

如果您有其他设置，只需将其包含在初始化中。 slider 是容器的 ID。

这是为了禁用 Slider 上的箭头。要删除箭头，您可以在第一张/最后一张幻灯片处于活动状态时将其隐藏。浏览有关如何在滑块上获得活动幻灯片的文档，使用 jquery hide 您可以按箭头按钮的类名隐藏箭头。您可以通过检查元素来获取箭头按钮的类/ID。右键单击箭头并检查它。

获取当前幻灯片：$('#slider').slick('slickCurrentSlide');

隐藏或显示下一个箭头：$('.slick-next').show(); 或 $('.slick-next').hide();

上一个箭头也是如此：$('.slick-prev').show(); 或 $('.slick-prev').hide();

Heres Fiddle： https://jsfiddle.net/pjfw1wqz/

【讨论】：

谢谢！我添加了设置“infinite:false”，但箭头仍然可见，我以为我误解了设置。那是星期五，一个漫长的一周结束了——我脑死了！现在我更仔细地查看它，我发现即使按钮设置为显示，它也被禁用。我可以针对禁用类来隐藏按钮。用户仍然可以访问导航点，并且可以在必要时重新开始。也感谢您帮助我了解如何使用 afterChange。这是我认为我需要的，如果有必要我可以做更多。

【解决方案2】：

        // slick init
        startSlick();
        var tickerDiv = $("#animatedHeading");
        function startSlick(slick) {  
            tickerDiv.slick({
                arrows: true,
                infinite: false,
                adaptiveHeight: true
              });
                var current_article = tickerDiv.slick('slickCurrentSlide');
                var total_articles = tickerDiv.slideCount;
                tickerDiv.on('init reInit afterChange', function(event, slick, currentSlide, nextSlide){
                    current_article = tickerDiv.slick('slickCurrentSlide');
                    total_articles = slick.slideCount;
                    slickArrow();
                });
                slickArrow();
                function slickArrow() {  
                    if(current_article==0){
                       $('.slick-prev').hide();
                    }else{
                       $('.slick-prev').show();
                    }
                    if (current_article==total_articles-3){
                        $('.slick-next').hide();
                    }else{
                        $('.slick-next').show();
                    }
                }
        };

【讨论】：

【解决方案3】：

天哪！ Slick 为此类箭头添加了一个特殊类 - slick-disabled。您需要禁用无限功能并为此类添加样式。

<script>
    $(document).ready(){
        $('#slider').slick({
            infinite : false, 
        });
    };
</script>
<style>
    .slick-arrow.slick-disabled { 
        display: none !important;
    }
</style>

【讨论】：

为您的代码添加一些上下文，以帮助未来的读者更好地理解其目的。