在第一张幻灯片上禁用Prev Control并在最后一张幻灯片上禁用Next控件
使用Slick并寻找一种方法，在用户单击下一个箭头之前禁用和隐藏prev控件。 同样，我想让Next控件在用户到达最后一张幻灯片后被禁用并隐藏。
我想要完成的一个很好的例子就在这里
光滑是否已经为此我忽略了一个属性？ 这是否可以通过添加禁用类使用CSS来实现？
我发现的唯一相似之处就是这个
$('.pages .slider').slick({ autoplay: true, autoplaySpeed: 5000, infinite: false, onAfterChange: function(slide, index) { if(index == 4){ $('.pages .slider').slickPause(); 但它不完全是我想要的。
解
您可以将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元素的相同指南。
在该解决方案中，您应该从配置中获取该function，并且仅使用类似的内容对其进行引用。
// Inside slick config onAfterChange: afterChange // Below somewhere var afterChange = function(slide, index) { //stuff here }
还要检查是否有办法获取滑块的长度并validation它而不是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; }
只需使用infite：false并为类slick-disabled创建一个自定义css。 例如。
JS – jQuery
$('.my-slider').slick({ infinite: false, slidesToShow: 1, slidesToScroll: 1 });
CSS
.slick-disabled { opacity: 0; pointer-events:none; }
如果到达第一个或最后一个项目，有一种简单的方法来设置Prev- / Next-Buttons的样式。 确保无限模式设置为假。 然后设置像这样的按钮：
.slick-arrow[aria-disabled="true"]{ opacity: .5; }
一个非常简单的解决方案：
-
将无限设置为假。 例如
$('.my-slider').slick({ infinite: false }); -
添加以下css
.slick-disabled { display: none; pointer-events:none; }
就是这样。
我直接修改了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 。 似乎工作得很花哨。
另一种方法是在第一张幻灯片上滑动（上一张）或在最后一张幻灯片上滑动（下一张）时滑动到同一张幻灯片。 使用swiper方法swiper.SlideTo（n，n，m）;