Carousel

A slideshow component for cycling through elements - images or slides of text - like a carousel.

Structure

  • <Carousel> main container
    • <CarouselSlide> wrapper for slide content

Example

<Carousel @bind-SelectedSlide="@selectedSlide">
    <CarouselSlide Name="1">
        <Image Source="..." Text="City Skyline" Display="Display.Block" Style="width: 100%;" />
    </CarouselSlide>
    <CarouselSlide Name="2">
        <Image Source="..." Text="Coffee" Display="Display.Block" Style="width: 100%;" />
    </CarouselSlide>
    <CarouselSlide Name="3">
        <Image Source="..." Text="Mountain" Display="Display.Block" Style="width: 100%;" />
    </CarouselSlide>
</Carousel>
@code{
    private string selectedSlide = "2";
}

Attributes

Name Type Default Description
Autoplay boolean true Autoplays the carousel slides from left to right.
ShowIndicators boolean true Specifies whether to show an indicator for each slide.
ShowControls boolean true Specifies whether to show the controls that allows the user to navigate to the next or previous slide.
SelectedSlide string   Gets or sets currently selected slide name.
SelectedSlideChanged event   Occurs after the selected slide has changed.