Carousel - bit BlazorUI

Carousel

SlideShow

Carousel (slide-show) let people show their items in separate slides from two or more items.

Usage

Basic

1 / 4

2 / 4

3 / 4

4 / 4

<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>

InfiniteScrolling

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

<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>

HideDots

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

<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>

Public API

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

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

AutoPlay

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

<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>

Advanced

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

<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>

RTL

Use BitCarousel in right-to-left (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>

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	string?	null	The custom icon name for the go to left button at the right side of the carousel.
GoRightIcon	string?	null	The custom icon name for the go to right button at the left side of the carousel.
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	The aria-label of the control for the benefit of screen readers.
Class	string?	null	Custom CSS class for the root element of the component.
Dir	BitDir?	null	Determines the component direction.
HtmlAttributes	Dictionary<string, object>	new Dictionary<string, object>()	Capture and render additional attributes in addition to the component's parameters.
Id	string?	null	Custom id attribute for the root element. if null the UniqueId will be used instead.
IsEnabled	bool	true	Whether or not the component is enabled.
Style	string?	null	Custom CSS style for the root element of the component.
Visibility	BitVisibility	BitVisibility.Visible	Whether the component is visible, hidden or collapsed.

BitComponentBase public members

Name	Type	Default value	Description
UniqueId	Guid	Guid.NewGuid()	The readonly unique id of the root element. it will be assigned to a new Guid at component instance construction.
RootElement	ElementReference		The ElementReference of the root element.

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.

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.

On this page

Carousel SlideShow

SlideShow

Carousel (slide-show) let people show their items in separate slides from two or more items.

Usage

Basic

InfiniteScrolling

HideDots

Public API

AutoPlay

Advanced

RTL

API

BitCarousel parameters

Name

Type

Default value

Description

BitCarousel public members

Name

Type

Default value

Description

BitComponentBase parameters

Name

Type

Default value

Description

BitComponentBase public members

Name

Type

Default value

Description

BitTimelineClassStyles properties

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

Name

Type

Default value

Description

BitVisibility enum

Name

Value

Description

BitDir enum

Name

Value

Description

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.

Carousel

SlideShow