Question

我正在使用slick.js为滑块供电。我想在第一张幻灯片处于活动状态时删除“上一个”箭头，并在最后一张幻灯片处于活动状态时删除“下一个”箭头。当最终幻灯片处于活动状态时，我可能需要删除两个箭头。是否有可以执行此操作的灵活事件函数或jquery函数？

Answer 1

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

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

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

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

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

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

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

Heres 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为此类箭头添加了特殊类别-禁用Slick。您需要禁用无限功能并为此类添加样式。

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

光滑滑块 - 从不同幻灯片视图中删除箭头

3 个答案: