Slick.js：光滑的滑块没有正确拖动（快速回到第一张幻灯片）

Question

问题

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

我仍然可以用鼠标物理拖动滑块并按原样进行动画处理，但是当我松开滑块时，它只会弹回第一张幻灯片，而不会让我通过拖动从第一张幻灯片向后或向前导航

使用上一个和下一个箭头可以完美地工作，使用键盘上的箭头键也是如此，这让我更加困惑为什么拖动不起作用。

我需要的

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

**当我滑动滑块时，滑块在移动设备上也以相同的方式损坏。

我的代码

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

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

HTML

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

• 有多个滑块__项目，但它们是在帖子的 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”是它始终快速返回到的第一张幻灯片。蓝色方块是临时上一个和下一个按钮

我希望这是足够的信息，但如果您需要其他任何信息，请发表评论，提前致谢！

Answer 1

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

从文档：

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

默认值为 5。我将其更改为 100 并再次拖动幻灯片：

touchThreshold:100

Answer 2

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

今天经历了同样的要求，也许这会对未来的搜索者有所帮助。