Karusellit, joita kutsutaan myös kuvakaruselleiksi, ovat interaktiivisia elementtejä, joita käytetään näyttämään sarja kuvia tai sisältöä vuorotellen. Niitä käytetään usein tuotteiden, portfoliosisältöjen tai esillä olevan sisällön esittämiseen.

Keskeiset ominaisuudet

Bootstrapin karusellikomponentti on tehokas työkalu mukaansatempaavien käyttökokemusten luomiseen. Se sisältää automaattisen kierron, navigointiohjaimet sekä muokkausmahdollisuudet siirtymäefekteille, ajoitukselle ja indikaattoreille.

Käyttöluokat

• carousel: Tämä luokka lisätään karusellin säiliöelementtiin;
• carousel-inner: Tämä luokka lisätään säiliön sisällä olevaan <div>-elementtiin. Se ympäröi kaikki karusellin kohteet (diat) ja määrittää karusellin sisällön;
• carousel-item: Tämä luokka lisätään yksittäisiin dioihin karusellissa. Jokainen carousel-item edustaa yhtä diaa karusellissa;
• active: Tämä luokka merkitsee dian aktiiviseksi eli parhaillaan näkyväksi. Se varmistaa, että kyseinen dia näkyy karusellin renderöinnin yhteydessä;
• carousel-control-prev ja carousel-control-next: Nämä luokat lisätään edelliseen ja seuraavaan navigointipainikkeeseen. Ne tarjoavat käyttäjille mahdollisuuden siirtyä karusellissa manuaalisesti;
• data-bs-target ja data-bs-slide: Näitä attribuutteja käytetään navigointipainikkeiden kanssa määrittämään kohdekaruselli ja siirtymän suunta;
• carousel-indicators: Tämä luokka lisätään indikaattorilistaan (yleensä <li>-elementtejä), jotka edustavat jokaista karusellin diaa;
• data-bs-interval ja data-bs-pause: Nämä attribuutit määrittävät siirtymien välisen ajan (millisekunteina) ja sen, pysäytetäänkö karuselli hiiren ollessa päällä tai kohdistuksen aikana.