Carousel (slideshow) lets users display their items across multiple slides.

ForceAnimation (whole page)

Usage

Basic

<style>
    .number {
        position: absolute;
        top: 0.75rem;
        padding: 0.75rem;
        font-size: 0.75rem;
        color: #D7D7D7;
    }

    .image {
        width: 100%;
        height: 100%;
    }
</style>

<BitCarousel>
    <BitCarouselItem>
        <div class="numbertext">1 / 4</div>
        <img class="image" src="img1.jpg">
    </BitCarouselItem>
    <BitCarouselItem>
        <div class="numbertext">2 / 4</div>
        <img class="image" src="img2.jpg" />
    </BitCarouselItem>
    <BitCarouselItem>
        <div class="numbertext">3 / 4</div>
        <img class="image" src="img3.jpg" />
    </BitCarouselItem>
    <BitCarouselItem>
        <div class="numbertext">4 / 4</div>
        <img class="image" src="img4.jpg" />
    </BitCarouselItem>
</BitCarousel>

1 / 4

2 / 4

3 / 4

4 / 4

InfiniteScrolling

<style>
    .image {
        width: 100%;
        height: 100%;
    }

    .text-title {
        position: absolute;
        bottom: 3.4375rem;
        width: 100%;
        font-size: 0.9375rem;
        text-align: center;
        color: #FFFFFF;
    }

    .text-description {
        position: absolute;
        bottom: 1.875rem;
        width: 100%;
        font-size: 0.6875rem;
        text-align: center;
        color: #FFFFFF;
    }
</style>

<BitCarousel InfiniteScrolling>
    <BitCarouselItem>
        <img class="image" src="img1.jpg" />
        <div class="text-title">Aurora</div>
        <div class="text-description">This is Aurora and it's fantastic</div>
    </BitCarouselItem>
    <BitCarouselItem>
        <img class="image" src="img2.jpg" />
        <div class="text-title">Beautiful Mountain</div>
        <div class="text-description">This is a Beautiful Mountain and it's gorgeous</div>
    </BitCarouselItem>
    <BitCarouselItem>
        <img class="image" src="img3.jpg" />
        <div class="text-title">Forest In The Valley</div>
        <div class="text-description">This is a Forest In The Valley and it's beautiful</div>
    </BitCarouselItem>
    <BitCarouselItem>
        <img class="image" src="img4.jpg" />
        <div class="text-title">Road Among The Mountains</div>
        <div class="text-description">This is a Road Among The Mountains and it's amazing</div>
    </BitCarouselItem>
</BitCarousel>

Configure the BitCarousel component for infinite scrolling, allowing the carousel to loop through slides continuously.

Aurora

This is Aurora and it's fantastic

Beautiful Mountain

This is a Beautiful Mountain and it's gorgeous

Forest In The Valley

This is a Forest In The Valley and it's beautiful

Road Among The Mountains

This is a Road Among The Mountains and it's amazing

HideDots

<style>
    .image {
        width: 100%;
        height: 100%;
    }

    .text-title {
        position: absolute;
        bottom: 3.4375rem;
        width: 100%;
        font-size: 0.9375rem;
        text-align: center;
        color: #FFFFFF;
    }

    .text-description {
        position: absolute;
        bottom: 1.875rem;
        width: 100%;
        font-size: 0.6875rem;
        text-align: center;
        color: #FFFFFF;
    }
</style>

<BitCarousel HideDots>
    <BitCarouselItem>
        <div class="numbertext">1 / 4</div>
        <img class="image" src="img1.jpg" />
        <div class="text-title">Aurora</div>
        <div class="text-description">This is Aurora and it's fantastic</div>
    </BitCarouselItem>
    <BitCarouselItem>
        <div class="numbertext">2 / 4</div>
        <img class="image" src="img2.jpg" />
        <div class="text-title">Beautiful Mountain</div>
        <div class="text-description">This is a Beautiful Mountain and it's gorgeous</div>
    </BitCarouselItem>
    <BitCarouselItem>
        <div class="numbertext">3 / 4</div>
        <img class="image" src="img3.jpg" />
        <div class="text-title">Forest In The Valley</div>
        <div class="text-description">This is a Forest In The Valley and it's beautiful</div>
    </BitCarouselItem>
    <BitCarouselItem>
        <div class="numbertext">4 / 4</div>
        <img class="image" src="img4.jpg" />
        <div class="text-title">Road Among The Mountains</div>
        <div class="text-description">This is a Road Among The Mountains and it's amazing</div>
    </BitCarouselItem>
