Към съдържанието
СЪДЪРЖАНИЕ · FREE

Carousel

Представете акценти като слайдове, с контроли, които потребителите могат да спрат.

Представете акценти като слайдове с бутони за предишно и следващо и индикатори; автоматичното превключване е по избор и потребителите могат да го спрат.

Защо помага

  • Предишно и следващо
  • По избор автоматично превключване
  • Контрол за пауза

Къде пасва

  • Промоции
  • Изображения на продукти
  • Съобщения
Контролата Carousel в страница на RayCraft

Пример

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

Кратък фрагмент. Добавете @using RayCraft.Blazor.Components към страницата си и ползвайте интерактивен режим на рендиране.

Включено в RayCraft Free. Работещи примери има в хранилище в GitHub (MIT); то съдържа примерен и демонстрационен код, не кода на библиотеката.

Всички контроли ยท Документация