How to stop carousel auto-slide in mobile devices only?

Question

I'm trying to stop my carousel to auto slide for mobile devices only. I tried to change the data-interval thru js but it's not working for some reason. Any idea how to do it? Here is my html code for the carousel:

<div id="x-corp-carousel" class="carousel slide hero-slide hidden-xs" data-ride="carousel"> 
        <!-- Indicators -->
        <ol class="carousel-indicators">
          <li data-target="#x-corp-carousel" data-slide-to="0" class="active"></li>
          <li data-target="#x-corp-carousel" data-slide-to="1"></li>
          <li data-target="#x-corp-carousel" data-slide-to="2"></li>
          <li data-target="#x-corp-carousel" data-slide-to="3"></li>
          <li data-target="#x-corp-carousel" data-slide-to="4"></li>
        </ol>

        <!-- Wrapper for slides -->
        <div class="carousel-inner index-only" role="listbox">
          <div class="item active"> <img src="img/hero-slide-2.jpg" alt="..."> 
            <!-- <div class="carousel-caption">
              <h1>Revitalize Your Body and Mind Strengthen Immunity and Recover Faster </h1>
            </div>--> 
          </div>
          <div class="item"> <img src="img/hero-slide-3.jpg" alt="..."> 
            <!--<div class="carousel-caption">
              <h1> Feel Energized and Focused All Day Boost Performance and Mental Clarity </h1>
            </div>--> 
          </div>
          <div class="item"> <img src="img/hero-slide-nighfall.jpg" alt="..."> 
            <!-- <div class="carousel-caption">
              <h1>Relax with Premium Hemp Extract Fall Asleep Faster and Wake Up Rested </h1>
            </div>--> 
          </div>
          <div class="item"> <img src="img/hero-slide-1-thrive.jpg" alt="..."> 
            <!-- <div class="carousel-caption">
              <h1>Relax with Premium Hemp Extract Fall Asleep Faster and Wake Up Rested </h1>
            </div>--> 
          </div>
          <div class="item"> <img src="img/hero-slide-4d.jpg" alt="..."> 
            <!-- <div class="carousel-caption">
              <h1>Relax with Premium Hemp Extract Fall Asleep Faster and Wake Up Rested </h1>
            </div>--> 
          </div>
        </div>

        <!-- Controls --> 
      </div>
      <!-- #x-corp-carousel-->

Use mediaqueries, setup a css for mobile devices and desktop devices with different cooldowns or how ever you want it. https://www.w3schools.com/cssref/css3_pr_mediaquery.asp — Tomm, Dec 11 '17 at 09:12
Possible duplicate of [How to stop bootstrap carousel automatic slide in mobile](https://stackoverflow.com/questions/26380240/how-to-stop-bootstrap-carousel-automatic-slide-in-mobile) — Mhd Alaa Alhaj, Dec 11 '17 at 09:12
@Mhd Alaa Alhaj I tried that already but it doesn't work for me — Eymiєl Moralєs, Dec 11 '17 at 09:14
@Tomm I use media screens but how I exactly do i change the data interval through CSS? — Eymiєl Moralєs, Dec 11 '17 at 09:15
@EymiєlMoralєs you are completely right i forgot you can not do that using css... my appologies — Tomm, Dec 11 '17 at 09:19
@EymiєlMoralєs you could attempt something like this though.. I have never tried it myself https://www.fourfront.us/blog/jquery-window-width-and-media-queries this checks what media querie is active and fires a script based on that. You could make a function changing data interval using jquery and fire it if your mobile media querie is active — Tomm, Dec 11 '17 at 09:20
http://detectmobilebrowsers.com/ Would this be of any use to you? — Granny, Dec 11 '17 at 09:30

Kresimir Pendic · Accepted Answer · 2017-12-11T22:29:39.470

Try first to remove data-ride="carousel" from html, and then use some custom width that you are happy to disable slider for, something like this: (custom BP var is breakpoint)

// set breakpoint width
var BP = 900;

// start carousel
$('.carousel').carousel({ interval: (window.innerWidth<BP)?false:5000 });

// if user rotates phone orientation | window resite
$(window).on('resize', function(ev){
  if( window.innerWidth < BP ){ 
    $('.carousel').carousel({ interval: false });
  } else {
    $('.carousel').carousel({ interval: 5000 });
  }
})

<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet"/>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>


<div id="x-corp-carousel" class="carousel slide hero-slide hidden-xs"> 
        <!-- Indicators -->
        <ol class="carousel-indicators">
          <li data-target="#x-corp-carousel" data-slide-to="0" class="active"></li>
          <li data-target="#x-corp-carousel" data-slide-to="1"></li>
          <li data-target="#x-corp-carousel" data-slide-to="2"></li>
          <li data-target="#x-corp-carousel" data-slide-to="3"></li>
          <li data-target="#x-corp-carousel" data-slide-to="4"></li>
        </ol>

        <!-- Wrapper for slides -->
        <div class="carousel-inner index-only" role="listbox">
          <div class="item active"> <img src="http://via.placeholder.com/940x480/333" alt="..."> 
            <!-- <div class="carousel-caption">
              <h1>Revitalize Your Body and Mind Strengthen Immunity and Recover Faster </h1>
            </div>--> 
          </div>
          <div class="item"> <img src="http://via.placeholder.com/940x480/333" alt="..."> 
            <!--<div class="carousel-caption">
              <h1> Feel Energized and Focused All Day Boost Performance and Mental Clarity </h1>
            </div>--> 
          </div>
          <div class="item"> <img src="http://via.placeholder.com/940x480/333" alt="..."> 
            <!-- <div class="carousel-caption">
              <h1>Relax with Premium Hemp Extract Fall Asleep Faster and Wake Up Rested </h1>
            </div>--> 
          </div>
          <div class="item"> <img src="http://via.placeholder.com/940x480/333" alt="..."> 
            <!-- <div class="carousel-caption">
              <h1>Relax with Premium Hemp Extract Fall Asleep Faster and Wake Up Rested </h1>
            </div>--> 
          </div>
          <div class="item"> <img src="http://via.placeholder.com/940x480/333" alt="..."> 
            <!-- <div class="carousel-caption">
              <h1>Relax with Premium Hemp Extract Fall Asleep Faster and Wake Up Rested </h1>
            </div>--> 
          </div>
        </div>

        <!-- Controls --> 
      </div>
      <!-- #x-corp-carousel-->

How to stop carousel auto-slide in mobile devices only?

1 Answers1