Blazorise Carousel component

Loop a series of images or texts in a limited space.

The Carousel component is used to display large numbers of visual content on a rotating timer. It also includes support for previous/next controls and indicators.

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

Basic Example

    <Carousel @bind-SelectedSlide="@selectedSlide">
    <CarouselSlide Name="1">
        <Image Source="img/gallery/1.jpg" Text="Lights image" Display="Display.Block" Width="Width.Is100" />
    </CarouselSlide>
    <CarouselSlide Name="2">
        <Image Source="img/gallery/2.jpg" Text="Keyboard image" Display="Display.Block" Width="Width.Is100" />
    </CarouselSlide>
    <CarouselSlide Name="3">
        <Image Source="img/gallery/3.jpg" Text="Road image" Display="Display.Block" Width="Width.Is100" />
    </CarouselSlide>
</Carousel>

    @code{
    private string selectedSlide = "2";
}

    API

    Attributes

    Name Description Type Default
    Autoplay Autoplays the carousel slides from left to right. bool true
    ShowIndicators Specifies whether to show an indicator for each slide. bool true
    ShowControls Specifies whether to show the controls that allows the user to navigate to the next or previous slide. bool true
    SelectedSlide Gets or sets currently selected slide name. string
    SelectedSlideChanged Occurs after the selected slide has changed. EventCallback<string>
    PreviousButtonLocalizer Function used to handle custom localization for previous button that will override a default ITextLocalizer. TextLocalizerHandler
    NextButtonLocalizer Function used to handle custom localization for next button that will override a default ITextLocalizer. TextLocalizerHandler
    AutoRepeat Auto-repeats the carousel slides once they reach the end. bool true
    Crossfade Animate slides with a fade transition instead of a slide. bool false
    Interval Defines the interval(in milliseconds) after which the item will automatically slide. double 2000
    On this page