Präsentieren Sie Highlights als Folien mit Zurück- und Weiter-Schaltflächen und Indikatoren; automatische Wiedergabe ist optional, und Benutzer können sie pausieren.
Warum es hilft
- Zurück und Weiter
- Optionale automatische Wiedergabe
- Pause-Steuerung
Wo es passt
- Aktionen
- Produktbilder
- Ankündigungen
Beispiel
<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;
}Ein kurzes Fragment. Fügen Sie @using RayCraft.Blazor.Components zu Ihrer Seite hinzu und nutzen Sie einen interaktiven Render-Modus.
In RayCraft Free enthalten. Funktionierende Beispiele finden Sie im GitHub-Repository (MIT); es enthält Beispiel- und Democode, nicht den Code der Bibliothek.