光滑滑块 - 自定义箭头 - 删除光滑隐藏和重新启用功能

Question

我有一个光滑的滑块，限制为4个幻灯片并具有此设置，因此这些在网格中始终可见。我正在使用focusOnSelect让其中一张幻灯片处于活动状态，您可以点击其他3张以激活它。

然后，此滑块与另一个面板同步，其中每个幻灯片都显示文本。所有设置都正常。

但是，我还需要箭头（或本例中的自定义文本）作为导航（上一个/下一个），也可以在幻灯片中循环，但是当屏幕上显示4个幻灯片时 - 总共有4个幻灯片 - 箭头有默认情况下，一类“光滑隐藏”，即使我强制它们用CSS显示，它们仍然被剥夺了功能，什么都不做。

有没有办法强制它们可见并保持下一个/以前的功能？它只是与类或其他功能阻止它们工作？

这是我的设置：

$('.slick-whoweare').slick({
    arrows: true,
    dots: false,
    centerMode: true,
    autoplay: false,
    infinite: false,
    slidesToShow: 4,
    slidesToScroll: 1,
    speed: 500,
    variableWidth: false,
    focusOnSelect: true,
    nextArrow: '.wwanext',
    prevArrow: '.wwaprev',
    asNavFor: '.slider-wwanav'
  });

在前端源中，它的输出如下（箭头被识别，只是禁用）：

<div class="wwa-nav">
    <div class="wwaprev slick-arrow slick-hidden" tabindex="-1" aria-disabled="false">Previous</div>
    <div class="wwanext slick-arrow slick-hidden" tabindex="-1" aria-disabled="false">Next</div>
</div>

经过研究，我还发现了另一种设置'箭头：假'的方法，然后使用我自己的代码，但这也不起作用：

$('.wwaprev').click(function(){
   $('.slick-whoweare').slick('slickPrev');
})

$('.wwanext').click(function(){
   $('.slick-whoweare').slick('slickNext');
})

任何帮助/指导将不胜感激。

Answer 1

我自己设法解决了这个问题。

我将箭头添加到第二个同步滑块上，而不是主滑块：

$('.slider-nav').slick({
    arrows: true,
    dots: false,
    infinite: false,
    slidesToShow: 1,
    slidesToScroll: 1,
    dots: false,
    fade: true,
    swipe: true,
    asNavFor: '.slick-whoweare',
    nextArrow: '.wwanext',
    prevArrow: '.wwaprev'
  });

那么主滑块的设置就像标准一样：

$('.slick-whoweare').slick({
    arrows: true,
    dots: false,
    centerMode: true,
    centerPadding: 0,
    autoplay: false,
    infinite: false,
    slidesToShow: 4,
    slidesToScroll: 1,
    speed: 500,
    variableWidth: false,
    focusOnSelect: true,
    asNavFor: '.slider-nav'
});

然而，这会混淆主滑块，因为它现在表现为变换动画（向右滑动，当没有更多幻灯片时） - 它没有没有这些新设置。正如我希望它们在网格中固定到位一样，我只是添加了一些CSS以防止它在光滑列表上并强制它不移动：

.slick-whoweare .slick-track, .slick-whowearer .slick-list {
  -webkit-transform: translate3d(0, 0, 0) !important;
  -o-transform: translate3d(0, 0, 0) !important;
  transform: translate3d(0, 0, 0) !important;
}

它奏效了。现在有自定义箭头使用2个同步滑块。