如何修复 slider 中的自动播放？

Question

I have a problem with my bxSlider. I initialize it at 1050px width, and also add auto-mode mode to it, and it works until the phone resolution and back to given 1050px, but when I resize it back to desktop view, slider is not working as it suppose and not touchable anymore, but auto-mode keep switching slides and goes beyond given container and by that crushes the layout. Help.

Nothing in the SCSS file. In HTML just a container with 4 items in it. Here is the 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

Why are you destroying the slider again on >1050.... You could also do it without the autoMode variable. The documentation also provides a 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

you can try to only run the slider code when the screen is below 1050px:

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