光滑的 js 总是显示箭头

Posted 2023-02-23

【中文标题】光滑的 js 总是显示箭头

【英文标题】：slickjs always show arrows

【发布时间】：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()

【参考方案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 则隐藏箭头。