Question

使用Slick并寻找一种方法，在用户单击下一个箭头之前禁用和隐藏prev控件。同样，我想让Next控件在用户到达最后一张幻灯片后被禁用并隐藏。

我想要完成的事情的一个很好的例证是here

光滑是否有一个我已经忽略的属性？这是否可以通过添加禁用类使用CSS来实现？

我发现的唯一类似的是

$('.pages .slider').slick({
    autoplay: true,
    autoplaySpeed: 5000,
    infinite: false,
    onAfterChange: function(slide, index) {
        if(index == 4){
        $('.pages .slider').slickPause();

但它并不完全是我想要的。

Answer 1

只需使用infite：false并为类slick-disabled创建自定义css。例如

JS - jQuery

$('.my-slider').slick({
    infinite: false,
    slidesToShow: 1,
    slidesToScroll: 1
});

<强> CSS

.slick-disabled {
    opacity: 0;
    pointer-events:none;
}

Answer 2

解决方案

您可以将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 }

同时检查是否有办法获取滑块的长度并验证它，而不是4语句中的if硬编码。您可以执行$('.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; }

Answer 3

添加CSS代码：

.slick-disabled {
    display: none !important;
}

Answer 4

如果到达第一个或最后一个项目，有一种简单的方法来设置Prev- / Next-Buttons的样式。确保无限模式设置为假。然后设置像这样的按钮：

var app = angular.module('exApp',[]);
app.controller('ctrl', function($scope){
var values = [{"brand":"Audi","model":"A1"}, 
{"brand":"Audi","model":"A2"}, 
{"brand":"Audi","model":"A3"}, 
{"brand":"BMW","model":"3 Series"}, 
{"brand":"BMW","model":"5 Series"}];

var datass = {};
for (var i = 0; i < values.length; i++) {
  var brandName = values[i].brand;
  if (!datass[brandName]) {
    datass[brandName] = [];
  }
  datass[brandName].push(values[i].model);
}
var mynewArray = [];
for (var brandName in datass) {
  mynewArray.push({brand: brandName, model: datass[brandName]});
}
$scope.newData = mynewArray;

//console.log(mynewArray);

// --or--
var group_to_values = values.reduce(function(obj,item){
    obj[item.brand] = obj[item.brand] || [];
    obj[item.brand].push(item.model);
    return obj;
}, {});

var groups = Object.keys(group_to_values).map(function(key){
    return {brand: key, model: group_to_values[key]};
});
//$scope.newData = groups;
//console.log(group_to_values);
//console.log(groups);

});

这就是你所需要的一切！

Answer 5

一个非常简单的解决方案是：

将无限设置为false。例如

$('.my-slider').slick({
 infinite: false });

添加以下css

.slick-disabled { display: none; pointer-events:none; }

就是这样。

Answer 6

我直接修改了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即可。似乎很蠢。

Answer 7

另一种方法是在第一张幻灯片上滑动（上一张）或在最后一张幻灯片上滑动（下一张）时滑动到同一张幻灯片。使用swiper方法swiper.SlideTo（n，n，m）;

Answer 8

伙计，

放入

 arrows: false,

设置JSON配置。很简单！

Answer 9

光滑滑块设置中的非常简单的解决方案

$('.my-slider').slick({
     infinite: false 
});

以上设置将禁用PREV和NEXT箭头。但是要隐藏禁用的箭头，您需要在CSS下面：

.slick-disabled {
    display: none !important;
}

在第一张幻灯片上禁用Prev Control并在最后一张幻灯片上禁用Next控件

9 个答案:

解决方案

修改