Bootstrap - Plugin Carousel

Il carosello Bootstrap è un modo flessibile e reattivo per aggiungere uno slider al tuo sito. Oltre ad essere reattivo, il contenuto è abbastanza flessibile da consentire immagini, iframe, video o qualsiasi tipo di contenuto che potresti desiderare.

Se desideri includere questa funzionalità di plug-in individualmente, avrai bisogno del file carousel.js. Altrimenti, come menzionato nel capitolo Panoramica dei plug-in Bootstrap , puoi includere bootstrap.js o bootstrap.min.js minimizzato .

Esempio

Una semplice presentazione di seguito mostra un componente generico per scorrere gli elementi come un carosello, utilizzando il plug-in carosello Bootstrap. Per implementare il carousel, è sufficiente aggiungere il codice con il markup. Non sono necessari attributi di dati, solo un semplice sviluppo basato su classi.

<div id = "myCarousel" class = "carousel slide">
   
   <!-- 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>
   </ol>   
   
   <!-- Carousel items -->
   <div class = "carousel-inner">
      <div class = "item active">
         <img src = "/bootstrap/images/slide1.png" alt = "First slide">
      </div>
      
      <div class = "item">
         <img src = "/bootstrap/images/slide2.png" alt = "Second slide">
      </div>
      
      <div class = "item">
         <img src = "/bootstrap/images/slide3.png" alt = "Third slide">
      </div>
   </div>
   
   <!-- Carousel nav -->
   <a class = "carousel-control left" href = "#myCarousel" data-slide = "prev">&lsaquo;</a>
   <a class = "carousel-control right" href = "#myCarousel" data-slide = "next">&rsaquo;</a>
   
</div>

Didascalie opzionali

Puoi aggiungere facilmente didascalie alle diapositive con il .carousel-caption elemento all'interno di qualsiasi .item. Posiziona praticamente qualsiasi codice HTML opzionale al suo interno e verrà automaticamente allineato e formattato. Il seguente esempio lo dimostra:

<div id = "myCarousel" class = "carousel slide">
   
   <!-- 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>
   </ol>   
   
   <!-- Carousel items -->
   <div class = "carousel-inner">
      <div class = "item active">
         <img src = "/bootstrap/images/slide1.png" alt = "First slide">
         <div class = "carousel-caption">This Caption 1</div>
      </div>
      
      <div class = "item">
         <img src = "/bootstrap/images/slide2.png" alt = "Second slide">
         <div class = "carousel-caption">This Caption 2</div>
      </div>
      
      <div class = "item">
         <img src = "/bootstrap/images/slide3.png" alt = "Third slide">
         <div class = "carousel-caption">This Caption 3</div>
      </div>
   </div>
   
   <!-- Carousel nav --> 
   <a class = "carousel-control left" href = "#myCarousel" data-slide = "prev">&lsaquo;</a>
   <a class = "carousel-control right" href = "#myCarousel" data-slide = "next">&rsaquo;</a>+
</div>

Utilizzo

  • Via data attributes - Utilizza gli attributi dei dati per controllare facilmente la posizione del carosello.

    • Attributo data-slideaccetta le parole chiave prev o next , che alterano la posizione della diapositiva rispetto alla sua posizione corrente.

    • Uso data-slide-to per passare un indice di diapositiva grezzo alla giostra data-slide-to = "2", che sposta la posizione della diapositiva su un particolare indice che inizia con 0.

    • Il data-ride = "carousel" l'attributo viene utilizzato per contrassegnare un carosello come animazione a partire dal caricamento della pagina.

  • Via JavaScript - Il carosello può essere chiamato manualmente con JavaScript come di seguito -

$('.carousel').carousel()

Opzioni

Ci sono alcune opzioni che possono essere passate tramite attributi di dati o JavaScript sono elencate nella seguente tabella:

Nome opzione Tipo / valore predefinito Nome attributo dati Descrizione
intervallo numero predefinito - 5000 intervallo di dati La quantità di tempo di ritardo tra il ciclo automatico di un elemento. Se falso, il carosello non eseguirà automaticamente il ciclo.
pausa stringa Default - "hover" pausa dati Mette in pausa il ciclo del carosello su mouseenter e riprende il ciclo del carosello su mouseleave.
avvolgere booleano Predefinito: vero data-wrap Indica se il carosello deve pedalare continuamente o avere arresti forzati

Metodi