</BitCarousel>

Use the HideDots property to hide the navigation dots below the carousel slides.

1 / 4

Aurora

This is Aurora and it's fantastic

2 / 4

Beautiful Mountain

This is a Beautiful Mountain and it's gorgeous

3 / 4

Forest In The Valley

This is a Forest In The Valley and it's beautiful

4 / 4

Road Among The Mountains

This is a Road Among The Mountains and it's amazing

Public API

<style>
    .image {
        width: 100%;
        height: 100%;
    }

    .text-title {
        position: absolute;
        bottom: 3.4375rem;
        width: 100%;
        font-size: 0.9375rem;
        text-align: center;
        color: #FFFFFF;
    }

    .text-description {
        position: absolute;
        bottom: 1.875rem;
        width: 100%;
        font-size: 0.6875rem;
        text-align: center;
        color: #FFFFFF;
    }
</style>

<BitCarousel HideNextPrev @ref="carousel">
    <BitCarouselItem>
        <div class="numbertext">1 / 4</div>
        <img class="image" src="img1.jpg" />
        <div class="text-title">Aurora</div>
        <div class="text-description">This is Aurora and it's fantastic</div>
    </BitCarouselItem>
    <BitCarouselItem>
        <div class="numbertext">2 / 4</div>
        <img class="image" src="img2.jpg" />
        <div class="text-title">Beautiful Mountain</div>
        <div class="text-description">This is a Beautiful Mountain and it's gorgeous</div>
    </BitCarouselItem>
    <BitCarouselItem>
        <div class="numbertext">3 / 4</div>
        <img class="image" src="img3.jpg" />
        <div class="text-title">Forest In The Valley</div>
        <div class="text-description">This is a Forest In The Valley and it's beautiful</div>
    </BitCarouselItem>
    <BitCarouselItem>
        <div class="numbertext">4 / 4</div>
        <img class="image" src="img4.jpg" />
        <div class="text-title">Road Among The Mountains</div>
        <div class="text-description">This is a Road Among The Mountains and it's amazing</div>
    </BitCarouselItem>
</BitCarousel>

<BitButton OnClick="GoPrev">&lt; Prev</BitButton>
<BitButton OnClick="GoNext">Next &gt;</BitButton>

<BitButton OnClick="GoTo">GoTo</BitButton>
<BitNumberField @bind-Value="number" Min="1" Max="4" Mode="BitSpinButtonMode.Compact" />
@code {
    private int number = 1;
    private BitCarousel carousel;
    
    private async Task GoNext()
    {
        await carousel.GoNext();
    }
    
    private async Task GoPrev()
    {
        await carousel.GoPrev();
    }
    
    private async Task GoTo()
    {
        await carousel.GoTo(number);
    }
}

Use the public API of BitCarousel to control the slides programmatically. This example shows how to navigate slides using buttons.

1 / 4

Aurora

This is Aurora and it's fantastic

2 / 4

Beautiful Mountain

This is a Beautiful Mountain and it's gorgeous

3 / 4

Forest In The Valley

This is a Forest In The Valley and it's beautiful

4 / 4

Road Among The Mountains

This is a Road Among The Mountains and it's amazing

AutoPlay

<style>
    .image {
        width: 100%;
        height: 100%;
    }

    .text-title {
        position: absolute;
        bottom: 3.4375rem;
        width: 100%;
        font-size: 0.9375rem;
        text-align: center;
        color: #FFFFFF;
    }

    .text-description {
        position: absolute;
        bottom: 1.875rem;
        width: 100%;
        font-size: 0.6875rem;
        text-align: center;
        color: #FFFFFF;
    }
</style>

<BitCarousel HideNextPrev InfiniteScrolling AutoPlay AutoPlayInterval="2500">
    <BitCarouselItem>
        <div class="numbertext">1 / 4</div>
        <img class="image" src="img1.jpg" />
        <div class="text-title">Aurora</div>
        <div class="text-description">This is Aurora and it's fantastic</div>
    </BitCarouselItem>
    <BitCarouselItem>
        <div class="numbertext">2 / 4</div>
        <img class="image" src="img2.jpg" />
        <div class="text-title">Beautiful Mountain</div>
        <div class="text-description">This is a Beautiful Mountain and it's gorgeous</div>
    </BitCarouselItem>
    <BitCarouselItem>
        <div class="numbertext">3 / 4</div>
        <img class="image" src="img3.jpg" />
        <div class="text-title">Forest In The Valley</div>
        <div class="text-description">This is a Forest In The Valley and it's beautiful</div>
    </BitCarouselItem>
    <BitCarouselItem>
        <div class="numbertext">4 / 4</div>
        <img class="image" src="img4.jpg" />
        <div class="text-title">Road Among The Mountains</div>
        <div class="text-description">This is a Road Among The Mountains and it's amazing</div>
    </BitCarouselItem>
