Question

我有一个光滑的滑块，仅限于4张幻灯片，并且设置了此滑块，因此它们始终在网格中可见。我正在使用focusOnSelect使其中一张幻灯片处于活动状态，您可以单击另三个幻灯片使其处于活动状态。

然后，此滑块与另一个面板同步，在每个面板上均显示文本。使用该设置，一切正常。

但是，我还需要导航（上一个/下一个）作为导航（上一个/下一个）的箭头（在这种情况下为自定义文本），但是在屏幕上显示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>

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

$('.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个同步的滑块一起使用。

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

1 个答案: