Edit on Github

Carousel

in namespace DotVVM.Controls.Tailwind.Controls

Renders a carousel with navigation arrows, indicators, autoplay, and optional caption content.

Usage & Scenarios

Displays a carousel from hard-coded slides or a bound DataSource. Use HideNavigation, HideIndicators, HideTextOrContent, AutoCycleInterval, and UseAspectRatio to adjust the current Tailwind carousel behavior.

Sample 1: Basic carousel

A basic Carousel with hard-coded CarouselItem children. The first slide uses the plain Text property, while the others use inner content for richer captions.

<t:Carousel>
    <t:CarouselItem ImageUrl="https://picsum.photos/id/1018/1200/800" Text="Scenic mountain at golden hour" />
    <t:CarouselItem ImageUrl="https://picsum.photos/id/1025/1200/800">
        <h3 class="text-xl font-semibold mb-1 line-clamp-1">Wild Nature</h3>
        <p class="text-base text-white/80 line-clamp-1">A young bear cub exploring its natural forest habitat.</p>
    </t:CarouselItem>
    <t:CarouselItem ImageUrl="https://picsum.photos/id/1037/1200/800">
        <h3 class="text-xl font-semibold mb-1 line-clamp-1">Misty Forest</h3>
        <p class="text-base text-white/80 line-clamp-1">Ancient trees wrapped in morning fog deep in the wilderness.</p>
    </t:CarouselItem>
</t:Carousel>

Sample 2: Data-bound slides

Binds the carousel to a collection using DataSource, ItemImageUrl, and ItemText. This is the current API for generating slides from the viewmodel.

<t:Carousel DataSource="{value: Slides}"
            ItemImageUrl="{value: ImageUrl}"
            ItemText="{value: Title}" />

using System.Collections.Generic;
using DotVVM.Framework.ViewModel;

public class ViewModel : DotvvmViewModelBase
{
    public List<SlideData> Slides { get; set; } = new()
    {
        new() { Title = "Scenic mountain", ImageUrl = "https://picsum.photos/id/1018/1200/800" },
        new() { Title = "Wild nature", ImageUrl = "https://picsum.photos/id/1025/1200/800" },
        new() { Title = "Misty forest", ImageUrl = "https://picsum.photos/id/1037/1200/800" }
    };

    public class SlideData
    {
        public string Title { get; set; } = "";
        public string ImageUrl { get; set; } = "";
    }
}

Sample 3: Custom aspect ratio

Sets UseAspectRatio to a CSS aspect-ratio value. The current API expects a string such as 4 / 3 or 16 / 9, not a boolean flag.

<t:Carousel UseAspectRatio="4 / 3">
    <t:CarouselItem ImageUrl="https://picsum.photos/id/1018/1200/800">
        <h3 class="text-xl font-semibold mb-1 line-clamp-1">Scenic Mountain</h3>
        <p class="text-base text-white/80 line-clamp-1">Breathtaking views from the Alpine peaks at golden hour.</p>
    </t:CarouselItem>
    <t:CarouselItem ImageUrl="https://picsum.photos/id/1025/1200/800">
        <h3 class="text-xl font-semibold mb-1 line-clamp-1">Wild Nature</h3>
        <p class="text-base text-white/80 line-clamp-1">A young bear cub exploring its natural forest habitat.</p>
    </t:CarouselItem>
    <t:CarouselItem ImageUrl="https://picsum.photos/id/1037/1200/800">
        <h3 class="text-xl font-semibold mb-1 line-clamp-1">Misty Forest</h3>
        <p class="text-base text-white/80 line-clamp-1">Ancient trees wrapped in morning fog deep in the wilderness.</p>
    </t:CarouselItem>
</t:Carousel>

Sample 4: Hidden navigation UI

Hides both the previous/next buttons and the indicator dots using HideNavigation="true" and HideIndicators="true".

<t:Carousel HideNavigation="true" HideIndicators="true">
    <t:CarouselItem ImageUrl="https://picsum.photos/id/1018/1200/800">
        <h3 class="text-xl font-semibold mb-1 line-clamp-1">Scenic Mountain</h3>
        <p class="text-base text-white/80 line-clamp-1">Breathtaking views from the Alpine peaks at golden hour.</p>
    </t:CarouselItem>
    <t:CarouselItem ImageUrl="https://picsum.photos/id/1025/1200/800">
        <h3 class="text-xl font-semibold mb-1 line-clamp-1">Wild Nature</h3>
        <p class="text-base text-white/80 line-clamp-1">A young bear cub exploring its natural forest habitat.</p>
    </t:CarouselItem>
    <t:CarouselItem ImageUrl="https://picsum.photos/id/1037/1200/800">
        <h3 class="text-xl font-semibold mb-1 line-clamp-1">Misty Forest</h3>
        <p class="text-base text-white/80 line-clamp-1">Ancient trees wrapped in morning fog deep in the wilderness.</p>
    </t:CarouselItem>
</t:Carousel>

Sample 5: No caption

Set HideTextOrContent="true" to suppress the caption overlay even when the slides define Text or inner content.