</BitCarousel>

Configure the BitCarousel to automatically transition between slides. The AutoPlay feature allows you to set the interval for automatic slide transitions.

1 / 4

Aurora

This is Aurora and it's fantastic

2 / 4

Beautiful Mountain

This is a Beautiful Mountain and it's gorgeous

3 / 4

Forest In The Valley

This is a Forest In The Valley and it's beautiful

4 / 4

Road Among The Mountains

This is a Road Among The Mountains and it's amazing

Advanced

<style>
    .item {
        text-align: center;
        color: black;
        border: 1px solid blue;
        background-color: lightblue;
    }

    .item div {
        transform: translate(0, 80%);
    }
</style>

<div>
    <BitCarousel Style="height: 100px" VisibleItemsCount="3" ScrollItemsCount="3">
        <BitCarouselItem Class="item"><div>1</div></BitCarouselItem>
        <BitCarouselItem Class="item"><div>2</div></BitCarouselItem>
        <BitCarouselItem Class="item"><div>3</div></BitCarouselItem>
        <BitCarouselItem Class="item"><div>4</div></BitCarouselItem>
        <BitCarouselItem Class="item"><div>5</div></BitCarouselItem>
        <BitCarouselItem Class="item"><div>6</div></BitCarouselItem>
        <BitCarouselItem Class="item"><div>7</div></BitCarouselItem>
        <BitCarouselItem Class="item"><div>8</div></BitCarouselItem>
        <BitCarouselItem Class="item"><div>9</div></BitCarouselItem>
    </BitCarousel>
</div>

Use BitCarousel with customized style, visible items count, and scroll items count for advanced scenarios.

External Icons

<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/7.0.1/css/all.min.css" />

<div>FontAwesome (circle-arrow icons):</div>
<BitCarousel InfiniteScrolling
             GoLeftIcon="@BitIconInfo.Fa("solid circle-arrow-right")"
             GoRightIcon="@BitIconInfo.Fa("solid circle-arrow-left")">
    <BitCarouselItem>
        <img class="image" src="_content/Bit.BlazorUI.Demo.Client.Core/images/carousel/img1.jpg" />
        <div class="text-title">Aurora</div>
        <div class="text-description">This is Aurora and it's fantastic</div>
    </BitCarouselItem>
    <BitCarouselItem>
        <img class="image" src="_content/Bit.BlazorUI.Demo.Client.Core/images/carousel/img2.jpg" />
        <div class="text-title">Beautiful Mountain</div>
        <div class="text-description">This is a Beautiful Mountain and it's gorgeous</div>
    </BitCarouselItem>
    <BitCarouselItem>
        <img class="image" src="_content/Bit.BlazorUI.Demo.Client.Core/images/carousel/img3.jpg" />
        <div class="text-title">Forest In The Valley</div>
        <div class="text-description">This is a Forest In The Valley and it's beautiful</div>
    </BitCarouselItem>
    <BitCarouselItem>
        <img class="image" src="_content/Bit.BlazorUI.Demo.Client.Core/images/carousel/img4.jpg" />
        <div class="text-title">Road Among The Mountains</div>
        <div class="text-description">This is a Road Among The Mountains and it's amazing</div>
    </BitCarouselItem>
</BitCarousel>

<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/[email protected]/font/bootstrap-icons.min.css" />

