Carrousels, ook wel afbeeldingssliders genoemd, zijn interactieve elementen die worden gebruikt om een reeks afbeeldingen of inhoudsitems roterend weer te geven. Ze worden vaak ingezet om producten, portfolio-items of uitgelichte inhoud te tonen.

Belangrijkste kenmerken

De carrouselcomponent van Bootstrap is een krachtig hulpmiddel voor het creëren van boeiende gebruikerservaringen. Het biedt automatische cycli, navigatiebediening en aanpassingsmogelijkheden voor overgangseffecten, timing en indicatoren.

Gebruikte klassen

• carousel: Deze klasse wordt toegepast op het containerelement van de carrousel;
• carousel-inner: Deze klasse wordt toegepast op een <div>-element binnen de container. Het omvat alle carrouselitems (slides) en definieert de interne inhoud van de carrousel;
• carousel-item: Deze klasse wordt toegepast op individuele slides binnen de carrousel. Elke carousel-item vertegenwoordigt één slide in de carrousel;
• active: Deze klasse markeert een slide als actief of als de momenteel weergegeven slide. Het zorgt ervoor dat de betreffende slide zichtbaar is wanneer de carrousel wordt weergegeven;
• carousel-control-prev en carousel-control-next: Deze klassen worden toegepast op de vorige en volgende navigatieknoppen. Ze bieden bedieningselementen waarmee gebruikers handmatig door de carrousel kunnen navigeren;
• data-bs-target en data-bs-slide: Deze attributen worden gebruikt met de navigatieknoppen om de doelcarrousel en de richting van de overgang aan te geven;
• carousel-indicators: Deze klasse wordt toegepast op een lijst van indicatorelementen (meestal <li>-elementen) die elke carrouselslide vertegenwoordigen;
• data-bs-interval en data-bs-pause: Deze attributen configureren het interval (in milliseconden) tussen de overgangen van slides en geven aan of de carrousel moet pauzeren bij hover of focus.