油滑滑块 -
我使用slick.js供电的滑块从不同的幻灯片视图中除去箭头。我想在第一张幻灯片处于活动状态时移除“上一个”箭头,在上一张幻灯片处于活动状态时移除“下一个”箭头。当最后一张幻灯片处于活动状态时,我可能需要删除两个箭头。是否有一个可以做到这一点的流畅的事件函数或jquery函数?油滑滑块 -
要禁用之前的箭头,第一张幻灯片和下一个箭头在最后一张幻灯片,你可以在光滑的初始化定义infinite : false,
像下面。
$("#slider").slick({
infinite : false
});
如果您有其他设置,只需在初始化中加入。 slider
是容器的ID。
这是为了在滑块禁用箭头。要删除箭头,您可以在第一张/最后一张幻灯片处于活动状态时隐藏它。浏览文档,了解如何获得滑块上的活动幻灯片,并使用jquery隐藏您可以按箭头按钮的类名称隐藏箭头。您可以通过检查元素来获取箭头按钮的类/标识。右键点击箭头并检查它。
要获取当前幻灯片:$('#slider').slick('slickCurrentSlide');
隐藏或显示一个箭头:$('.slick-next').show();
或$('.slick-next').hide();
同样,对于上一个箭头:$('.slick-prev').show();
或$('.slick-prev').hide();
谢谢!我添加了“无限:假”的设置,但箭头仍然可见,我以为我误解了这个设置。这是星期五和非常漫长的一周结束 - 我脑子死了!现在我更仔细地看它,即使该按钮设置为显示,它也会被禁用。我可以定位残疾人班来隐藏按钮。用户仍然可以访问导航点,并可以根据需要重新开始。 也谢谢你帮助我理解如何使用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();
}
}
};
为什么哟你想删除最后幻灯片上的箭头?你还提到你想删除最后一张幻灯片上的下一个箭头。上一张和最后一张幻灯片是什么意思?他们是同一个权利? – pratikpawar
是的,它们是一样的。所以如果我在最后一张幻灯片上,我不希望下一个箭头出现 - 因为没有下一张幻灯片,我不想重新开始。 – heytricia