问题描述
使用Slick并寻找一种方法,在用户单击下一个箭头之前禁用并隐藏prev控件。同样,我想让Next控件在用户到达最后一张幻灯片后被禁用并隐藏。
using Slick and looking for a way to have the prev control disabled and hidden until the user clicks the next arrow. Similarly I want the Next control to become disabled and hidden once the user reaches the last slide.
我想要完成的一个很好的例证是
A good illustration of what I'm trying to accomplish is here
光滑是否已经为此忽略了属性?这是否可以通过添加禁用类使用CSS来实现?
Does slick have an attribute already for this that I have overlooked? Is this something that maybe can be accomplished using CSS by adding a disabled class?
我发现的唯一类似的是
$('.pages .slider').slick({
autoplay: true,
autoplaySpeed: 5000,
infinite: false,
onAfterChange: function(slide, index) {
if(index == 4){
$('.pages .slider').slickPause();
但这不是我想要的。
推荐答案
解决方案
您可以将css 指针 - 事件:无
添加到按钮那个css属性禁用了一个元素上的所有事件。就像这样。
Solution
You can add the css pointer-events: none
to your button. That css property disable all event on an element. So something like that.
// Slick stuff
...
onAfterChange: function(slide, index) {
if(index === 4) {
$('.slick-next').css('pointer-events', 'none')
}
else {
$('.slick-next').css('pointer-events', 'all')
}
}
以及 .slick-prev
元素的相同指南中的内容。
And something on the same guideline for .slick-prev
element.
在该解决方案中,您应该获得功能超出配置,只用这样的东西引用它。
In that solution you should get the function out of the config and only put a reference to it with something like this.
// Inside slick config
onAfterChange: afterChange
// Below somewhere
var afterChange = function(slide, index) { //stuff here }
还要检查是否有办法获取滑块的长度并验证它而不是硬编码 4
中的code> if 语句。您可以执行类似 $('。slide')的操作。长度
Also check to see if there is a way to get the length of the slider and verify it instead of hardcoding 4
in the if
statement. You can probably do something like $('.slide').length
以下是如何实现 afterChange()
函数。
$(document).ready(function(){
$('.scrollable').slick({
dots: false,
slidesToShow: 1,
slidesToScroll: 3,
swipeToSlide: true,
swipe: true,
arrows: true,
infinite: false,
});
$('.scrollable').on('afterChange', function (event, slick, currentSlide) {
if(currentSlide === 2) {
$('.slick-next').addClass('hidden');
}
else {
$('.slick-next').removeClass('hidden');
}
if(currentSlide === 0) {
$('.slick-prev').addClass('hidden');
}
else {
$('.slick-prev').removeClass('hidden');
}
})
});
还有一些CSS,如果你想做动画,你应该在这里做。
And some CSS, If you wanna do animation you should do it here.
.slick-prev.hidden,
.slick-next.hidden {
opacity: 0;
pointer-events:none;
}
这篇关于在第一张幻灯片上禁用Prev Control并在最后一张幻灯片上禁用Next控件的文章就介绍到这了,希望我们推荐的答案对大家有所帮助,也希望大家多多支持!