Aller au contenu
CONTENT · FREE

Carousel

Présentez les temps forts sous forme de diapositives, avec des commandes que l’on peut mettre en pause.

Présentez les temps forts sous forme de diapositives avec boutons précédent et suivant et indicateurs ; la lecture automatique est facultative et les utilisateurs peuvent la mettre en pause.

Pourquoi c’est utile

  • Précédent et suivant
  • Lecture automatique facultative
  • Contrôle de pause

Où il trouve sa place

  • Promotions
  • Images de produits
  • Annonces
Le contrôle Carousel dans une page RayCraft

Exemple

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

Un court fragment. Ajoutez @using RayCraft.Blazor.Components à votre page et utilisez un mode de rendu interactif.

Inclus dans RayCraft Free. Des exemples fonctionnels se trouvent dans le dépôt GitHub (MIT); il contient du code d’exemple et de démonstration, pas le code de la bibliothèque.

Tous les contrôles ยท Documentation