在光滑的滑块中选择幻灯片时禁用滑动

Question

我正在使用同步滑块

"fullslide" - 一次一张幻灯片

"thumbslide" - 一次 5 张幻灯片，用作全幻灯片的导航

当从 thumbslide 中选择 1 张幻灯片时，我希望它变得活跃 而无需 向左或向中间滑动。有办法实现吗？

代码

$('.slider-for').slick({
    slidesToShow: 1,
    slidesToScroll: 1,
    arrows: false,
    fade: true,
    asNavFor: '.slider-nav',
    accessibility: false
});
$('.slider-nav').slick({
    slidesToShow: 5,
    slidesToScroll: 1,
    asNavFor: '.slider-for',
    dots: false,
    centerMode: false,
    focusOnSelect: true,
    accessibility: false
});

Fiddle

我试过：

$('#sliders').slick({
     accessibility: false
});

来自：Is there a way to disable slick slider from autoscrolling when clicked on navigation slider?

仍然无法正常工作

谢谢

Answer 1

与 github 相同的答案：

首先为导航设置 focusOnSelect: false。

第二个主要不应该有 asNavFor 否则将需要更多事件。

$('.slider-for').slick({
   slidesToShow: 1,
   slidesToScroll: 1,
   arrows: false,
   fade: true
});
$('.slider-nav').slick({
   slidesToShow: 5,
   slidesToScroll: 1,
   asNavFor: '.slider-for',
   dots: false,
   centerMode: false,
   focusOnSelect: false
});

$('.slider-nav .slick-slide').on('click', function (event) {
   $('.slider-for').slick('slickGoTo', $(this).data('slickIndex'));
});

Fiddle

Answer 2

FWIW，我刚刚找到了一种非常简单的禁用滚动的方法 - 只需将 .slick-track 上的 translate3d 设置为：

transform: translate3d(0px, 0px, 0px)!important;

Answer 3

我认为你应该使用 Slick 的可拖动特征并将其变成 false，它对我有用：

$('.slider-for').slick({
slidesToShow: 1,
slidesToScroll: 1,
arrows: false,
fade: true,
asNavFor: '.slider-nav',
accessibility: false,
draggable: false });

在光滑的滑块中选择幻灯片时禁用滑动

Disable sliding when selecting a slide in slick slider

jquery

slider

slick.js