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

Question

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

Answer 1

要禁用第一张幻灯片上的上一个箭头和最后一张幻灯片上的下一个箭头，您可以像下面这样在 slick 初始化中定义 infinite : false,。

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

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

这是为了禁用滑块上的箭头。要删除箭头，您可以在 first/last 幻灯片处于活动状态时将其隐藏。浏览有关如何在滑块上获得活动幻灯片的文档，并使用 jquery 隐藏您可以通过 class 箭头按钮名称隐藏箭头。您可以通过检查元素获得 class/id 的箭头按钮。右键单击箭头并检查它。

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

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

与上一个箭头类似：$('.slick-prev').show(); 或 $('.slick-prev').hide();

继承人Fiddle:https://jsfiddle.net/pjfw1wqz/

Answer 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();
                    }
                }
        };

Answer 3

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

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

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

Slick Slider - remove arrows from different slide views

jquery

slick.js