Presentazione multipla del carosello di bootstrap

Come aggiungo più slider Bootstrap Carousel Slideshow su una singola pagina o su una pagina?

In questo tutorial, stiamo fornendo un esempio di codice sorgente funzionante. Innanzitutto, scarica il codice di esempio utilizzando il pulsante Scarica codice nella parte inferiore della pagina.

L'aggiunta e la creazione di più cursori del carosello bootstrap sulla pagina è così facile e semplice.

Quindi, iniziamo con il codice di esempio.

Al termine del download del codice sorgente, otterrai un file zip "multiple-bootstrap-carousels.zip". Estrarre il file zip ovunque nel sistema del computer locale.

Dopo l'estrazione trovi una directory denominata "multiple-bootstrap-carousels", in quella directory otterrai le seguenti risorse:

1. Directory CSS
2. Directory dei caratteri
3. Directory Immagini
4. Directory JS
5. Directory CSS
6. File HTML – multiple-bootstrap-carousels.html

Quali sono questi attestati?

Queste risorse sono necessarie per creare un bootstrap a più cursori del carosello.

• La directory CSS contiene un file "bootstrap.min.css" che viene utilizzato per progettare pagine HTML reattive.
• La directory dei caratteri viene utilizzata da bootstrap CSS per generare le varie icone grafiche costruite. Anche il controllo di navigazione della freccia del cursore del carosello è generato da questo. Puoi controllare qui.
• La directory delle immagini contiene tutte le immagini che utilizzeremo nelle diapositive del dispositivo di scorrimento del carosello.
• La directory JS contiene 2 file js "jquery.min.js" e "bootstrap.min.js". un file jquery.min.js è una libreria JavaScript lo scopo di jquery utilizza JavaScript sui siti web. un file bootstrap.min.js è un file di libreria bootstrap framework js che viene utilizzato per creare caroselli bootstrap, moduli di modelli, suggerimenti, schede ecc. Il file bootstrap.min.js dipende dal file jquery.min.js, è necessario caricare prima di utilizzare bootstrap js. Puoi esplorare di più sul file della libreria bootstrap js qui.
• Il file HTML (multiple-bootstrap-carousels.html) contiene tutto il design e la parte del codice di più cursori del carosello.

impariamo di più sul file multiple-bootstrap-carousels.html.

Dovresti aprire il file HTML in qualsiasi editor di codice. Se non hai uno strumento di editor di codice installato sul computer, ecco alcuni strumenti di editor di codice a pagamento, scarica e installa qualsiasi strumento di editor di codice:

Nella sezione Head abbiamo caricato tutti i file CSS e js richiesti e quattro codici JS carosello come di seguito:

Codice

 <testa>
 <title>Esempio di presentazione di più caroselli Bootstrap</title>
 <meta set di caratteri="utf-8">
 <meta name="viewport" content="width=device-width, initial-scale=1">
 
 <!-- libreria CSS bootstrap -->
 <link rel="stylesheet" href="css/bootstrap.min.css">
 
 <!-- jQuery ultima libreria (carica prima questa libreria) -->
 <script src="js/jquery.min.js"></script>
 
 <!-- libreria js bootstrap -->
 <script src="js/bootstrap.min.js"></script>
 
 <!-- personalizzazione del codice CSS del carosello -->
 <stile>
 .carosello {
 /* puoi aggiungere la personalizzazione dei CSS qui come la larghezza dell'altezza del cursore */
 }
 </stile>
 
 <!-- codice js del carosello -->
 <script>

 /* prima presentazione del carosello */
 $('#carousel-1').carousel({
      // Tempo di ritardo tra la diapositiva ciclica, se falso, nessun ciclo
      intervallo: 500,

      // Sospende la diapositiva all'ingresso del mouse e riprende all'uscita del mouse.
      pausa: "passare sopra",

      // Se il carosello deve scorrere continuamente o avere arresti bruschi.
      avvolgere: vero,

      // Se il carosello deve reagire agli eventi della tastiera.
      tastiera: vero
 });
 
 
 /* seconda presentazione del carosello */
 $('#carousel-2').carousel({
      intervallo: 1000,
      avvolgere: vero,
      tastiera: vero
 });
 
 
 /* presentazione del terzo carosello */
 $('#carousel-3').carousel({
     intervallo: 2000,
     avvolgere: vero,
     tastiera: vero
 });
 
 
 /* quarta presentazione del carosello */
 $('#carousel-4').carousel({
     intervallo: 3000,
     avvolgere: vero,
     tastiera: vero
 });
 </script>
 </testa>