Di seguito è riportato un elenco di metodi utili che possono essere utilizzati con il codice del carosello.

Metodo Descrizione Esempio
.carousel (opzioni) Inizializza il carosello con un oggetto opzioni opzionale e inizia a scorrere gli elementi. 
$('#identifier').carousel({
   interval: 2000
})
.carousel ('ciclo') Scorre gli elementi del carosello da sinistra a destra. 
$('#identifier').carousel('cycle')
.carousel ("pausa") Impedisce al carosello di scorrere gli elementi. 
$('#identifier')..carousel('pause')
.carousel (numero) Passa il carousel a un frame particolare (basato su 0, simile a un array). 
$('#identifier').carousel(number)
.carousel ('prec') Passa all'elemento precedente. 
$('#identifier').carousel('prev')
.carousel ("successivo") Passa all'elemento successivo. 
$('#identifier').carousel('next')

Esempio

Il seguente esempio dimostra l'utilizzo dei metodi:

<div id = "myCarousel" class = "carousel slide">
   
   <!-- 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>
   </ol>   
   
   <!-- Carousel items -->
   <div class = "carousel-inner">
      <div class = "item active">
         <img src = "/bootstrap/images/slide1.png" alt = "First slide">
      </div>
      
      <div class = "item">
         <img src = "/bootstrap/images/slide2.png" alt = "Second slide">
      </div>
      
      <div class = "item">
         <img src = "/bootstrap/images/slide3.png" alt = "Third slide">
      </div>
   </div>
   
   <!-- Carousel nav -->
   <a class = "carousel-control left" href = "#myCarousel" data-slide = "prev">&lsaquo;</a>
   <a class = "carousel-control right" href = "#myCarousel" data-slide = "next">&rsaquo;</a>
   
   <!-- Controls buttons -->
   <div style = "text-align:center;">
      <input type = "button" class = "btn prev-slide" value = "Previous Slide">
      <input type = "button" class = "btn next-slide" value = "Next Slide">
      <input type = "button" class = "btn slide-one" value = "Slide 1">
      <input type = "button" class = "btn slide-two" value = "Slide 2">            
      <input type = "button" class = "btn slide-three" value = "Slide 3">
   </div>
	
</div> 

<script>
   $(function() {
	
      // Cycles to the previous item
      $(".prev-slide").click(function() {
         $("#myCarousel").carousel('prev');
      });
      
      // Cycles to the next item
      $(".next-slide").click(function() {
         $("#myCarousel").carousel('next');
      });
      
      // Cycles the carousel to a particular frame 
      $(".slide-one").click(function() {
         $("#myCarousel").carousel(0);
      });
      
      $(".slide-two").click(function() {
         $("#myCarousel").carousel(1);
      });
      
      $(".slide-three").click(function() {
         $("#myCarousel").carousel(2);
      });
   });
</script>

Eventi

La classe carousel di Bootstrap espone due eventi per l'aggancio alla funzionalità carousel elencati nella tabella seguente.

Evento Descrizione Esempio
slide.bs. carousel Questo evento viene generato immediatamente quando viene richiamato il metodo di istanza della diapositiva. 
$('#identifier').on('slide.bs.carousel', function () {
   // do something
})
slid.bs. carousel Questo evento viene generato quando il carosello ha completato la transizione della diapositiva. 
$('#identifier').on('slid.bs.carousel', function () {
   // do something
})

Esempio

L'esempio seguente mostra l'utilizzo degli eventi:

<div id = "myCarousel" class = "carousel slide">
   
   <!-- 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>
   </ol>   
   
   <!-- Carousel items -->
   <div class = "carousel-inner">
      <div class = "item active">
         <img src = "/bootstrap/images/slide1.png" alt = "First slide">
      </div>
      
      <div class = "item">
         <img src = "/bootstrap/images/slide2.png" alt = "Second slide">
      </div>
      
      <div class = "item">
         <img src = "/bootstrap/images/slide3.png" alt = "Third slide">
      </div>
   </div>
   
   <!-- Carousel nav -->
   <a class = "carousel-control left" href = "#myCarousel" data-slide = "prev">&lsaquo;</a>
   <a class = "carousel-control right" href = "#myCarousel" data-slide = "next">&rsaquo;</a>
	
</div> 

<script>
   $(function() {
      $('#myCarousel').on('slide.bs.carousel', function () {
         alert("This event fires immediately when the slide instance method" +"is invoked.");
      });
   });
</script>