slickjs总是显示箭头

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

设定箭头：假，并自行显示箭头

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

并将事件附加到箭头。

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

Answer 2

您只需要在或 prevArrow 和 nextArrow(markup inside) 事件中修改 slick.js 文件，在 init 上检查幻灯片长度，如果为 1，则隐藏箭头。