如何在手机中停止引导轮播自动滑动答案

【问题标题】：How to stop bootstrap carousel automatic slide in mobile如何在手机中停止引导轮播自动滑动
【发布时间】：2021-09-02 20:34:25
【问题描述】：

您好，我正在尝试找到一种方法来停止引导轮播自动滑动功能以仅在移动设备中停止。我尝试使用 javascript 自己执行此操作，但我使用的代码似乎不起作用。

var ismobile = window.matchMedia("only screen and (max-width: 760px)");

    if (ismobile.matches) {
        $('.carousel').carousel ({
            interval:false
        });
    }

【问题讨论】：

请不要使用“bootstrap”标签，使用“twitter-bootstrap”，因为它意味着别的东西。
@DanielCheung 这是一场徒劳的战斗； bootstrap 应该被烧毁或重新利用......
@cvrebert 我知道，但我认为我们应该在用户使用“bootstrap”时提醒他们，但不要重新使用它，因为它最终会像“literally”这个词，在字典中被描述为“exaggerated virtual”因为人们用错了。我猜我会在 meta-stackoverflow 中问。

标签： javascript css twitter-bootstrap carousel

【解决方案1】：

if( /Android|webOS|iPhone|iPad|iPod|BlackBerry|IEMobile|Opera Mini/i.test(navigator.userAgent) ) {
 $('.carousel').carousel ({
   interval:false
 });
}

来自here

【讨论】：

【解决方案2】：

我正在使用这个，为我工作：

var isMobile = {
    Android: function() {
        return navigator.userAgent.match(/Android/i);
    },
    BlackBerry: function() {
        return navigator.userAgent.match(/BlackBerry/i);
    },
    iOS: function() {
        return navigator.userAgent.match(/iPhone|iPad|iPod/i);
    },
    Opera: function() {
        return navigator.userAgent.match(/Opera Mini/i);
    },
    Windows: function() {
        return navigator.userAgent.match(/IEMobile/i);
    },
    any: function() {
        return (isMobile.Android() || isMobile.BlackBerry() || isMobile.iOS() || isMobile.Opera() || isMobile.Windows());
    }
};

$('.carousel').carousel ({
    interval: isMobile.any() ? false : 5000
});

来源：http://www.abeautifulsite.net/detecting-mobile-devices-with-javascript/

【讨论】：

试图与另一个设置桌面/笔记本电脑间隔速度的功能一起使用。 $('#myCarousel').carousel({ interval: 3000 }); 但设备脚本不适用于此。如果我删除它，设备脚本也会影响台式机/笔记本电脑。有什么想法吗？
@SteveJoiner 为此打开一个 JSFiddle 以便我们查看。

【解决方案3】：

轻微的更新，因为我也遇到了一些麻烦，上面的代码 sn-p 因为它不太工作。

(function(){

    var isMobile = /Android|webOS|iPhone|iPad|iPod|BlackBerry|IEMobile|Opera Mini/i.test(navigator.userAgent);
    var windowIsThin = window.matchMedia("(max-width:992px)").matches;

    if (isMobile || windowIsThin) {
        //carousel disabled
        $('.carousel').carousel({
            interval: false
        });
    }; 

});

在 chrome、IE、Firefox 和 Opera 中测试。

【讨论】：

【解决方案4】：

我收到一个错误“不是函数”（使用 bootstrap 5 和 webpack）。

所以就这样结束了：

var isMobile = /Android|webOS|iPhone|iPad|iPod|BlackBerry|IEMobile|Opera Mini/i.test(navigator.userAgent);

var windowIsThin = window.matchMedia("(max-width:992px)").matches;

if (isMobile || windowIsThin) {
    $('.carousel').attr("data-bs-interval", "false");
};

（使用上面的答案）

【讨论】：