Hi I'm trying to find a way to stop bootstraps carousel automatic slide function to stop only in mobile. I tried to carry this out myself using javascript, but the code I've used doesn't seem to work.

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

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

Hi I'm trying to find a way to stop bootstraps carousel automatic slide function to stop only in mobile. I tried to carry this out myself using javascript, but the code I've used doesn't seem to work.

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

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

• javascript
• css
• twitter-bootstrap
• carousel

• 2 please do not use "bootstrap" tag, use "twitter-bootstrap" as it means something else. – Daniel Cheung Commented Oct 15, 2014 at 10:50
• @DanielCheung It's a futile battle; bootstrap should be burniated or repurposed... – cvrebert Commented Oct 15, 2014 at 18:18
• @cvrebert I know, but I think we should alert users when they use "bootstrap" but not repurpose it because it would end up like the word "literally", described as "exaggerated virtually" in dictionaries because people used it wrong. I'll ask in meta-stackoverflow I guess. – Daniel Cheung Commented Oct 16, 2014 at 10:43

4 Answers 4

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

got from here

I am using this one, working grate for me:

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

Source: http://www.abeautifulsite/detecting-mobile-devices-with-javascript/

Slight update as I too was having a little trouble with this the code snippet above taken as it is didn't quite work.

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

});

Tested in chrome, IE, Firefox and Opera.

I got an error 'is not a function' (using bootstrap 5 and webpack).

So just end up with:

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");
};

(using the answers from above)