javascript - Slick.js：滑动滑块未正确拖动（快速回到第一张幻灯片）

问题描述

问题

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

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

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

我需要的

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

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

我的代码

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

（我只使用来自下载的 slick.min.js 文件和 slick.css 文件）

HTML

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

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

$('.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 按钮

我希望这是足够的信息，但如果您需要其他任何内容，请发表评论，在此先感谢！

标签： javascriptjquerysliderslick.js

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

从文档：

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

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

touchThreshold:100

javascript - Slick.js：滑动滑块未正确拖动（快速回到第一张幻灯片）

问题描述

解决方案

推荐阅读