<div>Bootstrap Icons (arrow-left-circle / arrow-right-circle):</div>
<BitCarousel InfiniteScrolling
             GoLeftIcon="@BitIconInfo.Bi("arrow-right-circle")"
             GoRightIcon="@BitIconInfo.Bi("arrow-left-circle")">
    <BitCarouselItem>
        <img class="image" src="_content/Bit.BlazorUI.Demo.Client.Core/images/carousel/img1.jpg" />
        <div class="text-title">Aurora</div>
        <div class="text-description">This is Aurora and it's fantastic</div>
    </BitCarouselItem>
    <BitCarouselItem>
        <img class="image" src="_content/Bit.BlazorUI.Demo.Client.Core/images/carousel/img2.jpg" />
        <div class="text-title">Beautiful Mountain</div>
        <div class="text-description">This is a Beautiful Mountain and it's gorgeous</div>
    </BitCarouselItem>
    <BitCarouselItem>
        <img class="image" src="_content/Bit.BlazorUI.Demo.Client.Core/images/carousel/img3.jpg" />
        <div class="text-title">Forest In The Valley</div>
        <div class="text-description">This is a Forest In The Valley and it's beautiful</div>
    </BitCarouselItem>
    <BitCarouselItem>
        <img class="image" src="_content/Bit.BlazorUI.Demo.Client.Core/images/carousel/img4.jpg" />
        <div class="text-title">Road Among The Mountains</div>
        <div class="text-description">This is a Road Among The Mountains and it's amazing</div>
    </BitCarouselItem>
</BitCarousel>

Use icons from external libraries like FontAwesome, Material Icons, and Bootstrap Icons with the GoLeftIcon and GoRightIcon parameters.

FontAwesome (circle-arrow icons):

Aurora

This is Aurora and it's fantastic

Beautiful Mountain

This is a Beautiful Mountain and it's gorgeous

Forest In The Valley

This is a Forest In The Valley and it's beautiful

Road Among The Mountains

This is a Road Among The Mountains and it's amazing

Bootstrap Icons (arrow-left-circle / arrow-right-circle):

Aurora

This is Aurora and it's fantastic

Beautiful Mountain

This is a Beautiful Mountain and it's gorgeous

Forest In The Valley

This is a Forest In The Valley and it's beautiful

Road Among The Mountains

This is a Road Among The Mountains and it's amazing

RTL

<style>
    .item {
        text-align: center;
        color: black;
        border: 1px solid blue;
        background-color: lightblue;
    }

    .item div {
        transform: translate(0, 80%);
    }
</style>

<div>
    <BitCarousel Style="height: 100px" Dir="BitDir.Rtl" VisibleItemsCount="3" ScrollItemsCount="1" InfiniteScrolling>
        <BitCarouselItem Class="item"><div>یک</div></BitCarouselItem>
        <BitCarouselItem Class="item"><div>دو</div></BitCarouselItem>
        <BitCarouselItem Class="item"><div>سه</div></BitCarouselItem>
        <BitCarouselItem Class="item"><div>چهار</div></BitCarouselItem>
        <BitCarouselItem Class="item"><div>پنج</div></BitCarouselItem>
        <BitCarouselItem Class="item"><div>شیش</div></BitCarouselItem>
        <BitCarouselItem Class="item"><div>هفت</div></BitCarouselItem>
        <BitCarouselItem Class="item"><div>هشت</div></BitCarouselItem>
        <BitCarouselItem Class="item"><div>نه</div></BitCarouselItem>
    </BitCarousel>
</div>

Use BitCarousel in right-to-left (RTL).

یک

دو

سه

چهار

پنج

شیش

هفت

هشت

نه

API

BitCarousel parameters

Name	Type	Default value	Description
AnimationDuration	double	0.5	Sets the duration of the scrolling animation in seconds (the default value is 0.5).
AutoPlay	bool	false	Enables/disables the auto scrolling of the slides.
AutoPlayInterval	double	2000	Sets the interval of the auto scrolling in milliseconds (the default value is 2000).
ChildContent	RenderFragment?	null	Items of the carousel.
Classes	BitCarouselClassStyles?	null	The custom CSS classes for the different parts of the carousel.
GoLeftIcon	BitIconInfo?	null	Gets or sets the icon for the go to left button using custom CSS classes for external icon libraries. Takes precedence over GoLeftIconName when both are set.
GoLeftIconName	string?	null	Gets or sets the name of the icon for the go to left button from the built-in Fluent UI icons.
GoRightIcon	BitIconInfo?	null	Gets or sets the icon for the go to right button using custom CSS classes for external icon libraries. Takes precedence over GoRightIconName when both are set.
GoRightIconName	string?	null	Gets or sets the name of the icon for the go to right button from the built-in Fluent UI icons.
HideDots	bool	false	Hides the Dots indicator at the bottom of the BitCarousel.
HideNextPrev	bool	false	Hides the Next/Prev buttons of the BitCarousel.
InfiniteScrolling	bool	false	If enabled the carousel items will navigate in an infinite loop (first item comes after last item and last item comes before first item).
OnChange	EventCallback<int>		The event that will be called on carousel page navigation.
ScrollItemsCount	int	1	Number of items that is going to be changed on navigation.
Styles	BitCarouselClassStyles?	null	The custom CSS styles for the different parts of the carousel.
VisibleItemsCount	int	1	Number of items that is visible in the carousel.

