Come cambiare l'intervallo di un carosello di bootstrap una volta che è stata inizializzata

Question

Secondo il doco, utilizzando la seguente imposterà la velocità del ciclo giostra:

$('.carousel').carousel({ 
    interval: 2000 
}) 

Tuttavia se è già stato inizializzato il carosello, chiamando il sopra con un intervallo diverso non ha alcun effetto.

Devo notare che l'inizializzazione del carosello tramite JS non imposta data-interval sul carosello. Ho anche cercato un po 'su questo argomento, ma i risultati riguardano le persone che cercano di impostare a una velocità fissa. Voglio cambiare la velocità una volta che è già stato inizializzato.

Il codice è il seguente:

$(function() { 
 
    $('#homeCarousel').carousel({ 
 
     interval:2000, 
 
     pause: "false" 
 
    }); 
 
    $('#slowButton').click(function() { 
 
     $('#homeCarousel').carousel({interval: 10000}); 
 
    }); 
 
    $('#fastButton').click(function() { 
 
     $('#homeCarousel').carousel({interval: 1000}); 
 
    }); 
 
});

#carouselButtons { 
 
    margin-left: 100px; 
 
    position: absolute; 
 
    bottom: 0px; 
 
} 
 

 
.item { 
 
    color: white; 
 
    background-color: black; 
 
    width:100%; 
 
    height: 350px; 
 
}

<link href="http://netdna.bootstrapcdn.com/bootstrap/3.0.0/css/bootstrap.min.css" rel="stylesheet"/> 
 
<link href="http://netdna.bootstrapcdn.com/font-awesome/3.2.1/css/font-awesome.min.css" rel="stylesheet"/> 
 
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 
<script src="http://netdna.bootstrapcdn.com/bootstrap/3.0.0/js/bootstrap.min.js"></script> 
 
<!-- Carousel --> 
 
<div id="homeCarousel" class="carousel slide"> 
 
    <!-- Menu --> 
 
    <ol class="carousel-indicators"> 
 
    <li data-target="#myCarousel" data-slide-to="0" class="active"></li> 
 
    <li data-target="#myCarousel" data-slide-to="1"></li> 
 
    <li data-target="#myCarousel" data-slide-to="2"></li> 
 
    </ol> 
 
    
 
    <!-- Items --> 
 
    <div class="carousel-inner"> 
 
     
 
     <!-- Item 1 --> 
 
    <div class="item active"> 
 
     <div class="container"> 
 
     <div class="carousel-caption"> 
 
      <h1>Bootstrap 3 Carousel Layout</h1> 
 
      <p>This is an example layout with carousel that uses the Bootstrap 3 styles.</p> 
 
      <p><a class="btn btn-lg btn-primary" href="http://getbootstrap.com">Learn More</a> 
 
     </p></div> 
 
     </div> 
 
    </div> 
 
     
 
     <!-- Item 2 --> 
 
    <div class="item"> 
 
     <div class="container"> 
 
     <div class="carousel-caption"> 
 
      <h1>Changes to the Grid</h1> 
 
      <p>Bootstrap 3 still features a 12-column grid, but many of the CSS class names have completely changed.</p> 
 
      <p><a class="btn btn-large btn-primary" href="#">Learn more</a></p> 
 
     </div> 
 
     </div> 
 
    </div> 
 
     
 
     <!-- Item 3 --> 
 
    <div class="item"> 
 
     <div class="container"> 
 
     <div class="carousel-caption"> 
 
      <h1>Percentage-based sizing</h1> 
 
      <p>With "mobile-first" there is now only one percentage-based grid.</p> 
 
      <p><a class="btn btn-large btn-primary" href="#">Browse gallery</a></p> 
 
     </div> 
 
     </div> 
 
    </div> 
 
    </div> 
 
    <!-- Controls --> 
 
    <a class="left carousel-control" href="#myCarousel" data-slide="prev"> 
 
    <span class="icon-prev"></span> 
 
    </a> 
 
    <a class="right carousel-control" href="#myCarousel" data-slide="next"> 
 
    <span class="icon-next"></span> 
 
    </a> 
 
    <div id="carouselButtons"> 
 
     <button id="slowButton" type="button" class="btn btn-default btn-xs"> 
 
      <span class="glyphicon glyphicon-play"></span> 
 
     </button> 
 
     <button id="fastButton" type="button" class="btn btn-default btn-xs"> 
 
      <span class="glyphicon glyphicon-forward"></span> 
 
     </button> 
 
    </div> 
 
</div>

Answer 1

