Question

我正在使用同步滑块

“fullslide” - 一次1张幻灯片

“thumbslide” - 一次5张幻灯片，用作完整滑动的导航

从thumbslide中选择1张幻灯片时，我想让它变为活动，不用向左或向中间滑动。有没有办法实现这个目标？

CODE

$('.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 });

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

3 个答案: