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-->
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-->
The technical post webpages of this site follow the CC BY-SA 4.0 protocol. If you need to reprint, please indicate the site URL or the original address.Any question please contact:yoyou2525@163.com.