Question

我的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;
        }
    });
});

Answer 1

为什么要在> 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();
    }
});

Answer 2

您可以尝试仅在屏幕低于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 个答案: