javascript - Slick.js:Slick slider 无法正确拖动(弹回到第一张幻灯片)

Question

问题

我正在 WordPress 网站上设置一个灵活的 slider /轮播。一切工作/显示都很完美，但是 slider 已停止正确拖动。

我仍然可以用鼠标物理拖动 slider ，它会按应有的方式进行动画处理，但是当我放开 slider 时，它只会弹回到第一张幻灯片，并且永远不会让我通过拖动从第一张幻灯片向后或向前导航

使用上一个和下一个箭头效果很好，使用键盘上的箭头键也可以，这让我更加困惑为什么拖动不起作用。

我需要什么

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

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

我的代码

我无法将您链接到 slider ，因为它目前位于私有(private)网站上，但我会尝试将我认为相关的所有代码放在下面:

(我仅使用下载的 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;
}

引用图片

slider 位于内容的右侧，“测试帖子 4”是它始终弹回的第一张幻灯片。蓝色方 block 是临时上一个和下一个按钮

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

Answer 1

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

来自文档:

touchThreshold: To advance slides, the user must swipe a length of (1/touchThreshold) * the width of the slider. https://github.com/kenwheeler/slick/#settings

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

touchThreshold:100