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

Parameters

Carousel

Parameter	Description	Type	Default
`Autoplay`	Determines whether playback starts automatically.	`bool`	`false`
`AutoRepeat`	Auto-repeats the carousel slides once they reach the end.	`bool`	`false`
`ChildContent`	Specifies the content to be rendered inside this Carousel.	`RenderFragment`	`null`
`Crossfade`	Animate slides with a fade transition instead of a slide.	`bool`	`false`
`IndicatorTemplate`	Specifies a template for rendering carousel indicators.	`RenderFragment<CarouselIndicatorContext>`	`null`
`Interval`	Specifies the interval (in milliseconds) after which the item will automatically slide.	`double`	`2000`
`NextButtonLocalizer`	Function used to handle custom localization for next button that will override a default ITextLocalizer.	`TextLocalizerHandler`	`null`
`NextButtonTemplate`	Specifies a template for rendering the next navigation button.	`RenderFragment<CarouselNavigationContext>`	`null`
`PreviousButtonLocalizer`	Function used to handle custom localization for previous button that will override a default ITextLocalizer.	`TextLocalizerHandler`	`null`
`PreviousButtonTemplate`	Specifies a template for rendering the previous navigation button.	`RenderFragment<CarouselNavigationContext>`	`null`
`SelectedSlide`	Specifies the currently selected slide name.	`string`
`ShowControls`	Specifies whether to show the controls that allows the user to navigate to the next or previous slide.	`bool`	`true`
`ShowIndicators`	Specifies whether to show an indicator for each slide.	`bool`	`true`
`Swipeable`	Specifies whether horizontal swipe gestures can navigate between slides.	`bool`	`false`
`SwipePreventNativeDrag`	Specifies whether native browser dragging is prevented while swipe gestures are active.	`bool`	`true`
`SwipeThreshold`	Specifies the minimum swipe distance in pixels.	`double`	`50`
`SwipeTouchAction`	Specifies the browser touch-action behavior applied while swipe gestures are active. Possible values:`Auto`, `None`, `PanX`, `PanY`, `Manipulation`	`GestureTouchAction`	`GestureTouchAction.PanY`
`SwipeVelocityThreshold`	Specifies the minimum swipe velocity in pixels per millisecond.	`double`	`0.3`

CarouselSlide

Parameter	Description	Type	Default
`Caption`	Specifies the caption content to be rendered inside this CarouselSlide.	`RenderFragment`	`null`
`ChildContent`	Specifies the content to be rendered inside this CarouselSlide.	`RenderFragment`	`null`
`Interval`	Specifies the interval (in milliseconds) after which this item will automatically slide.	`int?`	`null`
`Name`	Specifies the slide name.	`string`

Events

Carousel

Event	Description	Type
`SelectedSlideChanged`	Occurs after the selected slide has changed.	`EventCallback<string>`

Methods

Carousel

Method	Description	Return	Parameters
`SelectNext`	Selects the next slide in a sequence, relative to the current slide.	`Task`
`SelectPrevious`	Selects the previous slide in a sequence, relative to the current slide.	`Task`
`Select`	Selects the slide by its name.	`Task`	`string name`
`SlideIndex`	Gets the index of the slide with the specified name.	`int`	`string slideName`

CarouselSlide

Method	Description	Return	Parameters
`Activate`	Makes this slide active.	`Task`

Blazorise Carousel component

Overview

Examples

Basic

SwipeableNew

Custom TemplatesNew

Best Practices

Uniform Sizes

API

Parameters

Carousel

CarouselSlide

Events

Carousel

Methods

Carousel

CarouselSlide

On this page