CODEWITHSUNDEEP
javascriptcsstwitter-bootstrapcarousel
jsg
jsg

Reputation: 1264

How to stop bootstrap carousel automatic slide in mobile

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

Upvotes: 1

Views: 8287

Answers (4)

as5
as5

Reputation: 555

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)

Upvotes: 0

Roy Shoa
Roy Shoa

Reputation: 3195

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.net/detecting-mobile-devices-with-javascript/

Upvotes: 3

user2870826
user2870826

Reputation: 21

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.

Upvotes: 2

Posva
Posva

Reputation: 1112

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

got from here

Upvotes: 4

Related Questions