如何修復 slider 中的自動播放？

Question

我的 bxSlider 有問題。 我將它初始化為 1050px 寬度，並為其添加了自動模式模式，它一直工作到手機分辨率並返回給定的 1050px，但是當我將其調整回桌面視圖時，slider 無法正常工作並且不可觸摸不再，但是自動模式會不斷切換幻燈片並超出給定的容器，從而破壞布局。 幫助。

SCSS 文件中沒有任何內容。 在 HTML 中只是一個裝有 4 件物品的容器。 這是 jQuery function。

$(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 上再次破壞 slider .... 你也可以在沒有 autoMode 變量的情況下這樣做。 該文檔還提供了 startAuto function。

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 像素時運行 slider 代碼：

$(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,
      }); 
    }
  });
});