Bootstrap carosello 3 esempi. Crea il tuo slider su Bootstrap in pochi semplici passaggi. Richiede l'elemento attivo iniziale

Dal codice sopra, possiamo vedere che lo slider Bootstrap 3 è diviso in più parti:

• Segnali
• Contenuto del dispositivo di scorrimento
• Controlli

Per eseguire nuovamente il rendering di un elemento div nello slider aggiungiamo i nomi delle classi: giostra E diapositiva. Classe giostra crea un effetto “carosello”, ovvero cambia le diapositive in cerchio. Classe diapositiva aggiunge un'animazione scorrevole dal lato destro o sinistro. I puntatori sono piccoli cerchi nella parte inferiore dello slider; determinano la posizione corrente della diapositiva e il numero di diapositive. Gli indici vengono creati utilizzando un elenco ordinato.

Un elenco ordinato ha una classe indicatori-carosello, che trasforma gli elementi figlio in piccoli cerchi. Ogni elemento li deve avere un attributo destinazione dei dati con l'ID del contenitore principale. Deve avere anche l'attributo dati-slide-to con un valore numerico univoco, per fare riferimento ad una specifica diapositiva, i valori devono iniziare con "0".

...


...

Ogni elemento con una classe articolo ha due sottosezioni: Immagine E didascalia del carosello. L'immagine viene utilizzata come sfondo per la diapositiva. Elemento con classe didascalia del carosello situato sopra l'immagine e utilizzato come titolo della diapositiva. Dentro didascalia del carosello, possiamo aggiungere entrambi i tag o anche entrambi.

Il controllo è fornito dalle frecce sinistra e destra, che vengono utilizzate per cambiare manualmente le diapositive.

Dovrebbero esserci due elementi: uno per ciascuna direzione. Il primo elemento avrà arco elemento con classi glyphicon glyphicon-chevron-sinistra che è un'icona a forma di freccia sinistra e il secondo elemento avrà classi glyphicon glyphicon-chevron-destra, questa è la freccia destra. In Bootstrap possiamo utilizzare i caratteri anziché le immagini per visualizzare le icone.

È tutto! Hai creato con successo uno slider per il tuo sito web. Inoltre, non hai scritto una sola riga di codice JavaScript, ma bootstrap.js ha fatto tutto per te.

Per personalizzare ulteriormente lo slider, puoi aggiungere diversi attributi dati-* per il contenitore del carosello principale.

• "intervallo di dati" viene utilizzato per specificare l'intervallo di tempo tra il cambio di diapositive. Richiede un valore numerico e il numero deve essere espresso in millisecondi.
• "pausa dati" viene utilizzato per determinare quando verrà attivato l'evento di pausa. Ad esempio, quando è " passa il mouse", il cambio di diapositiva si interrompe quando il mouse si trova sopra il cursore.
• "avvolgimento dei dati" è un attributo booleano che consente di impostare se il cambio di diapositive deve riprendere una volta raggiunta la fine dell'elenco di diapositive.

Se desideri utilizzare gli attributi jQuery e data-*, Bootstrap consente l'inizializzazione utilizzando JavaScript. Per fare ciò puoi scrivere il seguente codice:

$(".carousel") .carousel () ;

Le impostazioni del carosello possono essere configurate utilizzando le opzioni. Per esempio:

$(".carousel") .carousel ((
intervallo: 2000
pausa: "passa il mouse",
avvolgere: vero
} ) ;

Puoi anche attivare manualmente gli eventi del dispositivo di scorrimento utilizzando il seguente codice:

• .carousel("pausa") // pausa
• .carousel("cycle") // abilita le diapositive
• .carousel(3) // mostra la quarta diapositiva
• .carousel("prev") // mostra la diapositiva precedente
• .carousel("next") // mostra la diapositiva successiva

