时间戳

首页 > 解决方案 > 如何修复滑块中的自动播放？

javascript - 如何修复滑块中的自动播放？

问题描述

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

标签： javascriptjqueryhtmlsassslider

解决方案

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

推荐阅读