油滑滑块 -

我使用slick.js供电的滑块从不同的幻灯片视图中除去箭头。我想在第一张幻灯片处于活动状态时移除“上一个”箭头，在上一张幻灯片处于活动状态时移除“下一个”箭头。当最后一张幻灯片处于活动状态时，我可能需要删除两个箭头。是否有一个可以做到这一点的流畅的事件函数或jquery函数？油滑滑块 -

来源

2016-02-12 heytricia

为什么哟你想删除最后幻灯片上的箭头？你还提到你想删除最后一张幻灯片上的下一个箭头。上一张和最后一张幻灯片是什么意思？他们是同一个权利？ – pratikpawar

是的，它们是一样的。所以如果我在最后一张幻灯片上，我不希望下一个箭头出现 - 因为没有下一张幻灯片，我不想重新开始。 – heytricia

要禁用之前的箭头，第一张幻灯片和下一个箭头在最后一张幻灯片，你可以在光滑的初始化定义infinite : false,像下面。

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

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

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

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

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

同样，对于上一个箭头：$('.slick-prev').show();或$('.slick-prev').hide();

继承人小提琴：https://jsfiddle.net/pjfw1wqz/

来源

2016-02-14 00:10:54 pratikpawar

谢谢！我添加了“无限：假”的设置，但箭头仍然可见，我以为我误解了这个设置。这是星期五和非常漫长的一周结束 - 我脑子死了！现在我更仔细地看它，即使该按钮设置为显示，它也会被禁用。我可以定位残疾人班来隐藏按钮。用户仍然可以访问导航点，并可以根据需要重新开始。也谢谢你帮助我理解如何使用afterChange。这是我认为我需要的，如果有必要，我可以做更多。 – heytricia

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

来源

2016-11-28 18:51:21 Omar

油滑滑块 -

回答

相关问题