Apresente destaques como slides com botões de anterior e próximo e indicadores; a reprodução automática é opcional e os usuários podem pausá-la.
Por que ajuda
- Anterior e próximo
- Reprodução automática opcional
- Controle de pausa
Onde se encaixa
- Promoções
- Imagens de produtos
- Comunicados
Exemplo
<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;
}Um pequeno trecho. Adicione @using RayCraft.Blazor.Components à sua página e use um modo de renderização interativo.
Incluído no RayCraft Free. Há exemplos funcionais no repositório do GitHub (MIT); ele contém código de exemplo e demonstração, não o código da biblioteca.