如何修复滑块中的自动播放？答案

【问题标题】：How to fix autoplay in slider?如何修复滑块中的自动播放？
【发布时间】：2020-03-10 06:42:27
【问题描述】：

我的 bxSlider 有问题。我将其初始化为 1050px 宽度，并为其添加了自动模式模式，它一直工作到手机分辨率恢复到给定的 1050px，但是当我将其调整回桌面视图时，滑块无法正常工作并且不可触摸不再，但是自动模式会不断切换幻灯片并超出给定的容器，从而破坏布局。帮助。

SCSS 文件中没有任何内容。在 HTML 中只是一个包含 4 个项目的容器。这是jQuery函数。

$(function () {
    var autoMode = false;

    var slider = $('.list-product').bxSlider({
        maxSlides: 4,
        moveSlides: 1,
        responsive: true,
        slideWidth: 236,
        speed: 900,
        pause: 1700,
        auto: autoMode,
        pager: false,
        infiniteLoop: true,
        touchEnabled: true,
    });

    if ($(window).width() > 1050) {
        slider.destroySlider();
    }

    $(window).resize(function () {
        if ($(window).width() < 1050) {
            slider.reloadSlider();
            autoMode = true;
        } else {
            slider.destroySlider();
            autoMode = false;
        }
    });
});

【问题讨论】：

如果从移动设备更改为桌面大小时重新加载页面，那么它是否正常工作？
是的，重新加载页面滑块后工作正常，当然在 1050px 和 0px 之间，当我转到桌面 (>1050px) 时，我正在破坏滑块，它不再工作了，但不知何故继续自动播放并切换幻灯片，即使我理解的方式未初始化。 bxSlider() 有点疯狂，但我真的需要找到解决方案，看起来像一个错误
所以基本上，你只希望它是一个低于 1050px 的滑块，而滑块代码甚至不应该存在？
是的，我想要那个，正如你所看到的，我使用了一个真正破坏滑块的内置函数，但不知何故自动播放仍在继续......
window.matchMedia("(max-width: 1050px)")

标签： javascript jquery html sass slider

【解决方案1】：

您可以尝试仅在屏幕低于 1050 像素时运行滑块代码：

$(function(){
  $(window).resize(function(){
    if ($(window).width() < 1050) {
      var autoMode = false;

      var slider = $('.list-product').bxSlider({
        maxSlides: 4,
        moveSlides: 1,
        responsive: true,
        slideWidth: 236,
        speed: 900,
        pause: 1700,
        auto: autoMode,
        pager: false,
        infiniteLoop: true,
        touchEnabled: true,
      }); 
    }
  });
});

【讨论】：

即使我将大小重新调整回桌面，它也应该被销毁，只有刷新有帮助

【解决方案2】：

你为什么要在 >1050 上再次破坏滑块 .... 您也可以在没有 autoMode 变量的情况下执行此操作。该文档还提供了一个 startAuto 函数。

var slider = $('.list-product').bxSlider({
    maxSlides: 4,
    moveSlides: 1,
    responsive: true,
    slideWidth: 236,
    speed: 900,
    pause: 1700,
    pager: false,
    infiniteLoop: true,
    touchEnabled: true,
}); 

if ($(window).width() < 1050) {
    slider.startAuto();
}

$(window).resize(function(){
    if ($(window).width() < 1050) {
        slider.startAuto();
    } else {
        slider.stopAuto();
    }
});

【讨论】：

我试过了，自动模式甚至没有出现在