Gå til indholdet
CONTENT · FREE

Carousel

Præsentér højdepunkter som slides, med kontroller, folk kan sætte på pause.

Præsentér højdepunkter som slides med forrige- og næste-knapper og indikatorer; automatisk afspilning er valgfri, og brugerne kan sætte den på pause.

Hvorfor det hjælper

  • Forrige og næste
  • Valgfri automatisk afspilning
  • Pausekontrol

Hvor det passer

  • Kampagner
  • Produktbilleder
  • Meddelelser
Kontrollen Carousel på en RayCraft-side

Eksempel

<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;
}

Et kort uddrag. Tilføj @using RayCraft.Blazor.Components til din side, og brug en interaktiv gengivelsestilstand.

Inkluderet i RayCraft Free. Fungerende eksempler findes i GitHub-lager (MIT); det indeholder eksempel- og demokode, ikke bibliotekets kode.

Alle kontroller ยท Dokumentation