Come modificare la velocità di transizione del carosello Bootstrap (intervallo di tempo)

Bootstrap è uno dei framework HTML/CSS/JavaScript più popolari e leggeri per gli sviluppatori.
È ampiamente utilizzato per slider di immagini, hero banner e persino temi WordPress.
Il carosello di Bootstrap è ideale per mostrare immagini o contenuti in modo fluido e reattivo.

Per impostazione predefinita, il carosello scorre automaticamente con un intervallo fissato, ma potresti voler
controllare la velocità dello slider in base al tuo design: più veloce per anteprime rapide,
più lento per presentazioni narrative. Di seguito scoprirai come regolare
l’intervallo di tempo e affinare la durata dell’animazione con poche righe di codice.

Non serve modificare i file core di Bootstrap. Intervieni semplicemente su HTML e foglio di stile.

Impostare l’intervallo del carosello Bootstrap

Ecco lo snippet predefinito del carosello:

<div id="myCarousel" class="carousel slide" data-ride="carousel"> 
  <!-- Indicators -->
  <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>
    <li data-target="#myCarousel" data-slide-to="3"></li>
  </ol>
  
  <!-- Wrapper for slides -->
  <div class="carousel-inner" role="listbox">
    <div class="item active"> <img src="img_chania.jpg" alt="Chania"> </div>
    <div class="item"> <img src="img_chania2.jpg" alt="Chania"> </div>
    <div class="item"> <img src="img_flower.jpg" alt="Flower"> </div>
    <div class="item"> <img src="img_flower2.jpg" alt="Flower"> </div>
  </div>
  
  <!-- Left and right controls --> 
  <a class="left carousel-control" href="#myCarousel" role="button" data-slide="prev"> 
    <span class="glyphicon glyphicon-chevron-left" aria-hidden="true"></span>
    <span class="sr-only">Previous</span>
  </a>
    <a class="right carousel-control" href="#myCarousel" role="button" data-slide="next">
    <span class="glyphicon glyphicon-chevron-right" aria-hidden="true"></span>
    <span class="sr-only">Next</span>
  </a> 
</div>

Aggiungere l’attributo `data-interval`

Per stabilire quanto resta visibile ogni slide, aggiungi data-interval al wrapper:

<div id="myCarousel" class="carousel slide" data-ride="carousel" data-interval="3000"></div>

1000 = 1 secondo
3000 = 3 secondi
Sostituisci 3000 con l’intervallo desiderato.

È il modo più semplice per controllare la velocità del carosello su siti responsive.

Modificare la durata dell’animazione in CSS

L’intervallo controlla il tempo di permanenza, ma puoi anche
personalizzare l’animazione. Di default, Bootstrap usa 0,6 secondi.
Per un fade o slide più lento, aumenta il tempo nel tuo CSS.

.carousel-inner>.item {
    -webkit-transition: -webkit-transform 1.2s ease-in-out !important;
    -o-transition: -o-transform 1.2s ease-in-out !important;
    transition: transform 1.2s ease-in-out !important;
}

Qui impostiamo 1,2 secondi. Adatta la durata in base all’effetto desiderato.

Perché regolare la velocità?

User experience: slide più lunghe per storytelling e highlight di prodotto.
E-commerce: slide più rapide per sfogliare le immagini.
SEO e coinvolgimento: interazioni fluide aumentano la permanenza.
Temi WordPress: molti temi si basano su Bootstrap; stesso approccio.

Conclusioni

Il carosello Bootstrap è semplice, reattivo e ampiamente supportato.
Regolando intervallo e durata dell’animazione, il tuo slider risalterà
su portfolio, blog o store.