使用 Slick 并寻找一种方法来禁用和隐藏 prev 控件，直到用户单击下一个箭头。同样，一旦用户到达最后一张幻灯片，我希望 Next 控件被禁用和隐藏。
很好地说明了我要完成的工作slick 是否已经有一个我忽略的属性？这是否可以通过添加禁用类使用 CSS 来完成？
我发现的唯一类似的就是这个
$('.pages .slider').slick({
autoplay: true,
autoplaySpeed: 5000,
infinite: false,
onAfterChange: function(slide, index) {
if(index == 4){
$('.pages .slider').slickPause();
但这并不是我想要的。
【问题讨论】：
标签： javascript jquery slick.js
只需使用 infite: false 并为 slick-disabled 类创建自定义 css。例如。
JS - jQuery
$('.my-slider').slick({
infinite: false,
slidesToShow: 1,
slidesToScroll: 1
});
CSS
.slick-disabled {
opacity: 0;
pointer-events:none;
}
【讨论】：
您可以将 css pointer-events: none 添加到您的按钮。该 css 属性禁用元素上的所有事件。就这样吧。
// Slick stuff
...
onAfterChange: function(slide, index) {
if(index === 4) {
$('.slick-next').css('pointer-events', 'none')
}
else {
$('.slick-next').css('pointer-events', 'all')
}
}
对于 .slick-prev 元素的指导方针相同。
在该解决方案中，您应该从配置中获取 函数，并且只使用类似这样的内容对其进行引用。
// Inside slick config
onAfterChange: afterChange
// Below somewhere
var afterChange = function(slide, index) { //stuff here }
还要检查是否有办法获取滑块的长度并验证它，而不是在if 语句中硬编码4。你可能可以做类似$('.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，如果你想做动画，你应该在这里做。
.slick-prev.hidden,
.slick-next.hidden {
opacity: 0;
pointer-events:none;
}
【讨论】：
一个非常简单的解决方案是：
将无限设置为假。例如
$('.my-slider').slick({
infinite: false });
添加以下css
.slick-disabled {
display: none;
pointer-events:none;
}
就是这样。
【讨论】：
如果到达第一个或最后一个项目，有一种简单的方法来设置 Prev-/Next-Buttons 的样式。确保无限模式设置为 false。然后像这样设置按钮的样式：
.slick-arrow[aria-disabled="true"]{
opacity: .5;
}这就是你所需要的！
【讨论】：
添加 CSS 代码：
.slick-disabled {
display: none !important;
}
【讨论】：
我直接修改了 slick.js 的行为，像这样：
// making the prevArrow not show on init:
if (_.options.infinite !== true) {
_.$prevArrow
.addClass('slick-disabled')
.attr('aria-disabled', 'true')
.css('display', 'none'); // The new line of code!
}
还有：
if (_.options.arrows === true &&
_.slideCount > _.options.slidesToShow &&
!_.options.infinite
) {
_.$prevArrow.removeClass('slick-disabled').attr('aria-disabled', 'false').css('display', '');
_.$nextArrow.removeClass('slick-disabled').attr('aria-disabled', 'false').css('display', '');
if (_.currentSlide === 0) {
_.$prevArrow.addClass('slick-disabled').attr('aria-disabled', 'true').css('display', 'none');
_.$nextArrow.removeClass('slick-disabled').attr('aria-disabled', 'false').css('display', '');
} else if (_.currentSlide >= _.slideCount - _.options.slidesToShow && _.options.centerMode === false) {
_.$nextArrow.addClass('slick-disabled').attr('aria-disabled', 'true').css('display', 'none');
_.$prevArrow.removeClass('slick-disabled').attr('aria-disabled', 'false').css('display', '');
} else if (_.currentSlide >= _.slideCount - 1 && _.options.centerMode === true) {
_.$nextArrow.addClass('slick-disabled').attr('aria-disabled', 'true').css('display', 'none');
_.$prevArrow.removeClass('slick-disabled').attr('aria-disabled', 'false').css('display', '');
}
}
只需使用jquery .css() 方法并设置display 即可。似乎工作得相当花哨。
【讨论】：
Slick Slider Settings 中非常简单的解决方案
$('.my-slider').slick({
infinite: false
});
以上设置将禁用 PREV 和 NEXT 箭头。但是要隐藏禁用的箭头，您需要在 CSS 下方：
.slick-disabled {
display: none !important;
}
【讨论】：
另一种方法是在第一张幻灯片上滑动（上一张）或在最后一张幻灯片上滑动（下一张）时滑动到同一张幻灯片。使用 swiper 方法 swiper.SlideTo(n,n,m);
【讨论】：
伙计们，
放
arrows: false,
在设置 JSON 配置中。 这么简单！！
【讨论】：