Blazorise Carousel component

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

Overview

The Carousel component in Blazorise is a versatile and dynamic user interface element that facilitates the display of sequential content. This could include images, text, or any other HTML elements arranged in individual CarouselSlide components. The Carousel seamlessly transitions from one slide to another, either through user interaction or automatically over time, providing an interactive and engaging method of content presentation. It's highly customizable, fitting various use cases from image galleries to text-based slideshows, making it a valuable component in any modern web application.

  • <Carousel> main container.

    • <CarouselSlide> individual slide content, such as images, text, or other HTML elements.

Examples

Basic

A basic example of a Blazorise Carousel component includes multiple CarouselSlide components, each containing individual content. This Carousel displays one slide at a time, allowing users to navigate between the slides manually or automatically. Despite its simplicity, CarouselSlide components can house a variety of content, such as images, videos, or complex HTML structures. 
<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";
}

SwipeableNew

Enable Swipeable to let users navigate between slides with horizontal swipe gestures. Swipe handling is attached to the Carousel root element, so no extra wrapper markup is rendered. For image slides, native browser dragging is prevented by default while swiping; set SwipePreventNativeDrag="false" to keep native drag behavior. 
<Carousel @bind-SelectedSlide="@selectedSlide"
          Autoplay="false"
          Swipeable
          SwipeTouchAction="GestureTouchAction.PanY">
    <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 = "1";
}

Custom TemplatesNew

Use IndicatorTemplate, PreviousButtonTemplate, and NextButtonTemplate to replace the default navigation UI. Add Caption content to individual CarouselSlide components when slides need custom descriptive overlays. 
<Carousel @bind-SelectedSlide="@selectedSlide"
          Autoplay="false"
          Swipeable>
    <IndicatorTemplate Context="indicator">
        <Button Color="@(indicator.Active ? Color.Primary : Color.Light)"
                Size="Size.Small"
                Clicked="@indicator.Activate"
                Margin="Margin.Is1.FromEnd">
            @indicator.Number
        </Button>
    </IndicatorTemplate>
    <PreviousButtonTemplate Context="navigation">
        <Button Color="Color.Light"
                Outline
                Clicked="@navigation.Navigate"
                Position="Position.Absolute.Top.Is50.Start.Is0.Translate.MiddleY"
                Margin="Margin.Is3.FromStart">
            <Icon Name="IconName.ChevronLeft" />
        </Button>
    </PreviousButtonTemplate>
    <NextButtonTemplate Context="navigation">
        <Button Color="Color.Light"
                Outline
                Clicked="@navigation.Navigate"
                Position="Position.Absolute.Top.Is50.End.Is0.Translate.MiddleY"
                Margin="Margin.Is3.FromEnd">
            <Icon Name="IconName.ChevronRight" />
        </Button>
    </NextButtonTemplate>
    <ChildContent>
        <CarouselSlide Name="1">
            <ChildContent>
                <Image Source="img/gallery/1.jpg" Text="Lights image" Display="Display.Block" Width="Width.Is100" />
            </ChildContent>
            <Caption>
                <Div Background="Background.Dark" TextColor="TextColor.White" Padding="Padding.Is3" Position="Position.Absolute.Bottom.Is0.Start.Is0.End.Is0" Margin="Margin.Is3">
                    <Heading Size="HeadingSize.Is5" Margin="Margin.Is0.FromBottom">Lighting details</Heading>
                    <Paragraph Margin="Margin.Is1.FromTop.Is0.FromBottom">Use captions to describe product imagery or highlight a selected option.</Paragraph>
                </Div>
            </Caption>
        </CarouselSlide>
        <CarouselSlide Name="2">
            <ChildContent>
                <Image Source="img/gallery/2.jpg" Text="Keyboard image" Display="Display.Block" Width="Width.Is100" />
            </ChildContent>
            <Caption>
                <Div Background="Background.Dark" TextColor="TextColor.White" Padding="Padding.Is3" Position="Position.Absolute.Bottom.Is0.Start.Is0.End.Is0" Margin="Margin.Is3">
                    <Heading Size="HeadingSize.Is5" Margin="Margin.Is0.FromBottom">Accessory view</Heading>
                    <Paragraph Margin="Margin.Is1.FromTop.Is0.FromBottom">Templates can be combined with swipe gestures for product galleries.</Paragraph>
                </Div>
            </Caption>
        </CarouselSlide>
    </ChildContent>
</Carousel>

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

Best Practices

Uniform Sizes

For optimal Carousel functionality in Blazorise, maintain uniform dimensions across all slides. Inconsistent sizes can cause disruptive resizing during transitions. This can be prevented by defining consistent widths and heights through additional CSS styles. Uniform slide dimensions provide a smoother user experience and a more visually appealing Carousel component.

API

See the API reference for the parameters, events, methods, and related types available to the components covered on this page.

On this page