Naar de inhoud
CONTENT · FREE

Carousel

Toon hoogtepunten als dia's, met besturing die mensen kunnen pauzeren.

Toon hoogtepunten als dia's met vorige- en volgende-knoppen en indicatoren; automatisch afspelen is optioneel en gebruikers kunnen het pauzeren.

Waarom het helpt

  • Vorige en volgende
  • Optioneel automatisch afspelen
  • Pauzebesturing

Waar het past

  • Aanbiedingen
  • Productafbeeldingen
  • Mededelingen
Het besturingselement Carousel op een RayCraft-pagina

Voorbeeld

<Carousel Label="Highlights" @bind-ActiveIndex="_index">
    <CarouselSlide><h3>Flat design</h3><p>Square corners and sober colors in both themes.</p></CarouselSlide>
    <CarouselSlide><h3>Accessible</h3><p>Keyboard support and WCAG contrast.</p></CarouselSlide>
    <CarouselSlide><h3>Localized</h3><p>English and Bulgarian built in.</p></CarouselSlide>
</Carousel>
<Carousel Label="Auto-advancing" AutoplayInterval="4000">
    <CarouselSlide>First (changes every 4 s; pauses on hover, focus or with the pause button)</CarouselSlide>
    <CarouselSlide>Second</CarouselSlide>
    <CarouselSlide>Third</CarouselSlide>
</Carousel>
<span>Slide index: @_index</span>

@code {
    private int _index;
}

Een kort fragment. Voeg @using RayCraft.Blazor.Components toe aan je pagina en gebruik een interactieve rendermodus.

Inbegrepen in RayCraft Free. Werkende voorbeelden staan in de GitHub-repository (MIT); het bevat voorbeeld- en democode, niet de code van de bibliotheek.

Alle besturingselementen ยท Documentatie