Nella sezione Body, stiamo definendo i due codici HTML del carosello. Ora, spiegando il funzionamento del primo codice slider. Abbiamo diviso un div di classe di riga in due colonne usando la classe col-md-6. E nella prima colonna, abbiamo aggiunto il codice HTML del primo cursore del carosello come di seguito.

 <div class="riga">
 <!-------------- inizio prima colonna --------------->
 <div class="col-md-6">
  <div class="jumbotron">
   <center><h3>Carosello uno</h3></center>
   <!-------------- inizio presentazione primo carosello --------------->
   <div class="carousel slide" data-ride="carousel">
   <!-- diapositive puntate -->
   <ol class="indicatori-carosello">
    <li data-target="#carousel-1" data-slide-to="0" class="active"></li>
    <li data-target="#carousel-1" data-slide-to="1"></li>
    <li data-target="#carousel-1" data-slide-to="2"></li>
   </ol>

   <!-- wrapper per diapositive -->
   <div class="carousel-inner" role="listbox">
    
    <!-- diapositive 1 -->
    <div class="elemento attivo">
     <img src="images/girl-1.jpg" alt="La Canea">
    </div>
 
    <!-- diapositive 2 -->
    <div class="item">
     <img src="images/girl-2.jpg" alt="La Canea">
    </div>
 
    <!-- diapositive 3 -->
    <div class="item">
     <img src="images/girl-3.jpg" alt="Fiore">
    </div>

   </div>

   <!-- le diapositive sinistra e destra controllano le frecce -->
   <a class="left carousel-control" href="#carousel-1" role="button" data-slide="prev">
    <span class="glyphicon glyphicon-chevron-left" aria-hidden="true"></span>
    <span class="sr-only">Precedente</span>
   </a>
   <a class="right carousel-control" href="#carousel-1" role="button" data-slide="next">
    <span class="glyphicon glyphicon-chevron-right" aria-hidden="true"></span>
    <span class="sr-only">Avanti</span>
   </a>
  </div>
  <!--------------- fine presentazione primo carosello --------------->
  </div>
 </div>
 <!-------------- fine prima colonna --------------->
</riga>

Ci sono tre parti del cursore del carosello nel codice HTML sopra

• Proiettili a scorrimento
• Diapositive di immagini
• Navigazione a scorrimento

La sezione dei punti elenco del dispositivo di scorrimento è costruita utilizzando il tag dell'elenco degli ordini di HTML. <ol> utilizza una classe denominata carousel-indicators , che è stata definita nel file CSS bootstrap. E ogni tag <li> ha un attributo data-target="#carousel-1″ dove #carousel-1 è lo stesso ID che stiamo usando nel codice js del primo carosello nel codice di esempio.

La sezione Slider Image Slides ha un div con un elemento di classe. In ciascuno di questo div, abbiamo aggiunto un tag immagine per caricare l'immagine della diapositiva.

Slider Navigation viene utilizzato per navigare tra le diapositive delle immagini verso sinistra o verso destra. Le frecce di navigazione sono create da icone grafiche bootstrap chiamate Glyphicon . I pulsanti di navigazione sono racchiusi nel tag anchor <a> con la funzione di attributo dei dati del carosello bootstrap e con la classe di controllo del carosello . Nel tag <a> nell'attributo href , abbiamo aggiunto lo stesso ID ( #carousel-1 ) che abbiamo aggiunto prima nella parte dei proiettili slider. Questo ID viene utilizzato nel codice js della prima presentazione a carosello per attivare la prima funzionalità del dispositivo di scorrimento nel primo codice HTML del dispositivo di scorrimento.

Nel nostro secondo codice slider, abbiamo assegnato un altro ID #carousel-2 per tutte e tre le parti del codice slider come nel secondo codice slider js, secondo slider bullet e codice HTML di navigazione.

Speranza! voi ragazzi trovate che il tutorial e il codice di esempio sono descrittivi e funzionano per voi. Abbiamo commentato ogni singola sezione del codice nell'esempio, in modo che tu possa capire facilmente ogni singolo codice.

Ragazzi, se avete un suggerimento sulla lingua del tutorial e sul codice di esempio scaricabile, scriveteci alla nostra posta. Il nostro indirizzo email è awordpresslife{at}gmail{dot}com

Grazie per aver letto, utilizzato e supportato questo tutorial.

Trova i link Riferimenti utili sotto i quali abbiamo cercato di scrivere questo tutorial per te: