Het maken van een Bootstrap 5-carrousel omvat de volgende stappen:
1. Inclusief Bootstrap:
- Koppel het Bootstrap CSS-bestand (` `) in de `
` sectie van uw HTML-document.
- Inclusief Bootstrap JavaScript (` `).
- Voeg JQuery JavaScript toe (` `).
2. Maak een carrouselcontainer:
- Maak een containerelement met de klasse `carousel slide` en een unieke `id`, bijvoorbeeld `
`.
- Voeg `data-bs-ride="carousel"` toe aan het containerelement, wat de automatische overgang van dia's mogelijk maakt.
3. Indicatoren maken (paginatie):
- Maak in de carrouselcontainer een `
` element met de klasse `carousel-indicators`, dat `
` elementen die indicatoren vertegenwoordigen.
- Elke `
` element moet data-attributen hebben die de dia-index specificeren (`data-bs-target="#myCarousel" data-bs-slide-to="0"`) en klasse `active` voor de eerste indicator (slide) .
4. Carrouselitems maken:
- Maak binnen de carrouselcontainer een `
` element met de klasse `carousel-inner`, waarin uw dia's kunnen worden bewaard.
- Elke dia moet de klasse `carrousel-item` hebben. Het eerste carrouselitem moet de klasse `active` hebben.
- Voeg afbeeldingen, tekst of andere inhoud toe aan elk carrouselitem.