I metodi sopra indicati possono essere richiamati da qualsiasi codice JavaScript per controllare il normale funzionamento dello slider. Trovo che i metodi Prev e Next siano molto utili se voglio mostrare i miei pulsanti invece delle frecce standard. Soprattutto quando sono fuori dal layout del carosello.

Questo articolo dovrebbe essere utile per coloro che vogliono imparare a creare uno slider senza scrivere migliaia di righe di codice in JavaScript. Senza dubbio, ciò aumenterà la velocità di sviluppo. Soprattutto, questa soluzione è compatibile con tutti i browser, quindi non dovrai strapparti i capelli per farla funzionare sui browser più vecchi.

In caso di domande, ti consigliamo di utilizzare il nostro

Buona giornata a tutti coloro che vogliono imparare qualcosa di nuovo dagli elementi del framework Bootstrap. L'argomento di oggi sarà lo slider Bootstrap Carousel. Questo è un elemento popolare presente su quasi tutti i siti web.

Pertanto, ti dirò come creare uno slider "Carousel", di quali strumenti integrati avrai bisogno per questo, come puoi configurare i parametri e alla fine dell'articolo ti mostrerò l'implementazione di un esempio specifico . Ora mettiamoci al lavoro!

Una galleria fotografica del tipo "Carousel" viene utilizzata per presentare nuove offerte, prodotti, un elenco delle promozioni in corso, una comoda visualizzazione di un portfolio, ecc. Pertanto, oggi è importante poter lavorare con questo plugin con il nome ufficiale Bootstrap Carousel Plugin.

Vale subito la pena notare che l'elemento descritto non è supportato correttamente in Internet Explorer 9 e versioni precedenti. Tuttavia, funziona benissimo (per WordPress, Joomla! e altri motori, collegare il framework è abbastanza semplice).

Per utilizzare facilmente tutti i parametri e personalizzare rapidamente lo slider, è necessario apprendere le principali classi integrate di Bootstrap 3.

Inoltre, vale la pena conoscere altre caratteristiche del layout di tali gallerie.

Per cominciare, la creazione stessa del blocco “Carousel” richiede la dichiarazione di id="myCarousel" affinché quest'ultimo funzioni correttamente.

Nello stesso div devi aggiungere l'attributo data-ride="carousel", che indica che l'animazione dovrebbe caricarsi immediatamente insieme al caricamento della pagina.

Passiamo ora agli indicatori. In ogni tag li vale la pena aggiungere un paio di attributi: data-target, che indica l'identificatore di uno specifico “Carousel”, e data-slide-to, che determina a quale numero di frame andare.

Per quanto riguarda i pulsanti che spostano le immagini avanti o indietro, per implementarli vale la pena aggiungere l'attributo data-slide con la parola chiave "prev" o "next".

Ora conosci gli elementi di base del framework, grazie ai quali puoi modificare la visualizzazione dello slider in un certo modo. Naturalmente, puoi disabilitare lo scorrimento automatico dei fotogrammi, le didascalie delle immagini o i pulsanti laterali.

Oltre a utilizzare le classi integrate in Bootstrap, puoi rivolgerti a . Quindi, ci sono molti metodi e opzioni in JS che implementano tutte le stesse azioni, solo attraverso lo strumento $.carousel(). Tra questi ci sono i seguenti:

Bene, ora è il momento di verificare come hai padroneggiato il materiale e consolidare le conoscenze acquisite. Per fare ciò, descriverò ogni azione che dovrai intraprendere per creare un carosello.

Innanzitutto, devi connettere gli script e gli stili richiesti. Io preferisco, ma puoi scaricare il framework dal sito ufficiale (http://getbootstrap.com/) e posizionare i file scaricati nella radice della directory del progetto.

Se sei d'accordo con me, nell'intestazione del documento scriviamo:

Se sei un sostenitore del secondo metodo, invece della prima parte del collegamento devi inserire il percorso del file.

Ora non resta che implementarlo nello slider. Per fare ciò, usa le tue conoscenze acquisite e scrivi le parti di codice necessarie in ordine: