Blazor Vertical Carousel

Enables developers to showcase content vertically in a smooth and interactive manner, making it an ideal choice for displaying images, cards, or any other type of dynamic content on web applications.

Features:

JavaScript Independence: This component operates seamlessly without requiring JavaScript, offering a lightweight and straightforward solution.

Appearance customization: Customizable styles and themes.

Rendering options: Render your component as various HTML tags for maximum flexibility and integration.

Learn about core component features

Simple carousel:

<BlazorVerticalCarousel>
    <BlazorVerticalCarouselItemSlider>
        <BlazorVerticalCarouselItem>
            <img src="..." />
        </BlazorVerticalCarouselItem>
        <BlazorVerticalCarouselItem>
            <img src="..." />
        </BlazorVerticalCarouselItem>
        <BlazorVerticalCarouselItem>
            <img src="..." />
        </BlazorVerticalCarouselItem>
        <BlazorVerticalCarouselItem>
            <img src="..." />
        </BlazorVerticalCarouselItem>
    </BlazorVerticalCarouselItemSlider>
    <BlazorVerticalCarouselPreviousButton ScreenReaderText="Switch previous" />
    <BlazorVerticalCarouselNextButton ScreenReaderText="Switch next" />
</BlazorVerticalCarousel>

Appearance Customization

Learn about Theme Feature
Component & Variants CSS class
BlazorVerticalCarousel blazor-vertical-carousel
BlazorVerticalCarouselItemSlider blazor-vertical-carousel-item-list
BlazorVerticalCarouselItem blazor-vertical-carousel-item
BlazorVerticalCarouselPreviousButton blazor-vertical-carousel-control-prev
BlazorVerticalCarouselNextButton blazor-vertical-carousel-control-next
BlazorVerticalCarouselButtonIcon.previous blazor-vertical-carousel-control-prev-icon
BlazorVerticalCarouselButtonIcon.next blazor-vertical-carousel-control-next-icon
BlazorVerticalCarouselIndicator.bar blazor-vertical-carousel-indicators-bar
BlazorVerticalCarouselIndicator.line blazor-vertical-carousel-indicators-obj blazor-vertical-carousel-indicators-line
BlazorVerticalCarouselIndicator.circle blazor-vertical-carousel-indicators-obj blazor-vertical-carousel-indicators-circle
BlazorVerticalCarouselIndicator.square blazor-vertical-carousel-indicators-obj blazor-vertical-carousel-indicators-square
BlazorVerticalCarouselIndicator.active blazor-vertical-carousel-indicators-obj-active

Parameters

BlazorVerticalCarousel

Name Type Description
RenderAs string Specifies the HTML tag to be used for rendering the component. This can be any valid HTML tag, such as div, span, button, or other suitable tags.

BlazorVerticalCarouselIndicator

Name Type Description
RenderAs string Specifies the HTML tag to be used for rendering the component. This can be any valid HTML tag, such as div, span, button, or other suitable tags.
Variants string[] Specifies the variant of the component.
ScreenReaderText string Allows developers to specify alternative text that is accessible to screen readers. By including descriptive text using this parameter, developers ensure that users with visual impairments or who rely on assistive technologies can comprehend the purpose

BlazorVerticalCarouselItem

Name Type Description
RenderAs string Specifies the HTML tag to be used for rendering the component. This can be any valid HTML tag, such as div, span, button, or other suitable tags.
Variants string[] Specifies the variant of the component.

BlazorVerticalCarouselItemSlider

Name Type Description
RenderAs string Specifies the HTML tag to be used for rendering the component. This can be any valid HTML tag, such as div, span, button, or other suitable tags.

BlazorVerticalCarouselNextButton

Name Type Description
RenderAs string Specifies the HTML tag to be used for rendering the component. This can be any valid HTML tag, such as div, span, button, or other suitable tags.
Variants string[] Specifies the variant of the component.
ScreenReaderText string Allows developers to specify alternative text that is accessible to screen readers. By including descriptive text using this parameter, developers ensure that users with visual impairments or who rely on assistive technologies can comprehend the purpose

BlazorVerticalCarouselPreviousButton

Name Type Description
RenderAs string Specifies the HTML tag to be used for rendering the component. This can be any valid HTML tag, such as div, span, button, or other suitable tags.
Variants string[] Specifies the variant of the component.
ScreenReaderText string Allows developers to specify alternative text that is accessible to screen readers. By including descriptive text using this parameter, developers ensure that users with visual impairments or who rely on assistive technologies can comprehend the purpose

Methods

BlazorVerticalCarousel

Name Description
ActivateNextItem() Activate the next item of the carousel.
ActivatePreviousItem() Activate the previous item of the carousel.
ActivateItem(int itemIndex) Activate a specific item of the carousel. The itemIndex parameter is 0 based.
An error has occurred. This application may no longer respond until reloaded. Reload 🗙