1

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
        });
    }
Daniel Cheung
  • 4,258
  • 1
  • 25
  • 54
jsg
  • 1,208
  • 5
  • 20
  • 42
  • 2
    please do not use "bootstrap" tag, use "twitter-bootstrap" as it means something else. – Daniel Cheung Oct 15 '14 at 10:50
  • @DanielCheung It's a futile battle; `bootstrap` should be burniated or repurposed... – cvrebert Oct 15 '14 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 Oct 16 '14 at 10:43

3 Answers3

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

got from here

Community
  • 1
  • 1
Posva
  • 903
  • 6
  • 15
3

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/

Roy Shoa
  • 2,677
  • 1
  • 31
  • 39
  • Trying to use this along side another function that sets the interval speed on desktop/laptop which is. `$('#myCarousel').carousel({ interval: 3000 });` But the device script doesn't work with this. If I remove it the device script effects desktop/laptop as well. Any ideas? – Steve Joiner Jul 21 '16 at 10:15
  • @SteveJoiner Open a JSFiddle for this so we can see. – Roy Shoa Jul 21 '16 at 10:28
2

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.

user2870826
  • 21
  • 3