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

Posted 2023-05-07

【中文标题】Slick.js：滑动滑块未正确拖动（快速回到第一张幻灯片）

【英文标题】：Slick.js: Slick slider not dragging properly (snapping back to first slide)

【发布时间】：2019-01-29 18:13:28

【问题描述】：

问题

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

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

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

我需要什么

修复了拖动无法正常工作的问题，以便我可以正确浏览滑块。

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

我的代码

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

（我使用的 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 按钮

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

【参考方案1】：

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

来自文档：

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

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

touchThreshold:100

【参考方案2】：

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

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

【参考方案3】：

尝试注释掉或删除该行：

//max = _.slideCount * 2;