光滑的 js 总是显示箭头答案

【问题标题】：slickjs always show arrows光滑的 js 总是显示箭头
【发布时间】：2016-06-22 11:11:15
【问题描述】：

我正在尝试配置 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 张幻灯片，则不会显示箭头。

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

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

谢谢。

【问题讨论】：

你能发个小提琴吗？
只需创建自己的箭头 ;) 在$('.slider-nav') 的光滑设置上设置arrows: false 然后使用按钮/链接。在按钮/链接的 onclick 处理程序上，使用 .slickNext() 和 .slickPrev()

标签： javascript jquery slider slick.js

【解决方案1】：

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

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

并将事件附加到箭头。

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

【讨论】：

请注意，光滑的方法语法已经改变，所以现在$('.container').slickNext(); 需要是$('.container').slick('slickNext');
@Addison 感谢您的信息。更新了答案。

【解决方案2】：

用 CSS 隐藏它，对我有用：

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

【讨论】：

【解决方案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');
  }
});

【讨论】：

如果 slidesToShow 设置为 0，它会陷入无限循环，从而创建幻灯片的无限副本（无论 infinite 的值如何）。
@Gabriel 在我写这个答案的那一刻，没有无限循环。

【解决方案4】：

你只需要在 prevArrow 和 nextArrow(markup inside) 事件中修改 slick.js 文件，在初始化时检查幻灯片长度，如果是 1 则隐藏箭头。

【讨论】：