Question

我正在尝试配置slick.js以在任何情况下显示箭头。

$('.slider-for').slick({
  slidesToShow: 1,
  slidesToScroll: 1,
  arrows: false,
  fade: true,
  asNavFor: '.slider-nav'
});
$('.slider-nav').slick({
  slidesToShow: 6,
  infinite: true,
  slidesToScroll: 1,
  asNavFor: '.slider-for',
  arrows: true,
  centerMode: false,
  focusOnSelect: true
});

问题是我的滑块没有足够的幻灯片显示（在我的情况下，6）如果滑块的滑动少于6个，则箭头不会显示。

我知道插件就是这样，但由于其他原因，我需要始终显示箭头。

以前有人不得不处理类似的事情吗？

感谢。

Answer 1

制作箭头：false并显示您自己的箭头

$('.container').slick({
   arrows: false,
});

并将事件附加到箭头。

$('.next-arrow').on('click', function(){
   $('.container').slick('slickNext');
});
$('.prev-arrow').on('click', function(){
   $('.container').slick('slickPrev');
});

Answer 2

你只需要在prevArrow和nextArrow（标记里面）事件中修改slick.js文件，检查init上的幻灯片长度，如果是1，则隐藏箭头。

Answer 3

如果小于幻灯片的默认数量，您可以将slidesToShow设置为0：

$(function() {
  var slides_count;
  slides_count = $('.slides .slide').length <= 5 ? 0 : 5;
  $('.slides').slick({
    slidesToShow: slides_count
  });
  if ($('.slides .slide').length <= 5) {
    return $('.slides .slick-next').addClass('slick-disabled').off('click');
  }
});

$('.slides').on('afterChange', function(slick) {
  if ($('.slides .slide').length <= 5) {
    return $(this).find('.slick-next').addClass('slick-disabled');
  }
});

Answer 4

通过CSS隐藏它，对我有用：

.slick-prev.slick-arrow.slick-disabled,
.slick-next.slick-arrow.slick-disabled {
    display: none !important; 
}

slickjs总是显示箭头

4 个答案: