Guida Bootstrap 3: Avviare automaticamente effetto carousel

Pubblicato ven 08 nov 2013 by
Guida Bootstrap 3: Avviare automaticamente effetto carousel

E' da poco uscito l'ultimissima versione del celebre framework di Twitter, ovvero Twitter Bootstrap 3, grazie a questo framework è possibile con pochissime righe di codice creare uno slide di immagini, questo effetto in jQuery è chiamato comunemente carousel.

Non so se è per via di un bug o una svista dei programmatori di Bootstrap, ma fatto sta che se seguite passo passo la documentazione ufficiale per inserire questo simpatico effetto, lo slide non parte automaticamente con nessuno dei principali browser utilizzati (es. Internet Explorer, Mozilla Firefox e Google Chrome). Infatti una volta caricata la pagina vedremo la prima immagine ferma immobile, se però avete inserito i controlli per il cambio "manuale" della foto allora lo script si "risveglierà" magicamente e inizierà a far scorrere le immagini preimpostate precedentemente, per ovviare a questo problemino basterà inserire nella pagina html del carousel prima di chiudere il tag body questo script:

<script type='text/javascript'>
   $(document).ready(function() {
        $('.carousel').carousel({
           interval: 4000
    })
  });
 </script>

Se invece avete deciso di richiamare gli script da un file esterno .js allora dovrete inserire al suo interno:

$(document).ready(function() {
   $('.carousel').carousel({
        interval: 4000
     })
  });

Ora le vostre immagini scorreranno automaticamente all'apertura della pagina, volendo potete togliere l'opzione interval per lasciare il tempo di default oppure cambiare il valore (es.4000 = 4 secondi, 5000 = 5 secondi ecc...) per critiche o richieste lasciatemi un commento.

comments powered by Disqus