I caroselli, noti anche come slider di immagini, sono elementi interattivi utilizzati per visualizzare una serie di immagini o elementi di contenuto in rotazione. Sono frequentemente impiegati per mostrare prodotti, elementi di portfolio o contenuti in evidenza.

Caratteristiche principali

Il componente carousel di Bootstrap è uno strumento potente per creare esperienze utente coinvolgenti. Offre cicli automatici, controlli di navigazione e opzioni di personalizzazione per effetti di transizione, tempi e indicatori.

Classi di utilizzo

• carousel: Questa classe viene applicata all'elemento contenitore del carosello;
• carousel-inner: Questa classe si applica a un elemento <div> all'interno del contenitore. Racchiude tutti gli elementi del carosello (slide) e definisce il contenuto interno del carosello;
• carousel-item: Questa classe viene applicata alle singole slide all'interno del carosello. Ogni carousel-item rappresenta una slide nel carosello;
• active: Questa classe contrassegna una slide come attiva o attualmente visualizzata. Garantisce che la slide corrispondente sia visibile quando il carosello viene renderizzato;
• carousel-control-prev e carousel-control-next: Queste classi vengono applicate ai pulsanti di navigazione precedente e successivo. Forniscono controlli per consentire agli utenti di navigare manualmente nel carosello;
• data-bs-target e data-bs-slide: Questi attributi vengono utilizzati con i pulsanti di navigazione per specificare il carosello di destinazione e la direzione delle transizioni delle slide;
• carousel-indicators: Questa classe viene applicata a un elenco di elementi indicatori (solitamente elementi <li>) che rappresentano ciascuna slide del carosello;
• data-bs-interval e data-bs-pause: Questi attributi configurano l'intervallo (in millisecondi) tra le transizioni delle slide e specificano se il carosello deve essere messo in pausa al passaggio del mouse o al focus.