如何在移动设备中停止引导程序转盘自动滑动

How to stop bootstrap carousel automatic slide in mobile

本文关键字：引导程序 移动      更新时间：2023-09-26

嗨，我正试图找到一种方法来停止bootstraps转盘自动滑动功能，使其仅在移动设备中停止。我试着用javascript实现这一点，但我使用的代码似乎不起作用。

var ismobile = window.matchMedia("only screen and (max-width: 760px)");
    if (ismobile.matches) {
        $('.carousel').carousel ({
            interval:false
        });
    }

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

从这里得到

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

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/

轻微的更新，因为我也遇到了一些小麻烦——上面的代码片段并没有完全起作用。

(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中进行了测试。

我收到一个错误"不是函数"（使用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");
};

（使用上面的答案）

相关文章：