Blazorise Carousel component

Present a sequence of images or content in a shared space.

Overview

Use the Carousel component for image galleries, featured content, or slideshows. Users can move between slides, or the carousel can advance automatically.

Structure

A Carousel contains one or more CarouselSlide components, each holding the content for a single slide.

  • <Carousel>Manages the slideshow and active slide.
    • <CarouselSlide>Contains an image, text, or other slide content.

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

SwipeableAdded in v2.2

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 TemplatesAdded in v2.2

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

AnimationAdded in v2.4

Set Animated="false" for immediate changes, or use AnimationDuration to adjust the duration in milliseconds. A null duration preserves the provider's default; zero or a negative value disables animations. These settings control the provider's existing animations, so providers that show this component immediately keep that behavior. AnimationDuration controls the slide transition; Interval still controls autoplay timing. Disabling animations also skips the transition waits. 
<Field>
    <Switch @bind-Value="animated">Animate transitions</Switch>
</Field>
<Field>
    <FieldLabel>Animation duration</FieldLabel>
    <FieldBody>
        <Select TValue="int?" @bind-Value="animationDuration">
            <SelectItem TValue="int?" Value="@((int?)null)">Provider default</SelectItem>
            <SelectItem TValue="int?" Value="0">Immediate</SelectItem>
            <SelectItem TValue="int?" Value="100">100 ms</SelectItem>
            <SelectItem TValue="int?" Value="200">200 ms</SelectItem>
            <SelectItem TValue="int?" Value="400">400 ms</SelectItem>
            <SelectItem TValue="int?" Value="1000">1000 ms</SelectItem>
        </Select>
    </FieldBody>
</Field>

<Field>
    <Switch @bind-Value="crossfade">Crossfade</Switch>
</Field>
<Carousel Autoplay="false" Crossfade="@crossfade" Animated="@animated" AnimationDuration="@animationDuration">
    <CarouselSlide Name="1">
        <Image Source="img/gallery/1.jpg" Text="Lights" Display="Display.Block" Width="Width.Is100" />
    </CarouselSlide>
    <CarouselSlide Name="2">
        <Image Source="img/gallery/2.jpg" Text="Keyboard" Display="Display.Block" Width="Width.Is100" />
    </CarouselSlide>
    <CarouselSlide Name="3">
        <Image Source="img/gallery/3.jpg" Text="Road" Display="Display.Block" Width="Width.Is100" />
    </CarouselSlide>
</Carousel>

@code {
    private bool animated = true;

    private int? animationDuration;

    private bool crossfade;
}

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