Slick.js：光滑的滑块无法正确拖动（跳回到第一张幻灯片）

Question

问题

我正在Wordpress网站上设置光滑的滑块/轮播。一切正常/显示正常，但是滑块已停止正确拖动。

我仍然可以用鼠标物理拖动滑块，并且它会按照需要设置动画效果，但是当我放开滑块时，它只是捕捉回到第一张幻灯片，从不通过拖动从第一张幻灯片向后或向前导航

使用上一个和下一个箭头非常有效，使用键盘上的箭头键也是如此，这让我更加困惑为什么拖动不起作用。

我需要的

修复了拖动不起作用的问题，以便我可以正确浏览滑块。

**当我在滑块上滑动时，该滑块在手机上的损坏方式也相同。

我的代码

目前无法将您链接到滑块，因为它位于私人站点上，但是我会尝试将我认为相关的所有代码放在下面：

（我仅从下载中使用slick.min.js文件和slick.css文件）

HTML

<div class="slider">
    <div class="slider__item">
        <a href="">
        </a>
    </div>
</div>

• 有多个slider__item，但是它们是在帖子的WP循环中创建的，所以我只包括了一个
• 将内容保留在幻灯片中，以使这篇文章不会太长，但是可以想象<p>和<div>标签中的文本/标题/图像等...

JS

$('.slider').slick({
    infinite: true,
    slidesToScroll: 1,
    variableWidth: true,
    dots: false,
    arrows: true,
    focusOnSelect: false,
    prevArrow: $('.home-posts__arrow__prev'),
    nextArrow: $('.home-posts__arrow__next'),
});

CSS

.slider {
    position: absolute;
    left: calc(33.333333% + 30px);
}

.slider__item {
    max-width: 290px;
    margin: 0px 15px;
}

参考图片

滑块位于内容的右侧，“ Test post 4”是它始终可以捕捉到的第一张幻灯片。蓝色方块是temp prev和next按钮

我希望能提供足够的信息，但是如果您还有其他需要，请发表评论，谢谢！

Answer 1

您是否尝试过添加swipeToSlide选项并将其设置为true？

今天遇到了同样的要求，也许这将对将来的搜索者有所帮助。

Answer 2

这是一个古老的问题，但是我有同样的问题。使用“滑动”滑块拖动幻灯片不起作用，幻灯片会捕捉回到第一张幻灯片。对我来说，解决方法是将touchThreshold设置为更高的数字。

从文档中：

  

touchThreshold：要前进幻灯片，用户必须滑动（1 / touchThreshold）*滑块宽度的长度。   https://github.com/kenwheeler/slick/#settings

默认值为5。我将其更改为100，然后拖动幻灯片再次起作用：

touchThreshold:100

Answer 3

尝试注释掉或删除该行：

//max = _.slideCount * 2;