<t:Carousel HideTextOrContent="true">
    <t:CarouselItem ImageUrl="https://picsum.photos/id/1018/1200/800">
        <h3 class="text-xl font-semibold mb-1 line-clamp-1">Scenic Mountain</h3>
        <p class="text-base text-white/80 line-clamp-1">Breathtaking views from the Alpine peaks at golden hour.</p>
    </t:CarouselItem>
    <t:CarouselItem ImageUrl="https://picsum.photos/id/1025/1200/800">
        <h3 class="text-xl font-semibold mb-1 line-clamp-1">Wild Nature</h3>
        <p class="text-base text-white/80 line-clamp-1">A young bear cub exploring its natural forest habitat.</p>
    </t:CarouselItem>
    <t:CarouselItem ImageUrl="https://picsum.photos/id/1037/1200/800">
        <h3 class="text-xl font-semibold mb-1 line-clamp-1">Misty Forest</h3>
        <p class="text-base text-white/80 line-clamp-1">Ancient trees wrapped in morning fog deep in the wilderness.</p>
    </t:CarouselItem>
</t:Carousel>

Sample 6: Auto cycle

Set AutoCycleInterval to a positive number of milliseconds to auto-advance slides.

<t:Carousel AutoCycleInterval="3000">
    <t:CarouselItem ImageUrl="https://picsum.photos/id/1018/1200/800">
        <h3 class="text-xl font-semibold mb-1 line-clamp-1">Scenic Mountain</h3>
        <p class="text-base text-white/80 line-clamp-1">Breathtaking views from the Alpine peaks at golden hour.</p>
    </t:CarouselItem>
    <t:CarouselItem ImageUrl="https://picsum.photos/id/1025/1200/800">
        <h3 class="text-xl font-semibold mb-1 line-clamp-1">Wild Nature</h3>
        <p class="text-base text-white/80 line-clamp-1">A young bear cub exploring its natural forest habitat.</p>
    </t:CarouselItem>
    <t:CarouselItem ImageUrl="https://picsum.photos/id/1037/1200/800">
        <h3 class="text-xl font-semibold mb-1 line-clamp-1">Misty Forest</h3>
        <p class="text-base text-white/80 line-clamp-1">Ancient trees wrapped in morning fog deep in the wilderness.</p>
    </t:CarouselItem>
</t:Carousel>

Properties

Name Type Description Notes Default Value
property icon AutoCycleInterval Int32 Gets or sets the autoplay interval in milliseconds. Set to 0 to disable autoplay.
attribute
inner element
static value
bindable
default
 0
property icon DataSource IValueBinding<IEnumerable<Object>> Gets or sets the data source used to generate carousel items.
attribute
inner element
static value
bindable
default
 null
property icon HideIndicators Boolean Gets or sets whether the indicator buttons below the carousel are hidden.
attribute
inner element
static value
bindable
default
 False
property icon HideNavigation Boolean Gets or sets whether the previous and next buttons are hidden.
attribute
inner element
static value
bindable
default
 False
property icon HideTextOrContent Boolean Gets or sets whether slide text or content is hidden.
attribute
inner element
static value
bindable
default
 False
property icon ItemContent List<DotvvmControl> Gets or sets the slide caption content when DataSource is used.
attribute
inner element
static value
bindable
default
 null
property icon ItemImageUrl String Gets or sets the background image URL for each generated slide.
attribute
inner element
static value
bindable
default
 null
property icon Items List<CarouselItem> Gets or sets the hardcoded carousel items.
attribute
inner element
static value
bindable
default
 null
property icon ItemText String Gets or sets the slide caption text when DataSource is used.
attribute
inner element
static value
bindable
default
 null
property icon UseAspectRatio String Gets or sets the CSS aspect-ratio value applied to each slide.
attribute
inner element
static value
bindable
default
 null
property icon Visible Boolean Gets or sets whether the control is visible. When set to false, `style="display: none"` will be added to this control.
attribute
inner element
static value
bindable
default
 True

HTML produced by the control

Information about cookies

We use cookies to analyze our traffic, personalize content and ads, and to provide some social media features. We also share information about your use of our site with our social media, advertising and analytics partners who may combine it with other information that you've provided to them or that they've collected from your use of their services.

Edit options

Information about cookies

We use cookies to analyze our traffic, personalize content and ads, and to provide some social media features. We also share information about your use of our site with our social media, advertising and analytics partners who may combine it with other information that you've provided to them or that they've collected from your use of their services.

Choose which cookies you want to enable

Necessary cookies Always allowed

Necessary cookies are essential and maintain information based on your activity on our site, like remembering your signed in account, selection of your language, or products added to the shopping cart. The website cannot work properly without these cookies.

Google Analytics

We use these cookies to measure, collect, analyse and report how users interact with our sites to better understand their behavior. Thanks to this, we can improve the site and provide better experience. The analytics service is provided by Google Inc.

Google Ads

We use these cookies to measure conversions from our advertisement and banners distributed via Google Ads. This allows us to better target the ads and make them more relevant to you.

Facebook Pixel

We use these cookies to measure conversions from our advertisement and banners distributed via Facebook. This allows us to better target the ads and make them more relevant to you.

Smartlook

We use these cookies to measure, collect, analyse and report how users interact with our sites to better understand their behavior. Thanks to this, we can improve the site and provide better experience. The analytics service is provided by Smartlook.

Google ads user data

Google ads ad personalization