Non è un'opzione per modificare la velocità sostenute una volta la giostra viene inizializzato. Tuttavia, ciò non significa che non possa essere fatto. Ecco alcuni esempi di codice che consente di modificare le opzioni al volo, compreso l'intervallo

---

$(function() { 
 
    $('#homeCarousel').carousel({ 
 
     interval:2000, 
 
     pause: "false" 
 
    }); 
 
    $('#slowButton').click(function() { 
 
     c = $('#homeCarousel') 
 
     opt = c.data()['bs.carousel'].options 
 
     opt.interval= 10000; 
 
     c.data({options: opt}) 
 
    }); 
 
    $('#fastButton').click(function() { 
 
     c = $('#homeCarousel') 
 
     opt = c.data()['bs.carousel'].options 
 
     opt.interval= 1000; 
 
     c.data({options: opt}) 
 
    }); 
 
});

#carouselButtons { 
 
    margin-left: 100px; 
 
    position: absolute; 
 
    bottom: 0px; 
 
} 
 

 
.item { 
 
    color: white; 
 
    background-color: black; 
 
    width:100%; 
 
    height: 350px; 
 
}

<link href="http://netdna.bootstrapcdn.com/bootstrap/3.0.0/css/bootstrap.min.css" rel="stylesheet"/> 
 
<link href="http://netdna.bootstrapcdn.com/font-awesome/3.2.1/css/font-awesome.min.css" rel="stylesheet"/> 
 
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 
<script src="http://netdna.bootstrapcdn.com/bootstrap/3.0.0/js/bootstrap.min.js"></script> 
 
<!-- Carousel --> 
 
<div id="homeCarousel" class="carousel slide"> 
 
    <!-- Menu --> 
 
    <ol class="carousel-indicators"> 
 
    <li data-target="#myCarousel" data-slide-to="0" class="active"></li> 
 
    <li data-target="#myCarousel" data-slide-to="1"></li> 
 
    <li data-target="#myCarousel" data-slide-to="2"></li> 
 
    </ol> 
 
    
 
    <!-- Items --> 
 
    <div class="carousel-inner"> 
 
     
 
     <!-- Item 1 --> 
 
    <div class="item active"> 
 
     <div class="container"> 
 
     <div class="carousel-caption"> 
 
      <h1>Bootstrap 3 Carousel Layout</h1> 
 
      <p>This is an example layout with carousel that uses the Bootstrap 3 styles.</p> 
 
      <p><a class="btn btn-lg btn-primary" href="http://getbootstrap.com">Learn More</a> 
 
     </p></div> 
 
     </div> 
 
    </div> 
 
     
 
     <!-- Item 2 --> 
 
    <div class="item"> 
 
     <div class="container"> 
 
     <div class="carousel-caption"> 
 
      <h1>Changes to the Grid</h1> 
 
      <p>Bootstrap 3 still features a 12-column grid, but many of the CSS class names have completely changed.</p> 
 
      <p><a class="btn btn-large btn-primary" href="#">Learn more</a></p> 
 
     </div> 
 
     </div> 
 
    </div> 
 
     
 
     <!-- Item 3 --> 
 
    <div class="item"> 
 
     <div class="container"> 
 
     <div class="carousel-caption"> 
 
      <h1>Percentage-based sizing</h1> 
 
      <p>With "mobile-first" there is now only one percentage-based grid.</p> 
 
      <p><a class="btn btn-large btn-primary" href="#">Browse gallery</a></p> 
 
     </div> 
 
     </div> 
 
    </div> 
 
    </div> 
 
    <!-- Controls --> 
 
    <a class="left carousel-control" href="#myCarousel" data-slide="prev"> 
 
    <span class="icon-prev"></span> 
 
    </a> 
 
    <a class="right carousel-control" href="#myCarousel" data-slide="next"> 
 
    <span class="icon-next"></span> 
 
    </a> 
 
    <div id="carouselButtons"> 
 
     <button id="slowButton" type="button" class="btn btn-default btn-xs"> 
 
      <span class="glyphicon glyphicon-play"></span> 
 
     </button> 
 
     <button id="fastButton" type="button" class="btn btn-default btn-xs"> 
 
      <span class="glyphicon glyphicon-forward"></span> 
 
     </button> 
 
    </div> 
 
</div>

Answer 2

Utilizzando la Bootstrap 4 carosello è possibile ottenere un riferimento al suo interno configurazione e impostare direttamente l'intervallo in questo modo:

const options = $("#myCcarousel").data()['bs.carousel']["_config"]; 
options.interval = 50; 

Necessario meno per dire che è abbastanza hacky.