Karuseller, även kallade bildsliders, är interaktiva element som används för att visa en serie bilder eller innehållsposter som roterar. De används ofta för att visa produkter, portföljobjekt eller utvalt innehåll.

Viktiga funktioner

Bootstraps karusellkomponent är ett kraftfullt verktyg för att skapa engagerande användarupplevelser. Den har automatisk cykling, navigationskontroller och anpassningsalternativ för övergångseffekter, timing och indikatorer.

Användningsklasser

• carousel: Denna klass används på karusellens behållare;
• carousel-inner: Denna klass används på ett <div>-element inuti behållaren. Den omsluter alla karusellobjekt (slides) och definierar karusellens inre innehåll;
• carousel-item: Denna klass används på individuella slides i karusellen. Varje carousel-item representerar en slide i karusellen;
• active: Denna klass markerar en slide som aktiv eller den som visas för tillfället. Den säkerställer att motsvarande slide är synlig när karusellen renderas;
• carousel-control-prev och carousel-control-next: Dessa klasser används på föregående och nästa navigationsknappar. De ger användaren möjlighet att manuellt navigera genom karusellen;
• data-bs-target och data-bs-slide: Dessa attribut används med navigationsknapparna för att ange målkarusellen och riktningen för slideövergångar;
• carousel-indicators: Denna klass används på en lista med indikatorer (vanligtvis <li>-element) som representerar varje karusellslide;
• data-bs-interval och data-bs-pause: Dessa attribut konfigurerar intervallet (i millisekunder) mellan slideövergångar och anger om karusellen ska pausas vid hovring eller fokus.