Oprettelse af Bootstrap 5-karrusel involverer følgende trin:
1. Inkluder Bootstrap:
- Link til Bootstrap CSS-filen (` `) i `
` sektion af dit HTML-dokument.
- Inkluder Bootstrap JavaScript (` `).
- Inkluder JQuery JavaScript (` `).
2. Opret en karruselbeholder:
- Opret et containerelement med klassen `carousel slide` og et unikt `id`, for eksempel `
`.
- Tilføj `data-bs-ride="carousel"` til containerelementet, hvilket muliggør automatisk overgang af dias.
3. Opret indikatorer (pagenation):
- Inde i karruselbeholderen skal du oprette en `
` element med klassen `carousel-indicators`, som indeholder `
`-elementer, der repræsenterer indikatorer.
- Hver `
`-elementet skal have dataattributter, der angiver dets diasindeks (`data-bs-target="#myCarousel" data-bs-slide-to="0"`) og klasse `active` for den første indikator (slide) .
4. Opret karruselelementer:
- Inden i karruselbeholderen skal du oprette et `
`-element med klassen `carousel-inner`, som vil holde dine slides.
- Hver slide skal have klassen 'karrusel-vare'. Det første karruselelement skal have den "aktive" klasse.
- Tilføj billeder, tekst eller andet indhold til hvert karruselelement.