BitCarousel public members

Name	Type	Description
GoNext	Task	Navigates to the next carousel item.
GoPrev	Task	Navigates to the previous carousel item.
GoTo	Task	Navigates to the given carousel item number.
Pause	Task	Pauses the AutoPlay if enabled.
Resume	Task	Resumes the AutoPlay if enabled.

BitComponentBase parameters

Name	Type	Default value	Description
AriaLabel	string?	null	Gets or sets the accessible label for the component, used by assistive technologies.
Class	string?	null	Gets or sets the CSS class name(s) to apply to the rendered element.
Dir	BitDir?	null	Gets or sets the text directionality for the component's content.
ForceAnimation	bool	false	Gets or sets a value indicating whether the component's animations play at their full duration even when reduced motion is requested.
HtmlAttributes	Dictionary<string, object>	new Dictionary<string, object>()	Captures additional HTML attributes to be applied to the rendered element, in addition to the component's parameters.
Id	string?	null	Gets or sets the unique identifier for the component's root element.
IsEnabled	bool	true	Gets or sets a value indicating whether the component is enabled and can respond to user interaction.
Style	string?	null	Gets or sets the CSS style string to apply to the rendered element.
TabIndex	string?	null	Gets or sets the tab order index for the component when navigating with the keyboard.
Visibility	BitVisibility	BitVisibility.Visible	Gets or sets the visibility state (visible, hidden, or collapsed) of the component.

BitComponentBase public members

Name	Type	Default value	Description
UniqueId	Guid	Guid.NewGuid()	Gets the readonly unique identifier for the component's root element, assigned when the component instance is constructed.
RootElement	ElementReference		Gets the reference to the root HTML element associated with this component.

BitTimelineClassStyles properties

The custom CSS classes and styles of the different parts of the BitCarousel.

Name	Type	Default value	Description
Root	string?	null	Custom CSS classes/styles for the root element of the BitCarousel.
Container	string?	null	Custom CSS classes/styles for the container of the BitCarousel.
Buttons	string?	null	Custom CSS classes/styles for the next/prev buttons of the BitCarousel.
GoLeftButton	string?	null	Custom CSS classes/styles for the go to left button of the BitCarousel.
GoLeftButtonIcon	string?	null	Custom CSS classes/styles for the icon of the go to left button of the BitCarousel.
GoRightButton	string?	null	Custom CSS classes/styles for the go to right button of the BitCarousel.
GoRightButtonIcon	string?	null	Custom CSS classes/styles for the icon of the go to right button of the BitCarousel.
DotsContainer	string?	null	Custom CSS classes/styles for the dots container of the BitCarousel.
Dots	string?	null	Custom CSS classes/styles for the dot elements of the BitCarousel.
CurrectDot	string?	null	Custom CSS classes/styles for the current dot element of the BitCarousel.

BitIconInfo properties

Name	Type	Default value	Description
Name	string?	null	Gets or sets the name of the icon.
BaseClass	string?	null	Gets or sets the base CSS class for the icon. For built-in Fluent UI icons, this defaults to "bit-icon". For external icon libraries like FontAwesome, you might set this to "fa" or leave empty.
Prefix	string?	null	Gets or sets the CSS class prefix used before the icon name. For built-in Fluent UI icons, this defaults to "bit-icon--". For external icon libraries, you might set this to "fa-" or leave empty.

BitVisibility enum

Name	Value	Description
Visible	0	The content of the component is visible.
Hidden	1	The content of the component is hidden, but the space it takes on the page remains (visibility:hidden).
Collapsed	2	The component is hidden (display:none).

BitDir enum

Name	Value	Description
Ltr	0	Ltr (left to right) is to be used for languages that are written from the left to the right (like English).
Rtl	1	Rtl (right to left) is to be used for languages that are written from the right to the left (like Arabic).
Auto	2	Auto lets the user agent decide. It uses a basic algorithm as it parses the characters inside the element until it finds a character with a strong directionality, then applies that directionality to the whole element.

Feedback

You can give us your feedback through our GitHub repo by filing a new Issue or starting a new Discussion.

Or you can review / edit this page on GitHub.

Or you can review / edit this component on GitHub.