Syncfusion Blazor Carousel

Syncfusion Blazor Carousel

A comprehensive guide for implementing the Syncfusion Blazor Carousel component - an interactive slideshow for cycling through images, text, or custom content with navigation controls, indicators, and animation effects.

When to Use This Skill

Use this skill when the user needs to:

• Create image galleries or photo carousels
• Build product showcase sliders with multiple items
• Implement content rotation with automatic transitions
• Add slideshow presentations with navigation controls
• Create rotating banners or hero sections
• Display testimonials or reviews in a sliding format
• Build partial-visible slide layouts (showing previous/next items)
• Implement accessible carousels with keyboard navigation
• Customize slide transitions with animations
• Add play/pause controls for slide automation

Component Overview

The Syncfusion Blazor Carousel is a navigation component that allows users to browse through a collection of items in a cyclic manner. It supports:

• Multiple Animation Effects: Slide, Fade, or custom CSS animations
• Navigation Controls: Previous/Next buttons with customizable templates
• Indicators: Visual slide position markers with multiple types (Default, Dynamic, Fraction, Progress)
• Accessibility: Full WCAG 2.2 compliance with keyboard navigation and ARIA attributes
• Touch Support: Swipe gestures for mobile devices
• Partial Views: Show adjacent slides alongside the active slide
• Auto Play: Automatic slide transitions with configurable intervals
• Theming: CSS customization for complete visual control

Documentation and Navigation Guide

Getting Started

📄 Read: references/getting-started.md

When the user needs to:

• Install and configure the Carousel package
• Add required namespaces and register services
• Reference theme stylesheets and scripts
• Create a basic carousel with items
• Render initial carousel implementation

Populating Items and Selection

📄 Read: references/populating-items.md

When the user needs to:

• Add carousel items using CarouselItem
• Set the initial selected slide
• Navigate programmatically to specific slides
• Implement partial visible slides (showing adjacent items)
• Configure loop behavior with partial slides
• Use SelectedIndex for slide selection
• Call PreviousAsync/NextAsync methods

Navigators and Indicators

📄 Read: references/navigators-and-indicators.md

When the user needs to:

• Show or hide previous/next navigation buttons
• Display navigators only on hover
• Customize navigator button templates
• Configure indicator visibility and appearance
• Create custom indicator templates
• Show slide previews in indicators
• Use different indicator types (Default, Dynamic, Fraction, Progress)
• Add play/pause button functionality
• Customize play button template

Accessibility

📄 Read: references/accessibility.md

When the user needs to:

• Ensure WCAG 2.2 and Section 508 compliance
• Understand WAI-ARIA attributes applied to carousel
• Configure keyboard navigation
• Learn keyboard shortcuts (Arrow keys, Home, End, Space, Enter)
• Enable or disable keyboard interaction
• Support assistive technologies

Animations and Transitions

📄 Read: references/animations-and-transitions.md

When the user needs to:

• Apply built-in animation effects (Slide or Fade)
• Create custom animations with CSS
• Set different intervals for each slide
• Enable or disable auto play
• Configure pause on hover behavior
• Control infinite looping of slides
• Handle slide change events
• Enable or disable touch swipe
• Configure swipe modes (Touch, Mouse, or both)

Styles and Appearance

📄 Read: references/styles-and-appearance.md

When the user needs to:

• Understand CSS class structure
• Customize indicator appearance and spacing
• Modify navigator position and styling
• Adjust partial slide sizing
• Override default carousel styles
• Use Theme Studio for custom themes

Quick Start Example

Here's a minimal carousel implementation with image slides:

@using Syncfusion.Blazor.Navigations

<SfCarousel>
    <CarouselItem>
        <figure>
            <img src="images/bridge.png" alt="Bridge" style="height:100%;width:100%;" />
            <figcaption>Golden Gate Bridge</figcaption>
        </figure>
    </CarouselItem>
    <CarouselItem>
        <figure>
            <img src="images/trees.png" alt="Trees" style="height:100%;width:100%;" />
            <figcaption>Spring Flower Trees</figcaption>
        </figure>
    </CarouselItem>
    <CarouselItem>
        <figure>
            <img src="images/waterfall.png" alt="Waterfall" style="height:100%;width:100%;" />
            <figcaption>Oddadalen Waterfalls</figcaption>
        </figure>
    </CarouselItem>
</SfCarousel>

Prerequisites: Ensure you have installed Syncfusion.Blazor.Navigations package and registered the Syncfusion Blazor service in Program.cs. See Getting Started for setup details.

Common Patterns

Pattern 1: Auto-Playing Carousel with Pause on Hover

<SfCarousel AutoPlay="true" 
            PauseOnHover="true" 
            Interval="3000">
    <CarouselItem>
        <div>Slide 1 Content</div>
    </CarouselItem>
    <CarouselItem>
        <div>Slide 2 Content</div>
    </CarouselItem>
    <CarouselItem>
        <div>Slide 3 Content</div>
    </CarouselItem>
</SfCarousel>

When to use: Product showcases, promotional banners where automatic rotation is desired but users need control to pause on hover.

Pattern 2: Carousel with Hidden Navigators and Progress Indicator

<SfCarousel ButtonsVisibility="CarouselButtonVisibility.Hidden"
            IndicatorsType="CarouselIndicatorType.Progress"
            ShowIndicators="true">
    <CarouselItem>
        <div>Slide 1</div>
    </CarouselItem>
    <CarouselItem>
        <div>Slide 2</div>
    </CarouselItem>
    <CarouselItem>
        <div>Slide 3</div>
    </CarouselItem>
</SfCarousel>

When to use: Clean minimal design with progress bar showing slide position, suitable for mobile-first designs relying on touch swipe.

Pattern 3: Partial Visible Slides (Preview Mode)

<SfCarousel PartialVisible="true" 
            Loop="true">
    <CarouselItem>
        <img src="images/image1.png" alt="Image 1" />
    </CarouselItem>
    <CarouselItem>
        <img src="images/image2.png" alt="Image 2" />
    </CarouselItem>
    <CarouselItem>
        <img src="images/image3.png" alt="Image 3" />
    </CarouselItem>
    <CarouselItem>
        <img src="images/image4.png" alt="Image 4" />
    </CarouselItem>
</SfCarousel>

When to use: Image galleries where showing adjacent slides provides context and encourages navigation.

Pattern 4: Programmatic Navigation with Buttons

@using Syncfusion.Blazor.Navigations
@using Syncfusion.Blazor.Buttons

<SfCarousel @ref="CarouselRef" 
            ButtonsVisibility="CarouselButtonVisibility.Hidden">
    <CarouselItem><div>Slide 1</div></CarouselItem>
    <CarouselItem><div>Slide 2</div></CarouselItem>
    <CarouselItem><div>Slide 3</div></CarouselItem>
</SfCarousel>

<div class="custom-controls">
    <SfButton @onclick="@(async () => await CarouselRef.PreviousAsync())">Previous</SfButton>
    <SfButton @onclick="@(async () => await CarouselRef.NextAsync())">Next</SfButton>
</div>

@code {
    SfCarousel CarouselRef;
}

When to use: Custom UI designs requiring external navigation controls separate from the carousel component.

Pattern 5: Fade Animation with Custom Intervals

<SfCarousel AnimationEffect="CarouselAnimationEffect.Fade">
    <CarouselItem Interval="2000">
        <div>Quick Slide (2s)</div>
    </CarouselItem>
    <CarouselItem Interval="4000">
        <div>Medium Slide (4s)</div>
    </CarouselItem>
    <CarouselItem Interval="6000">
        <div>Long Slide (6s)</div>
    </CarouselItem>
</SfCarousel>

When to use: Content with varying complexity where some slides need more viewing time than others.

Pattern 6: Carousel with Selected Index Binding

<SfCarousel @bind-SelectedIndex="@CurrentSlide">
    <CarouselItem><div>Slide 1</div></CarouselItem>
    <CarouselItem><div>Slide 2</div></CarouselItem>
    <CarouselItem><div>Slide 3</div></CarouselItem>
</SfCarousel>

<p>Current Slide: @CurrentSlide</p>

@code {
    private int CurrentSlide = 0;
}

When to use: Tracking current slide position, synchronizing multiple carousels, or triggering actions based on slide changes.

Key Properties Reference

Common Use Cases

1. E-commerce Product Galleries: Display multiple product images with navigation 2. Hero Banners: Rotating promotional content on landing pages 3. Testimonial Sliders: Cycling through customer reviews 4. Before/After Showcases: Image comparisons with slide transitions 5. Portfolio Displays: Presenting project images or case studies 6. News/Article Highlights: Featured content rotation 7. Onboarding Tutorials: Step-by-step guide slides 8. Image Lightboxes: Full-screen image viewing with navigation

Next Steps

• For setup and installation → Read Getting Started
• For item management → Read Populating Items
• For UI customization → Read Navigators and Indicators
• For accessibility compliance → Read Accessibility
• For animations → Read Animations and Transitions
• For styling → Read Styles and Appearance

Accessibility

Table of Contents

• Accessibility Compliance
• WAI-ARIA Attributes
• Keyboard Interaction
• Disabling Keyboard Interaction

Accessibility Compliance

The Blazor Carousel component has been designed following WAI-ARIA specifications and implements WAI-ARIA roles, states, and properties along with keyboard support. This makes the component usable for people who rely on assistive technologies.

Standards Supported

The carousel complies with the following accessibility standards:

The component has been tested with major assistive technologies and meets requirements for:

• ADA (Americans with Disabilities Act) compliance
• Section 508 federal accessibility standards
• WCAG 2.2 Level AA guidelines

WAI-ARIA Attributes

The Blazor Carousel component implements the following ARIA attributes to provide information about elements for assistive technology:

How ARIA Attributes Work

aria-roledescription:

• Tells screen readers this is a "carousel" component
• Each slide is identified as a "slide"

aria-label:

• Navigation buttons are labeled "Previous", "Next", "Play", "Pause"
• Indicators are labeled with their position (e.g., "Go to slide 1")

aria-current:

• Marks the active indicator dot/element as current
• Helps users understand which slide is displayed

aria-hidden:

• Hides inactive slides from screen readers
• Prevents confusion by focusing only on visible content
• Automatically managed as slides change

aria-live:

• When auto-play is ON: Set to "off" to avoid interrupting users
• When auto-play is OFF: Set to "polite" to announce slide changes
• Balances information with user experience

aria-role="group":

• Groups each slide's content together
• Helps screen readers understand slide boundaries

Keyboard Interaction

The carousel implements full keyboard navigation support following WAI-ARIA practices. Once the carousel has focus, users can interact using the following keys:

Keyboard Shortcuts

Default Behavior

Keyboard interaction is enabled by default through the AllowKeyboardInteraction property (set to true). Users can navigate slides immediately after the carousel receives focus.

Example with default keyboard navigation:

@using Syncfusion.Blazor.Navigations

<SfCarousel>
    <CarouselItem>
        <div class="slide-content">Slide 1</div>
    </CarouselItem>
    <CarouselItem>
        <div class="slide-content">Slide 2</div>
    </CarouselItem>
    <CarouselItem>
        <div class="slide-content">Slide 3</div>
    </CarouselItem>
</SfCarousel>

Users can immediately use arrow keys to navigate once the carousel has focus.

Disabling Keyboard Interaction

In some scenarios, you may want to disable keyboard navigation, particularly when:

• The carousel contains input elements (textboxes, buttons, etc.)
• Arrow key presses should not trigger slide changes
• You want to prevent accidental navigation

Set AllowKeyboardInteraction="false" to disable default keyboard shortcuts:

@using Syncfusion.Blazor.Navigations

<SfCarousel AllowKeyboardInteraction="false">
    <CarouselItem>
        <div class="slide-content">
            <h3>Contact Form</h3>
            <input type="text" placeholder="Name" />
            <input type="email" placeholder="Email" />
            <textarea placeholder="Message"></textarea>
        </div>
    </CarouselItem>
    <CarouselItem>
        <div class="slide-content">
            <h3>Survey</h3>
            <input type="text" placeholder="Question 1" />
            <input type="text" placeholder="Question 2" />
        </div>
    </CarouselItem>
    <CarouselItem>
        <div class="slide-content">
            <h3>Thank You</h3>
            <p>Your submission has been received.</p>
        </div>
    </CarouselItem>
</SfCarousel>

<style>
    .slide-content {
        padding: 2rem;
    }

    .slide-content input,
    .slide-content textarea {
        display: block;
        margin: 0.5rem 0;
        width: 100%;
        padding: 0.5rem;
    }
</style>

When to disable keyboard interaction:

• Forms within carousel slides where arrow keys navigate form fields
• Text inputs where left/right arrows move the cursor
• Rich text editors or code editors in slides
• Any scenario where carousel navigation conflicts with content interaction

Alternative Navigation: When keyboard interaction is disabled, users can still navigate using:

• Mouse clicks on navigation buttons
• Touch swipe gestures
• Clicking indicator dots
• Programmatic methods (if you provide custom controls)

Accessibility Best Practices

Provide Meaningful Alt Text

Always include descriptive alt attributes for images:

<CarouselItem>
    <img src="product1.jpg" alt="Red leather sofa with chrome legs, front view" />
</CarouselItem>

Use Proper Color Contrast

Ensure navigation buttons and indicators have sufficient contrast against the carousel background. The component's default themes meet WCAG AA standards, but verify when using custom styling.

Don't Rely Solely on Color

Use additional indicators beyond color alone (e.g., shape, text, icons) to convey information.

Respect User Preferences

If auto-play is enabled, provide a pause button:

<SfCarousel AutoPlay="true" ShowPlayButton="true">
    <!-- carousel items -->
</SfCarousel>

This allows users with cognitive disabilities or motion sensitivity to control animation.

Caption Important Content

When slides contain images that convey information, provide text alternatives:

<CarouselItem>
    <figure>
        <img src="chart.png" alt="Sales growth chart" />
        <figcaption>
            Sales increased 45% year-over-year, reaching $2.3M in Q4 2025.
        </figcaption>
    </figure>
</CarouselItem>

Test with Assistive Technologies

The Blazor Carousel has been validated with:

• JAWS (Job Access With Speech)
• NVDA (NonVisual Desktop Access)
• Narrator (Windows built-in screen reader)
• VoiceOver (macOS/iOS screen reader)
• axe-core automated accessibility testing

You can test accessibility using the Syncfusion accessibility demo.

Focus Management

The carousel properly manages focus when:

• Users navigate between slides (focus remains on carousel)
• Modal dialogs or popups open from slides
• Slides contain interactive elements (links, buttons)

If your slides contain focusable elements, the carousel preserves natural tab order:

<SfCarousel>
    <CarouselItem>
        <h2>Slide 1</h2>
        <button>Action 1</button>
        <a href="#">Learn More</a>
    </CarouselItem>
    <CarouselItem>
        <h2>Slide 2</h2>
        <button>Action 2</button>
        <a href="#">Learn More</a>
    </CarouselItem>
</SfCarousel>

Users can tab through interactive elements within the active slide, then continue to carousel controls.

Animations and Transitions

Table of Contents

• Animation Effects
• Fade Animation
• Custom Animation
• Intervals Between Slides
• Auto Play Slides
• Pause on Hover
• Looping Slides
• Slide Changing Events
• Touch Swipe
• Swipe Modes

Animation Effects

The carousel supports multiple built-in animation effects for slide transitions via the AnimationEffect property. By default, the Slide animation is applied.

Fade Animation

Apply a fade transition where slides fade out and fade in:

@using Syncfusion.Blazor.Navigations

<SfCarousel AnimationEffect="CarouselAnimationEffect.Fade">
    <CarouselItem>
        <figure class="img-container">
            <img src="https://ej2.syncfusion.com/products/images/carousel/cardinal.png" 
                 alt="cardinal" 
                 style="height:100%;width:100%;" />
            <figcaption class="img-caption">Cardinal</figcaption>
        </figure>
    </CarouselItem>
    <CarouselItem>
        <figure class="img-container">
            <img src="https://ej2.syncfusion.com/products/images/carousel/hunei.png" 
                 alt="kingfisher" 
                 style="height:100%;width:100%;" />
            <figcaption class="img-caption">Kingfisher</figcaption>
        </figure>
    </CarouselItem>
    <CarouselItem>
        <figure class="img-container">
            <img src="https://ej2.syncfusion.com/products/images/carousel/costa-rica.png" 
                 alt="keel-billed-toucan" 
                 style="height:100%;width:100%;" />
            <figcaption class="img-caption">Keel-billed-toucan</figcaption>
        </figure>
    </CarouselItem>
    <CarouselItem>
        <figure class="img-container">
            <img src="https://ej2.syncfusion.com/products/images/carousel/kaohsiung.png" 
                 alt="yellow-warbler" 
                 style="height:100%;width:100%;" />
            <figcaption class="img-caption">Yellow-warbler</figcaption>
        </figure>
    </CarouselItem>
    <CarouselItem>
        <figure class="img-container">
            <img src="https://ej2.syncfusion.com/products/images/carousel/bee-eater.png" 
                 alt="bee-eater" 
                 style="height:100%;width:100%;" />
            <figcaption class="img-caption">Bee-eater</figcaption>
        </figure>
    </CarouselItem>
</SfCarousel>

<style>
    .img-container {
        height: 100%;
        margin: 0;
    }

    .img-caption {
        color: #fff;
        font-size: 1rem;
        position: absolute;
        bottom: 3rem;
        width: 100%;
        text-align: center;
    }
</style>

Available Animation Effects:

• Slide (default) - Slides move horizontally
• Fade - Smooth fade transition
• Custom - Apply your own CSS animations
• None - No animation (instant transition)

When to use Fade:

• Image galleries where sliding motion is distracting
• Content that benefits from subtle transitions
• Overlapping or full-screen slides
• Professional presentations

Custom Animation

Create custom slide transitions using CSS animations. Set AnimationEffect="Custom" and apply custom CSS via the CssClass property:

@using Syncfusion.Blazor.Navigations

<SfCarousel AnimationEffect="CarouselAnimationEffect.Custom" CssClass="parallax">
    <CarouselItem>
        <figure class="img-container">
            <img src="https://ej2.syncfusion.com/products/images/carousel/cardinal.png" 
                 alt="cardinal" 
                 style="height:100%;width:100%;" />
            <figcaption class="img-caption">Cardinal</figcaption>
        </figure>
    </CarouselItem>
    <CarouselItem>
        <figure class="img-container">
            <img src="https://ej2.syncfusion.com/products/images/carousel/hunei.png" 
                 alt="kingfisher" 
                 style="height:100%;width:100%;" />
            <figcaption class="img-caption">Kingfisher</figcaption>
        </figure>
    </CarouselItem>
    <CarouselItem>
        <figure class="img-container">
            <img src="https://ej2.syncfusion.com/products/images/carousel/costa-rica.png" 
                 alt="keel-billed-toucan" 
                 style="height:100%;width:100%;" />
            <figcaption class="img-caption">Keel-billed-toucan</figcaption>
        </figure>
    </CarouselItem>
    <CarouselItem>
        <figure class="img-container">
            <img src="https://ej2.syncfusion.com/products/images/carousel/kaohsiung.png" 
                 alt="yellow-warbler" 
                 style="height:100%;width:100%;" />
            <figcaption class="img-caption">Yellow-warbler</figcaption>
        </figure>
    </CarouselItem>
    <CarouselItem>
        <figure class="img-container">
            <img src="https://ej2.syncfusion.com/products/images/carousel/bee-eater.png" 
                 alt="bee-eater" 
                 style="height:100%;width:100%;" />
            <figcaption class="img-caption">Bee-eater</figcaption>
        </figure>
    </CarouselItem>
</SfCarousel>

<style>
    .img-container {
        height: 100%;
        margin: 0;
    }

    .img-caption {
        color: #fff;
        font-size: 1rem;
        position: absolute;
        bottom: 3rem;
        width: 100%;
        text-align: center;
    }

    /* Parallax custom animation */
    .parallax .e-carousel-item {
        transition: transform 1s ease-in-out;
    }

    .parallax .e-carousel-item.e-next {
        animation: ParallaxIn 1s ease-in-out;
    }

    .parallax .e-carousel-item.e-prev {
        animation: ParallaxOut 1s ease-in-out;
    }

    @keyframes ParallaxIn {
        from {
            opacity: 0;
            transform: scale(0) translateY(100%);
        }   
        to {
            opacity: 1;
            transform: scale(1) translateY(0);
        }
    }

    @keyframes ParallaxOut {
        from {
            opacity: 1;
            transform: scale(1) translateY(0);
        }
        to {
            opacity: 0;
            transform: scale(0) translateY(-100%);
        }
    }
</style>

Custom Animation Options:

• Zoom effects - Scale slides in/out
• Rotate transitions - 3D rotation effects
• Flip animations - Card flip style
• Slide with fade - Combined effects
• Bounce/elastic - Playful animations
• Parallax - Layered depth effects

CSS Animation Classes:

• .e-carousel-item - Target all slides
• .e-carousel-item.e-next - Incoming slide
• .e-carousel-item.e-prev - Outgoing slide
• .e-carousel-item.e-active - Current slide

Intervals Between Slides

Set different transition intervals for each slide using the Interval property on individual CarouselItem elements. The interval is specified in milliseconds.

@using Syncfusion.Blazor.Navigations

<SfCarousel>
    <CarouselItem Interval="2000">
        <div class="slide-content">Slide 1 (2 seconds)</div>
    </CarouselItem>
    <CarouselItem Interval="4000">
        <div class="slide-content">Slide 2 (4 seconds)</div>
    </CarouselItem>
    <CarouselItem>
        <div class="slide-content">Slide 3 (default: 5 seconds)</div>
    </CarouselItem>
    <CarouselItem Interval="6000">
        <div class="slide-content">Slide 4 (6 seconds)</div>
    </CarouselItem>
    <CarouselItem Interval="8000">
        <div class="slide-content">Slide 5 (8 seconds)</div>
    </CarouselItem>
</SfCarousel>

<style>
    .e-carousel .slide-content {
        align-items: center;
        display: flex;
        font-size: 1.25rem;
        height: 100%;
        justify-content: center;
    }
</style>

Default Interval: 5000ms (5 seconds)

When to use custom intervals:

• Text-heavy slides need more reading time
• Quick promotional banners vs detailed content
• Image slides can be shorter than text slides
• Varying content complexity across slides

Auto Play Slides

Control automatic slide transitions using the AutoPlay property. By default, auto-play is enabled (true).

Disable auto-play:

@using Syncfusion.Blazor.Navigations

<SfCarousel AutoPlay="false">
    <CarouselItem>
        <div class="slide-content">Slide 1</div>
    </CarouselItem>
    <CarouselItem>
        <div class="slide-content">Slide 2</div>
    </CarouselItem>
    <CarouselItem>
        <div class="slide-content">Slide 3</div>
    </CarouselItem>
    <CarouselItem>
        <div class="slide-content">Slide 4</div>
    </CarouselItem>
    <CarouselItem>
        <div class="slide-content">Slide 5</div>
    </CarouselItem>
</SfCarousel>

<style>
    .e-carousel .slide-content {
        align-items: center;
        display: flex;
        font-size: 1.25rem;
        height: 100%;
        justify-content: center;
    }
</style>

When to disable auto-play:

• User-controlled content exploration
• Forms or interactive content in slides
• Reading-heavy content where timing varies
• Accessibility concerns (WCAG guideline: allow users to control motion)
• Slides with videos or embedded media

When to enable auto-play:

• Hero banners with promotional content
• Image galleries for browsing
• News tickers or announcements
• Testimonial rotations
• Auto-advancing presentations

Pause on Hover

By default, slide transitions pause when the user hovers their mouse over the carousel (PauseOnHover="true"). You can disable this behavior:

@using Syncfusion.Blazor.Navigations

<SfCarousel PauseOnHover="false">
    <CarouselItem>
        <div class="slide-content">Slide 1</div>
    </CarouselItem>
    <CarouselItem>
        <div class="slide-content">Slide 2</div>
    </CarouselItem>
    <CarouselItem>
        <div class="slide-content">Slide 3</div>
    </CarouselItem>
    <CarouselItem>
        <div class="slide-content">Slide 4</div>
    </CarouselItem>
    <CarouselItem>
        <div class="slide-content">Slide 5</div>
    </CarouselItem>
</SfCarousel>

<style>
    .e-carousel .slide-content {
        align-items: center;
        display: flex;
        font-size: 1.25rem;
        height: 100%;
        justify-content: center;
    }
</style>

Default: PauseOnHover="true"

When to keep pause on hover enabled (default):

• Users need time to read content
• Slides contain clickable links or buttons
• Complex images requiring inspection
• Best practice for accessibility

When to disable pause on hover:

• Kiosk displays where hover isn't meaningful
• Touch-only interfaces
• Continuous looping promotional content

Looping Slides

Control whether slides loop infinitely using the Loop property. By default, looping is enabled (true).

Disable looping:

@using Syncfusion.Blazor.Navigations

<SfCarousel Loop="false">
    <CarouselItem>
        <div class="slide-content">Slide 1</div>
    </CarouselItem>
    <CarouselItem>
        <div class="slide-content">Slide 2</div>
    </CarouselItem>
    <CarouselItem>
        <div class="slide-content">Slide 3</div>
    </CarouselItem>
    <CarouselItem>
        <div class="slide-content">Slide 4</div>
    </CarouselItem>
    <CarouselItem>
        <div class="slide-content">Slide 5</div>
    </CarouselItem>
</SfCarousel>

<style>
    .e-carousel .slide-content {
        align-items: center;
        display: flex;
        font-size: 1.25rem;
        height: 100%;
        justify-content: center;
    }
</style>

Behavior when Loop="false":

• Auto-play stops after reaching the last slide
• Previous button is disabled on the first slide
• Next button is disabled on the last slide
• Users cannot navigate beyond the boundaries

When to disable looping:

• Tutorial or onboarding sequences
• Step-by-step processes with a clear end
• Product tours with defined start/finish
• Linear presentations

When to keep looping enabled (default):

• Image galleries
• Product showcases
• Testimonial rotations
• News feeds or announcements

Slide Changing Events

Use the SelectedIndexChanged event to execute custom logic when slides change:

@using Syncfusion.Blazor.Navigations

<SfCarousel SelectedIndexChanged="OnSelectedIndexChanged">
    <CarouselItem>
        <div class="slide-content">Slide 1</div>
    </CarouselItem>
    <CarouselItem>
        <div class="slide-content">Slide 2</div>
    </CarouselItem>
    <CarouselItem>
        <div class="slide-content">Slide 3</div>
    </CarouselItem>
    <CarouselItem>
        <div class="slide-content">Slide 4</div>
    </CarouselItem>
    <CarouselItem>
        <div class="slide-content">Slide 5</div>
    </CarouselItem>
</SfCarousel>

<p>Current Slide Index: @currentSlideIndex</p>

@code {
    private int currentSlideIndex = 0;

    void OnSelectedIndexChanged(int index)
    {
        currentSlideIndex = index;
        // Additional custom logic:
        // - Track analytics
        // - Load content dynamically
        // - Update other UI components
        // - Trigger animations
        Console.WriteLine($"Navigated to slide {index}");
    }
}

<style>
    .e-carousel .slide-content {
        align-items: center;
        display: flex;
        font-size: 1.25rem;
        height: 100%;
        justify-content: center;
    }
</style>

Event Parameters:

• int index - Zero-based index of the newly selected slide

Use Cases:

• Track user engagement with analytics
• Load slide content dynamically
• Synchronize multiple carousels
• Update external UI based on current slide
• Lazy-load images for performance
• Display slide-specific information

Touch Swipe

Enable or disable swipe gestures on touch devices using the EnableTouchSwipe property. By default, touch swipe is enabled (true).

Disable touch swipe:

@using Syncfusion.Blazor.Navigations

<SfCarousel EnableTouchSwipe="false">
    <CarouselItem>
        <div class="slide-content">Slide 1</div>
    </CarouselItem>
    <CarouselItem>
        <div class="slide-content">Slide 2</div>
    </CarouselItem>
    <CarouselItem>
        <div class="slide-content">Slide 3</div>
    </CarouselItem>
    <CarouselItem>
        <div class="slide-content">Slide 4</div>
    </CarouselItem>
    <CarouselItem>
        <div class="slide-content">Slide 5</div>
    </CarouselItem>
</SfCarousel>

<style>
    .e-carousel .slide-content {
        align-items: center;
        display: flex;
        font-size: 1.25rem;
        height: 100%;
        justify-content: center;
    }
</style>

When to disable touch swipe:

• Slides contain swipeable content (nested carousels, maps)
• Image zoom or pan functionality within slides
• Horizontal scrolling content in slides
• Prevent accidental navigation

Swipe Modes

Control which input methods can trigger slide transitions using the SwipeMode property with bitwise operators:

@using Syncfusion.Blazor.Navigations

<SfCarousel SwipeMode="CarouselSwipeMode.Mouse & CarouselSwipeMode.Touch">
    <CarouselItem>
        <figure class="img-container">
            <img src="https://ej2.syncfusion.com/products/images/carousel/cardinal.png" 
                 alt="cardinal" 
                 style="height:100%;width:100%;" />
            <figcaption class="img-caption">Cardinal</figcaption>
        </figure>
    </CarouselItem>
    <CarouselItem>
        <figure class="img-container">
            <img src="https://ej2.syncfusion.com/products/images/carousel/hunei.png" 
                 alt="kingfisher" 
                 style="height:100%;width:100%;" />
            <figcaption class="img-caption">Kingfisher</figcaption>
        </figure>
    </CarouselItem>
    <CarouselItem>
        <figure class="img-container">
            <img src="https://ej2.syncfusion.com/products/images/carousel/costa-rica.png" 
                 alt="keel-billed-toucan" 
                 style="height:100%;width:100%;" />
            <figcaption class="img-caption">Keel-billed-toucan</figcaption>
        </figure>
    </CarouselItem>
    <CarouselItem>
        <figure class="img-container">
            <img src="https://ej2.syncfusion.com/products/images/carousel/kaohsiung.png" 
                 alt="yellow-warbler" 
                 style="height:100%;width:100%;" />
            <figcaption class="img-caption">Yellow-warbler</figcaption>
        </figure>
    </CarouselItem>
    <CarouselItem>
        <figure class="img-container">
            <img src="https://ej2.syncfusion.com/products/images/carousel/bee-eater.png" 
                 alt="bee-eater" 
                 style="height:100%;width:100%;" />
            <figcaption class="img-caption">Bee-eater</figcaption>
        </figure>
    </CarouselItem>
</SfCarousel>

<style>
    .img-container {
        height: 100%;
        margin: 0;
    }

    .img-caption {
        color: #fff;
        font-size: 1rem;
        position: absolute;
        bottom: 3rem;
        width: 100%;
        text-align: center;
    }
</style>

Available Swipe Modes:

Examples:

Touch only:

<SfCarousel SwipeMode="CarouselSwipeMode.Touch">

Mouse only:

<SfCarousel SwipeMode="CarouselSwipeMode.Mouse">

Both (default):

<SfCarousel SwipeMode="CarouselSwipeMode.Touch & CarouselSwipeMode.Mouse">

Neither:

<SfCarousel SwipeMode="~CarouselSwipeMode.Touch & ~CarouselSwipeMode.Mouse">

When to customize swipe modes:

• Mobile-only apps: Enable touch, disable mouse
• Desktop-only apps: Enable mouse, disable touch
• Kiosk displays: Configure based on input device
• Prevent drag interference with other UI elements

Getting Started with Blazor Carousel

Table of Contents

• Install NuGet Packages
• Add Namespaces
• Register Syncfusion Service
• Add Stylesheet and Script References
• Add Carousel Component

Install NuGet Packages

Install the required Syncfusion Blazor packages in your project:

Using Package Manager Console:

Install-Package Syncfusion.Blazor.Navigations -Version {{ site.releaseversion }}
Install-Package Syncfusion.Blazor.Themes -Version {{ site.releaseversion }}

Using .NET CLI:

dotnet add package Syncfusion.Blazor.Navigations
dotnet add package Syncfusion.Blazor.Themes

Using NuGet Package Manager: Navigate to Tools → NuGet Package Manager → Manage NuGet Packages for Solution and search for Syncfusion.Blazor.Navigations and Syncfusion.Blazor.Themes.

All Syncfusion Blazor packages are available on nuget.org.

Add Namespaces

Open the ~/_Imports.razor file and add the following namespaces:

@using Syncfusion.Blazor
@using Syncfusion.Blazor.Navigations

This makes the Syncfusion Blazor components available throughout your application without needing to add the namespace to each component file.

Register Syncfusion Service

Register the Syncfusion Blazor Service in the Program.cs file:

using Syncfusion.Blazor;

var builder = WebAssemblyHostBuilder.CreateDefault(args);
// ... other configurations

builder.Services.AddSyncfusionBlazor();

await builder.Build().RunAsync();

This service registration is required for all Syncfusion Blazor components to function properly.

Add Stylesheet and Script References

Add the theme stylesheet and script references in the ~/index.html file (for Blazor WebAssembly) or ~/Pages/_Host.cshtml file (for Blazor Server):

<head>
    <!-- Other head content -->
    <link href="_content/Syncfusion.Blazor.Themes/fluent2.css" rel="stylesheet" />
</head>

<body>
    <!-- Other body content -->
    <script src="_content/Syncfusion.Blazor.Core/scripts/syncfusion-blazor.min.js" type="text/javascript"></script>
</body>

Available Themes:

• bootstrap5.css
• material3.css
• fluent2.css
• tailwind.css
• fluent.css
• material.css
• bootstrap4.css
• bootstrap.css
• fabric.css
• highcontrast.css

You can also reference themes via CDN or use the Custom Resource Generator (CRG) for optimized theme bundles.

Add Carousel Component

Add the Syncfusion Blazor Carousel component to a Razor page (e.g., ~/Pages/Index.razor):

@using Syncfusion.Blazor.Navigations

<SfCarousel>
    <CarouselItem>
        <figure class="img-container">
            <img src="https://cdn.syncfusion.com/blazor/images/carousel/bridge.png" 
                 alt="Golden Gate Bridge, San Francisco" 
                 style="height:100%;width:100%;" />
            <figcaption class="img-caption">Golden Gate Bridge, San Francisco</figcaption>
        </figure>
    </CarouselItem>
    <CarouselItem>
        <figure class="img-container">
            <img src="https://cdn.syncfusion.com/blazor/images/carousel/trees.png" 
                 alt="Spring Flower Trees" 
                 style="height:100%;width:100%;" />
            <figcaption class="img-caption">Spring Flower Trees</figcaption>
        </figure>
    </CarouselItem>
    <CarouselItem>
        <figure class="img-container">
            <img src="https://cdn.syncfusion.com/blazor/images/carousel/waterfall.png" 
                 alt="Oddadalen Waterfalls, Norway" 
                 style="height:100%;width:100%;" />
            <figcaption class="img-caption">Oddadalen Waterfalls, Norway</figcaption>
        </figure>
    </CarouselItem>
    <CarouselItem>
        <figure class="img-container">
            <img src="https://cdn.syncfusion.com/blazor/images/carousel/sea.png" 
                 alt="Anse Source d'Argent, Seychelles" 
                 style="height:100%;width:100%;" />
            <figcaption class="img-caption">Anse Source d'Argent, Seychelles</figcaption>
        </figure>
    </CarouselItem>
    <CarouselItem>
        <figure class="img-container">
            <img src="https://cdn.syncfusion.com/blazor/images/carousel/rocks.png" 
                 alt="Stonehenge, England" 
                 style="height:100%;width:100%;" />
            <figcaption class="img-caption">Stonehenge, England</figcaption>
        </figure>
    </CarouselItem>
</SfCarousel>

<style>
    .e-carousel .e-carousel-items .e-carousel-item .img-container {
        height: 100%;
    }

    .e-carousel .e-carousel-items .e-carousel-item .img-caption {
        bottom: 4em;
        color: #fff;
        font-size: 12pt;
        height: 2em;
        position: relative;
        padding: 0.3em 1em;
        text-align: center;
        width: 100%;
    }
</style>

Run the application using <kbd>Ctrl</kbd>+<kbd>F5</kbd> (Windows) or <kbd>⌘</kbd>+<kbd>F5</kbd> (macOS) to see the Carousel component in action.

Basic Features

The default carousel includes:

• Automatic slide transitions every 5 seconds
• Previous/Next navigation buttons
• Dot indicators showing total slides and current position
• Touch swipe support for mobile devices
• Keyboard navigation using arrow keys
• Infinite looping when reaching the last slide

Next Steps

• Configure item selection → See Populating Items
• Customize navigators and indicators → See Navigators and Indicators
• Add animations → See Animations and Transitions
• Ensure accessibility → See Accessibility
• Apply custom styling → See Styles and Appearance

Navigators and Indicators

Table of Contents

• Navigators
• Show or Hide Previous and Next Buttons
• Show Buttons on Hover
• Previous and Next Button Templates
• Indicators
• Show or Hide Indicators
• Indicators Template
• Showing Preview in Indicators
• Indicator Types
• Play Button
• Show or Hide Play Button
• Play Button Template

Navigators

Navigators are the previous and next buttons that allow users to manually transition between slides.

Show or Hide Previous and Next Buttons

Control navigator button visibility using the ButtonsVisibility property. The available options are:

• Visible – Navigator buttons are always visible
• Hidden – Navigator buttons are not visible
• VisibleOnHover – Navigator buttons appear only when hovering over the carousel

Example: Hide navigators completely

@using Syncfusion.Blazor.Navigations

<SfCarousel ButtonsVisibility="CarouselButtonVisibility.Hidden">
    <CarouselItem>
        <div class="slide-content">Slide 1</div>
    </CarouselItem>
    <CarouselItem>
        <div class="slide-content">Slide 2</div>
    </CarouselItem>
    <CarouselItem>
        <div class="slide-content">Slide 3</div>
    </CarouselItem>
    <CarouselItem>
        <div class="slide-content">Slide 4</div>
    </CarouselItem>
    <CarouselItem>
        <div class="slide-content">Slide 5</div>
    </CarouselItem>
</SfCarousel>

<style>
    .e-carousel .slide-content {
        align-items: center;
        display: flex;
        font-size: 1.25rem;
        height: 100%;
        justify-content: center;
    }
</style>

When to use:

• Hide navigators for mobile-first designs relying on swipe gestures
• Clean minimal interfaces where indicators or thumbnails provide navigation
• Touch-focused applications

Show Buttons on Hover

Display navigator buttons only when the user hovers their mouse over the carousel:

@using Syncfusion.Blazor.Navigations

<SfCarousel ButtonsVisibility="CarouselButtonVisibility.VisibleOnHover">
    <CarouselItem>
        <div class="slide-content">Slide 1</div>
    </CarouselItem>
    <CarouselItem>
        <div class="slide-content">Slide 2</div>
    </CarouselItem>
    <CarouselItem>
        <div class="slide-content">Slide 3</div>
    </CarouselItem>
    <CarouselItem>
        <div class="slide-content">Slide 4</div>
    </CarouselItem>
    <CarouselItem>
        <div class="slide-content">Slide 5</div>
    </CarouselItem>
</SfCarousel>

<style>
    .e-carousel .slide-content {
        align-items: center;
        display: flex;
        font-size: 1.25rem;
        height: 100%;
        justify-content: center;
    }
</style>

When to use:

• Clean design that doesn't want buttons always visible
• Image galleries where buttons might distract from content
• Desktop-focused applications where hover is reliable

Previous and Next Button Templates

Customize the appearance of navigator buttons using PreviousButtonTemplate and NextButtonTemplate:

@using Syncfusion.Blazor.Buttons
@using Syncfusion.Blazor.Navigations

<SfCarousel>
    <ChildContent>
        <CarouselItem>
            <div class="slide-content">Slide 1</div>
        </CarouselItem>
        <CarouselItem>
            <div class="slide-content">Slide 2</div>
        </CarouselItem>
        <CarouselItem>
            <div class="slide-content">Slide 3</div>
        </CarouselItem>
        <CarouselItem>
            <div class="slide-content">Slide 4</div>
        </CarouselItem>
        <CarouselItem>
            <div class="slide-content">Slide 5</div>
        </CarouselItem>
    </ChildContent>
    <PreviousButtonTemplate>
        <SfButton CssClass="e-flat e-outline nav-btn" title="Previous">
            <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 40 40" width="40" height="40">
                <path d="m13.5 7.01 13 13m-13 13 13-13"></path>
            </svg>
        </SfButton>
    </PreviousButtonTemplate>
    <NextButtonTemplate>
        <SfButton CssClass="e-flat e-outline nav-btn" title="Next">
            <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 40 40" width="40" height="40">
                <path d="m13.5 7.01 13 13m-13 13 13-13"></path>
            </svg>
        </SfButton>
    </NextButtonTemplate>
</SfCarousel>

<style>
    .e-carousel .slide-content {
        align-items: center;
        display: flex;
        font-size: 1.25rem;
        height: 100%;
        justify-content: center;
    }

    .e-carousel .e-carousel-navigators .e-btn:active,
    .e-carousel .e-carousel-navigators .e-btn:hover {
        background-color: transparent !important;
    }

    .e-carousel .e-carousel-navigators .e-btn svg {
        fill: none;
        stroke: currentColor;
        stroke-linecap: square;
        stroke-width: 8px;
        height: 2rem;
        vertical-align: middle;
        width: 2rem;
    }

    .e-carousel .e-carousel-navigators .e-previous .e-btn svg {
        transform: rotate(180deg);
    }
</style>

Template Customization Options:

• Custom SVG or icon fonts
• Text labels ("Previous"/"Next")
• Images or background graphics
• Brand-specific button styles
• Animated icons

Indicators

Indicators show the total number of slides and the currently active slide position.

Show or Hide Indicators

Use the ShowIndicators property to control indicator visibility:

@using Syncfusion.Blazor.Navigations

<SfCarousel ShowIndicators="false">
    <CarouselItem>
        <div class="slide-content">Slide 1</div>
    </CarouselItem>
    <CarouselItem>
        <div class="slide-content">Slide 2</div>
    </CarouselItem>
    <CarouselItem>
        <div class="slide-content">Slide 3</div>
    </CarouselItem>
    <CarouselItem>
        <div class="slide-content">Slide 4</div>
    </CarouselItem>
    <CarouselItem>
        <div class="slide-content">Slide 5</div>
    </CarouselItem>
</SfCarousel>

<style>
    .e-carousel .slide-content {
        align-items: center;
        display: flex;
        font-size: 1.25rem;
        height: 100%;
        justify-content: center;
    }
</style>

When to hide indicators:

• Single-slide or very few slides where position is obvious
• Minimal designs where screen space is limited
• Custom pagination UI implementations

Indicators Template

Customize indicator appearance using the IndicatorsTemplate:

@using Syncfusion.Blazor.Navigations

<SfCarousel ShowIndicators="true">
    <ChildContent>
        <CarouselItem>
            <div class="slide-content">Slide 1</div>
        </CarouselItem>
        <CarouselItem>
            <div class="slide-content">Slide 2</div>
        </CarouselItem>
        <CarouselItem>
            <div class="slide-content">Slide 3</div>
        </CarouselItem>
        <CarouselItem>
            <div class="slide-content">Slide 4</div>
        </CarouselItem>
        <CarouselItem>
            <div class="slide-content">Slide 5</div>
        </CarouselItem>
    </ChildContent>
    <IndicatorsTemplate>
        @{
            string slideName = (context.Index + 1).ToString();
            <div class="indicator">
                <div class="fs-6">@slideName</div>
            </div>
        }
    </IndicatorsTemplate>
</SfCarousel>

<style>
    .e-carousel .slide-content {
        align-items: center;
        display: flex;
        font-size: 1.25rem;
        height: 100%;
        justify-content: center;
    }

    .e-carousel .e-carousel-indicators .e-indicator-bars .e-indicator-bar .indicator {
        background-color: #ECECEC;
        border-radius: 0.25rem;
        cursor: pointer;
        display: flex;
        height: 2rem;
        justify-content: center;
        margin: 0.5rem;
        width: 3rem;
    }

    .e-carousel .e-carousel-indicators .e-indicator-bars .e-indicator-bar .indicator .fs-6 {
        margin: auto;
    }

    .e-carousel .e-carousel-indicators .e-indicator-bars .e-indicator-bar.e-active .indicator {
        background-color: #3C78EF;
        color: #fff;
    }
</style>

Template Context:

• context.Index - Zero-based index of the slide
• Access slide properties to display custom information

Customization Ideas:

• Numbered indicators (1, 2, 3...)
• Letter indicators (A, B, C...)
• Custom icons or images
• Text labels describing each slide

Showing Preview in Indicators

Display thumbnail previews of each slide in the indicators:

@using Syncfusion.Blazor.Navigations

<SfCarousel CssClass="template-carousel">
    <ChildContent>
        @foreach (Bird bird in birds)
        {
            <CarouselItem>
                <figure class="img-container">
                    <img src="@("https://ej2.syncfusion.com/products/images/carousel/" + bird.ImageName + ".png")" 
                         alt="@bird.ImageName" 
                         style="height:100%;width:100%;" />
                </figure>
            </CarouselItem>
        }
    </ChildContent>
    <IndicatorsTemplate>
        <div class="indicator">
            <img src="@("https://ej2.syncfusion.com/products/images/carousel/" + previewImage[context.Index] + ".png")" 
                 alt="image" 
                 style="height:100%;width:100%;" />
        </div>
    </IndicatorsTemplate>
</SfCarousel>

@code {
    private List<string> previewImage = new List<string>() { 
        "cardinal", "hunei", "costa-rica", "kaohsiung", "bee-eater" 
    };
    
    public List<Bird> birds = new List<Bird> {
        new Bird { ID = 1, Name = "Cardinal", ImageName = "cardinal" },
        new Bird { ID = 2, Name = "Kingfisher", ImageName = "hunei" },
        new Bird { ID = 3, Name = "Keel-billed-toucan", ImageName = "costa-rica" },
        new Bird { ID = 4, Name = "Yellow-warbler", ImageName = "kaohsiung" },
        new Bird { ID = 5, Name = "Bee-eater", ImageName = "bee-eater" }
    };

    public class Bird
    {
        public int ID { get; set; }
        public string Name { get; set; }
        public string ImageName { get; set; }
    }
}

<style>
    .template-carousel .e-carousel-items,
    .template-carousel .e-carousel-navigators {
        height: calc(100% - 3rem);
    }

    .template-carousel .e-carousel-indicators .e-indicator-bars .e-indicator-bar .indicator {
        background-color: #ECECEC;
        border-radius: 0.25rem;
        cursor: pointer;
        height: 2rem;
        margin: 0.6rem;
        width: 3rem;
    }

    .template-carousel .e-carousel-indicators .e-indicator-bars .e-indicator-bar .indicator img {
        padding: 2px;
    }

    .template-carousel .e-carousel-indicators .e-indicator-bars .e-indicator-bar.e-active .indicator {
        background-color: #3C78EF;
    }
</style>

When to use preview indicators:

• Image galleries where users need visual reference
• Product carousels to show all available items
• Portfolio showcases
• Video or media galleries

Indicator Types

The carousel supports four built-in indicator types via the IndicatorsType property:

Default Indicator

Standard dot indicators showing current position:

@using Syncfusion.Blazor.Navigations

<SfCarousel IndicatorsType="CarouselIndicatorType.Default">
    <CarouselItem>
        <div class="slide-content">Slide 1</div>
    </CarouselItem>
    <CarouselItem>
        <div class="slide-content">Slide 2</div>
    </CarouselItem>
    <CarouselItem>
        <div class="slide-content">Slide 3</div>
    </CarouselItem>
    <CarouselItem>
        <div class="slide-content">Slide 4</div>
    </CarouselItem>
    <CarouselItem>
        <div class="slide-content">Slide 5</div>
    </CarouselItem>
</SfCarousel>

Appearance: Traditional circular dots, active dot highlighted

Dynamic Indicator

Animated indicators that dynamically change to show position:

@using Syncfusion.Blazor.Navigations

<SfCarousel IndicatorsType="CarouselIndicatorType.Dynamic">
    <CarouselItem>
        <div class="slide-content">Slide 1</div>
    </CarouselItem>
    <CarouselItem>
        <div class="slide-content">Slide 2</div>
    </CarouselItem>
    <CarouselItem>
        <div class="slide-content">Slide 3</div>
    </CarouselItem>
    <CarouselItem>
        <div class="slide-content">Slide 4</div>
    </CarouselItem>
    <CarouselItem>
        <div class="slide-content">Slide 5</div>
    </CarouselItem>
</SfCarousel>

Appearance: Dots with animation effects showing progression

Fraction Indicator

Shows current slide index and total count (e.g., "3 / 5"):

@using Syncfusion.Blazor.Navigations

<SfCarousel IndicatorsType="CarouselIndicatorType.Fraction">
    <CarouselItem>
        <div class="slide-content">Slide 1</div>
    </CarouselItem>
    <CarouselItem>
        <div class="slide-content">Slide 2</div>
    </CarouselItem>
    <CarouselItem>
        <div class="slide-content">Slide 3</div>
    </CarouselItem>
    <CarouselItem>
        <div class="slide-content">Slide 4</div>
    </CarouselItem>
    <CarouselItem>
        <div class="slide-content">Slide 5</div>
    </CarouselItem>
</SfCarousel>

Appearance: Text showing "1 / 5", "2 / 5", etc.

When to use: When users need exact position information

Progress Indicator

Displays a progress bar showing position through the carousel:

@using Syncfusion.Blazor.Navigations

<SfCarousel IndicatorsType="CarouselIndicatorType.Progress">
    <CarouselItem>
        <div class="slide-content">Slide 1</div>
    </CarouselItem>
    <CarouselItem>
        <div class="slide-content">Slide 2</div>
    </CarouselItem>
    <CarouselItem>
        <div class="slide-content">Slide 3</div>
    </CarouselItem>
    <CarouselItem>
        <div class="slide-content">Slide 4</div>
    </CarouselItem>
    <CarouselItem>
        <div class="slide-content">Slide 5</div>
    </CarouselItem>
</SfCarousel>

Appearance: Horizontal bar filling from left to right

When to use: Onboarding flows, tutorials, step-by-step processes

Play Button

The play button allows users to manually control auto-play functionality.

Show or Hide Play Button

Enable the play/pause button using the ShowPlayButton property. This button appears with the navigation controls and allows users to start or stop automatic slide transitions.

@using Syncfusion.Blazor.Navigations

<SfCarousel ShowPlayButton="true">
    <CarouselItem>
        <div class="slide-content">Slide 1</div>
    </CarouselItem>
    <CarouselItem>
        <div class="slide-content">Slide 2</div>
    </CarouselItem>
    <CarouselItem>
        <div class="slide-content">Slide 3</div>
    </CarouselItem>
    <CarouselItem>
        <div class="slide-content">Slide 4</div>
    </CarouselItem>
    <CarouselItem>
        <div class="slide-content">Slide 5</div>
    </CarouselItem>
</SfCarousel>

<style>
    .e-carousel .slide-content {
        align-items: center;
        display: flex;
        font-size: 1.25rem;
        height: 100%;
        justify-content: center;
    }
</style>

Important: The ShowPlayButton property depends on ButtonsVisibility. If navigators are hidden, the play button won't appear.

When to show play button:

• Users need control over auto-play
• Content requires varied reading times
• Accessibility requirement for motion control

Play Button Template

Customize the play/pause button appearance:

@using Syncfusion.Blazor.Buttons
@using Syncfusion.Blazor.Navigations

<SfCarousel AutoPlay="@IsSlidePlay" ShowPlayButton="true">
    <ChildContent>
        <CarouselItem>
            <div class="slide-content">Slide 1</div>
        </CarouselItem>
        <CarouselItem>
            <div class="slide-content">Slide 2</div>
        </CarouselItem>
        <CarouselItem>
            <div class="slide-content">Slide 3</div>
        </CarouselItem>
        <CarouselItem>
            <div class="slide-content">Slide 4</div>
        </CarouselItem>
        <CarouselItem>
            <div class="slide-content">Slide 5</div>
        </CarouselItem>
    </ChildContent>
    <PlayButtonTemplate>
        <SfButton title="@(IsSlidePlay ? "Pause" : "Play")" 
                  IsToggle="true" 
                  @onclick="(()=> IsSlidePlay = !IsSlidePlay)">
            @if (IsSlidePlay)
            {
                <svg version="1.1" xmlns="http://www.w3.org/2000/svg" width="32" height="32" viewBox="0 0 32 32">
                    <path d="M16 0c-8.837 0-16 7.163-16 16s7.163 16 16 16 16-7.163 16-16-7.163-16-16-16zM16 29c-7.18 0-13-5.82-13-13s5.82-13 13-13 13 5.82 13 13-5.82 13-13 13zM10 10h4v12h-4zM18 10h4v12h-4z"></path>
                </svg>
            }
            else
            {
                <svg version="1.1" xmlns="http://www.w3.org/2000/svg" width="32" height="32" viewBox="0 0 32 32">
                    <path d="M16 0c-8.837 0-16 7.163-16 16s7.163 16 16 16 16-7.163 16-16-7.163-16-16-16zM16 29c-7.18 0-13-5.82-13-13s5.82-13 13-13 13 5.82 13 13-5.82 13-13 13zM12 9l12 7-12 7z"></path>
                </svg>
            }
        </SfButton>
    </PlayButtonTemplate>
</SfCarousel>

@code {
    bool IsSlidePlay = true;
}

<style>
    .e-carousel .slide-content {
        align-items: center;
        display: flex;
        font-size: 1.25rem;
        height: 100%;
        justify-content: center;
    }

    .e-carousel .e-carousel-navigators .e-btn:active,
    .e-carousel .e-carousel-navigators .e-btn:hover {
        background-color: transparent !important;
    }

    .e-carousel .e-carousel-navigators .e-btn svg {
        fill: #fff;
        stroke: transparent;
    }
</style>

Template Features:

• Custom play/pause icons
• State-based rendering (different icons for play vs pause)
• Tooltips for accessibility
• Brand-specific styling

Populating Items

Table of Contents

• Populating Items Using CarouselItem
• Selection Using SelectedIndex Property
• Selection Using Navigation Methods
• Partial Visible Slides
• Partial Visible Without Loop

Populating Items Using CarouselItem

Add carousel items using the CarouselItem tag. Each item represents a single slide in the carousel. You can add any HTML content or Blazor components within each item.

@using Syncfusion.Blazor.Navigations

<SfCarousel>
    <CarouselItem>
        <div class="slide-content">Slide 1</div>
    </CarouselItem>
    <CarouselItem>
        <div class="slide-content">Slide 2</div>
    </CarouselItem>
    <CarouselItem>
        <div class="slide-content">Slide 3</div>
    </CarouselItem>
    <CarouselItem>
        <div class="slide-content">Slide 4</div>
    </CarouselItem>
    <CarouselItem>
        <div class="slide-content">Slide 5</div>
    </CarouselItem>
</SfCarousel>

<style>
    .e-carousel .slide-content {
        align-items: center;
        display: flex;
        font-size: 1.25rem;
        height: 100%;
        justify-content: center;
    }
</style>

Each CarouselItem can contain:

• Images with captions
• Text content
• Custom HTML markup
• Blazor components
• Mixed content (images, text, buttons, etc.)

Selection Using SelectedIndex Property

Use the SelectedIndex property to set which slide displays initially or to programmatically switch to a specific slide. The index is zero-based.

@using Syncfusion.Blazor.Navigations

<SfCarousel @bind-SelectedIndex="@CurrentIndex">
    <CarouselItem>
        <div class="slide-content">Slide 1</div>
    </CarouselItem>
    <CarouselItem>
        <div class="slide-content">Slide 2</div>
    </CarouselItem>
    <CarouselItem>
        <div class="slide-content">Slide 3</div>
    </CarouselItem>
    <CarouselItem>
        <div class="slide-content">Slide 4</div>
    </CarouselItem>
    <CarouselItem>
        <div class="slide-content">Slide 5</div>
    </CarouselItem>
</SfCarousel>

@code {
    int CurrentIndex = 2; // Start at third slide (index 2)
}

Key Points:

• SelectedIndex is zero-based (first slide = 0)
• Two-way binding with @bind-SelectedIndex keeps your code property in sync
• Changing the property value programmatically switches the displayed slide
• The carousel will animate to the selected slide

Selection Using Navigation Methods

Use PreviousAsync() and NextAsync() methods to navigate between slides programmatically. This is useful when you want to control navigation from external buttons or custom UI elements.

@using Syncfusion.Blazor.Buttons
@using Syncfusion.Blazor.Navigations

<SfCarousel @ref="@CarouselRef" 
            @bind-SelectedIndex="@CurrentIndex" 
            ButtonsVisibility="CarouselButtonVisibility.Hidden">
    <CarouselItem>
        <div class="slide-content">Slide 1</div>
    </CarouselItem>
    <CarouselItem>
        <div class="slide-content">Slide 2</div>
    </CarouselItem>
    <CarouselItem>
        <div class="slide-content">Slide 3</div>
    </CarouselItem>
    <CarouselItem>
        <div class="slide-content">Slide 4</div>
    </CarouselItem>
    <CarouselItem>
        <div class="slide-content">Slide 5</div>
    </CarouselItem>
</SfCarousel>

<div class="custom-navigation">
    <SfButton CssClass="w-auto" @onclick="@(()=>OnNavigationClick(CarouselSlideDirection.Previous))">
        Previous
    </SfButton>
    <SfButton CssClass="w-auto" @onclick="@(()=>OnNavigationClick(CarouselSlideDirection.Next))">
        Next
    </SfButton>
</div>

@code {
    SfCarousel CarouselRef;
    int CurrentIndex = 2;

    async Task OnNavigationClick(CarouselSlideDirection slideDirection)
    {
        if (slideDirection == CarouselSlideDirection.Previous)
        {
            await CarouselRef.PreviousAsync();
        }
        else
        {
            await CarouselRef.NextAsync();
        }
    }
}

Methods Available:

• PreviousAsync() - Navigate to the previous slide
• NextAsync() - Navigate to the next slide

Use Cases:

• Custom navigation buttons positioned outside the carousel
• Thumbnail navigation where clicking an image jumps to that slide
• Integration with external UI controls
• Programmatic slide transitions based on user actions

Partial Visible Slides

The PartialVisible property enables showing the active slide plus partial views of the adjacent (previous and next) slides simultaneously. This creates a preview effect that helps users see what's coming next.

@using Syncfusion.Blazor.Navigations

<SfCarousel PartialVisible="true">
    <CarouselItem>
        <figure class="img-container">
            <img src="https://ej2.syncfusion.com/products/images/carousel/cardinal.png" 
                 alt="cardinal" 
                 style="height:100%;width:100%;" />
            <figcaption class="img-caption">Cardinal</figcaption>
        </figure>
    </CarouselItem>
    <CarouselItem>
        <figure class="img-container">
            <img src="https://ej2.syncfusion.com/products/images/carousel/hunei.png" 
                 alt="kingfisher" 
                 style="height:100%;width:100%;" />
            <figcaption class="img-caption">Kingfisher</figcaption>
        </figure>
    </CarouselItem>
    <CarouselItem>
        <figure class="img-container">
            <img src="https://ej2.syncfusion.com/products/images/carousel/costa-rica.png" 
                 alt="keel-billed-toucan" 
                 style="height:100%;width:100%;" />
            <figcaption class="img-caption">Keel-billed-toucan</figcaption>
        </figure>
    </CarouselItem>
    <CarouselItem>
        <figure class="img-container">
            <img src="https://ej2.syncfusion.com/products/images/carousel/kaohsiung.png" 
                 alt="yellow-warbler" 
                 style="height:100%;width:100%;" />
            <figcaption class="img-caption">Yellow-warbler</figcaption>
        </figure>
    </CarouselItem>
    <CarouselItem>
        <figure class="img-container">
            <img src="https://ej2.syncfusion.com/products/images/carousel/bee-eater.png" 
                 alt="bee-eater" 
                 style="height:100%;width:100%;" />
            <figcaption class="img-caption">Bee-eater</figcaption>
        </figure>
    </CarouselItem>
</SfCarousel>

<style>
    .img-container {
        margin: 0 10px;
        width: 100%;
        height: 100%;
    }

    .img-caption {
        bottom: 4em;
        color: #fff;
        font-size: 12pt;
        height: 2em;
        position: relative;
        padding: 0.3em 1em;
        text-align: center;
        width: 100%;
    }
</style>

Behavior with Loop Enabled: When both PartialVisible="true" and Loop="true" (default) are set:

• The last slide shows partially on the left at initial rendering
• The first slide shows in the center
• The second slide shows partially on the right
• Users see the continuous loop visually

Important Note: Slide animation is only applicable when PartialVisible is enabled. The partial view feature enables smooth sliding transitions between items.

Partial Visible Without Loop

When Loop is disabled with PartialVisible enabled, the behavior changes for the first and last slides:

@using Syncfusion.Blazor.Navigations

<SfCarousel PartialVisible="true" Loop="false">
    <CarouselItem>
        <figure class="img-container">
            <img src="https://ej2.syncfusion.com/products/images/carousel/cardinal.png" 
                 alt="cardinal" 
                 style="height:100%;width:100%;" />
            <figcaption class="img-caption">Cardinal</figcaption>
        </figure>
    </CarouselItem>
    <CarouselItem>
        <figure class="img-container">
            <img src="https://ej2.syncfusion.com/products/images/carousel/hunei.png" 
                 alt="kingfisher" 
                 style="height:100%;width:100%;" />
            <figcaption class="img-caption">Kingfisher</figcaption>
        </figure>
    </CarouselItem>
    <CarouselItem>
        <figure class="img-container">
            <img src="https://ej2.syncfusion.com/products/images/carousel/costa-rica.png" 
                 alt="keel-billed-toucan" 
                 style="height:100%;width:100%;" />
            <figcaption class="img-caption">Keel-billed-toucan</figcaption>
        </figure>
    </CarouselItem>
    <CarouselItem>
        <figure class="img-container">
            <img src="https://ej2.syncfusion.com/products/images/carousel/kaohsiung.png" 
                 alt="yellow-warbler" 
                 style="height:100%;width:100%;" />
            <figcaption class="img-caption">Yellow-warbler</figcaption>
        </figure>
    </CarouselItem>
    <CarouselItem>
        <figure class="img-container">
            <img src="https://ej2.syncfusion.com/products/images/carousel/bee-eater.png" 
                 alt="bee-eater" 
                 style="height:100%;width:100%;" />
            <figcaption class="img-caption">Bee-eater</figcaption>
        </figure>
    </CarouselItem>
</SfCarousel>

<style>
    .img-container {
        margin: 0 10px;
        width: 100%;
        height: 100%;
    }

    .img-caption {
        bottom: 4em;
        color: #fff;
        font-size: 12pt;
        height: 2em;
        position: relative;
        padding: 0.3em 1em;
        text-align: center;
        width: 100%;
    }
</style>

Behavior with Loop Disabled:

• At initial rendering, no previous slide shows on the left (since looping is disabled)
• Only the first slide (center) and second slide (partial right) are visible
• When reaching the last slide, no next slide shows on the right
• Navigation buttons will be disabled at the boundaries

When to Use:

• Linear workflows where users shouldn't loop back
• Tutorial slides with a clear start and end
• Step-by-step processes
• Galleries with finite content where looping doesn't make sense

Styles and Appearance

Table of Contents

• CSS Structure
• Customizing Indicators
• Indicator Spacing
• Indicator Size and Shape
• Indicator Position
• Customizing Navigators
• Navigator Icon Size and Color
• Navigator Position
• External Navigator Buttons
• Customizing Partial Slides

CSS Structure

The Blazor Carousel component provides a comprehensive set of CSS classes that you can override to customize its appearance. You can also use Theme Studio to create custom themes.

CSS Classes Reference

Visual Structure

┌─────────────────────────────────────────────┐
│  .e-carousel                                │
│  ┌───────────────────────────────────────┐ │
│  │ .e-carousel-navigators                │ │
│  │   .e-previous  .e-play-pause  .e-next │ │
│  └───────────────────────────────────────┘ │
│  ┌───────────────────────────────────────┐ │
│  │ .e-carousel-items                     │ │
│  │   .e-carousel-item.e-active           │ │
│  │     (Slide Content)                   │ │
│  └───────────────────────────────────────┘ │
│  ┌───────────────────────────────────────┐ │
│  │ .e-carousel-indicators                │ │
│  │   .e-indicator-bar                    │ │
│  │     .e-indicator (dot/element)        │ │
│  └───────────────────────────────────────┘ │
└─────────────────────────────────────────────┘

Customizing Indicators

Indicator Spacing

Adjust the space between indicator dots by overriding the .e-indicator-bar class:

@using Syncfusion.Blazor.Navigations

<SfCarousel CssClass="custom-indicator-spacing">
    <CarouselItem>
        <div class="slide-content">Slide 1</div>
    </CarouselItem>
    <CarouselItem>
        <div class="slide-content">Slide 2</div>
    </CarouselItem>
    <CarouselItem>
        <div class="slide-content">Slide 3</div>
    </CarouselItem>
    <CarouselItem>
        <div class="slide-content">Slide 4</div>
    </CarouselItem>
    <CarouselItem>
        <div class="slide-content">Slide 5</div>
    </CarouselItem>
</SfCarousel>

<style>
    .custom-indicator-spacing .e-carousel-indicators .e-indicator-bars .e-indicator-bar {
        padding: 8px;  /* Increase spacing (default: 4px) */
    }

    .e-carousel .slide-content {
        align-items: center;
        display: flex;
        font-size: 1.25rem;
        height: 100%;
        justify-content: center;
    }
</style>

Spacing Options:

• Reduce padding for compact layouts
• Increase padding for touch-friendly mobile interfaces
• Use margin instead of padding for different spacing behavior

Indicator Size and Shape

Customize indicator dimensions and appearance:

@using Syncfusion.Blazor.Navigations

<SfCarousel CssClass="custom-indicators">
    <CarouselItem>
        <div class="slide-content">Slide 1</div>
    </CarouselItem>
    <CarouselItem>
        <div class="slide-content">Slide 2</div>
    </CarouselItem>
    <CarouselItem>
        <div class="slide-content">Slide 3</div>
    </CarouselItem>
    <CarouselItem>
        <div class="slide-content">Slide 4</div>
    </CarouselItem>
    <CarouselItem>
        <div class="slide-content">Slide 5</div>
    </CarouselItem>
</SfCarousel>

<style>
    .custom-indicators .e-carousel-indicators .e-indicator-bars .e-indicator-bar .e-indicator {
        width: 20px;           /* Custom width (default: 8px) */
        height: 20px;          /* Custom height */
        border-radius: 50%;    /* Circular shape (100% or 50%) */
        background-color: #ccc;
    }

    .custom-indicators .e-carousel-indicators .e-indicator-bars .e-indicator-bar.e-active .e-indicator {
        background-color: #007bff;  /* Active indicator color */
    }

    .e-carousel .slide-content {
        align-items: center;
        display: flex;
        font-size: 1.25rem;
        height: 100%;
        justify-content: center;
    }
</style>

Shape Options:

• border-radius: 50% or 100% - Circular dots
• border-radius: 4px - Rounded rectangles
• border-radius: 0 - Square indicators
• border-radius: 50px - Pill-shaped indicators

Indicator Position

Move indicators outside the carousel container or reposition them:

@using Syncfusion.Blazor.Navigations

<SfCarousel CssClass="indicators-outside">
    <CarouselItem>
        <div class="slide-content">Slide 1</div>
    </CarouselItem>
    <CarouselItem>
        <div class="slide-content">Slide 2</div>
    </CarouselItem>
    <CarouselItem>
        <div class="slide-content">Slide 3</div>
    </CarouselItem>
    <CarouselItem>
        <div class="slide-content">Slide 4</div>
    </CarouselItem>
    <CarouselItem>
        <div class="slide-content">Slide 5</div>
    </CarouselItem>
</SfCarousel>

<style>
    .indicators-outside .e-carousel-indicators {
        bottom: -40px;  /* Move indicators below carousel */
        position: relative;
    }

    /* Alternative: Position at top */
    .indicators-top .e-carousel-indicators {
        top: 0;
        bottom: auto;
    }

    .e-carousel .slide-content {
        align-items: center;
        display: flex;
        font-size: 1.25rem;
        height: 100%;
        justify-content: center;
    }
</style>

Positioning Options:

• bottom: auto - Remove default bottom positioning
• top: 0 - Position at top
• bottom: -40px - Position below carousel
• left: 0 or right: 0 - Align to sides

Customizing Navigators

Navigator Icon Size and Color

Customize the previous and next button icons:

@using Syncfusion.Blazor.Navigations

<SfCarousel CssClass="custom-navigators">
    <CarouselItem>
        <div class="slide-content">Slide 1</div>
    </CarouselItem>
    <CarouselItem>
        <div class="slide-content">Slide 2</div>
    </CarouselItem>
    <CarouselItem>
        <div class="slide-content">Slide 3</div>
    </CarouselItem>
    <CarouselItem>
        <div class="slide-content">Slide 4</div>
    </CarouselItem>
    <CarouselItem>
        <div class="slide-content">Slide 5</div>
    </CarouselItem>
</SfCarousel>

<style>
    .custom-navigators .e-carousel-navigators .e-next .e-btn:not(:disabled) .e-btn-icon,
    .custom-navigators .e-carousel-navigators .e-previous .e-btn:not(:disabled) .e-btn-icon {
        color: greenyellow;     /* Custom icon color */
        font-size: 25px;        /* Custom icon size (default: 16px) */
    }

    .e-carousel .slide-content {
        align-items: center;
        display: flex;
        font-size: 1.25rem;
        height: 100%;
        justify-content: center;
    }
</style>

Customization Options:

• Change icon color to match brand
• Increase size for better touch targets
• Add shadows or borders
• Modify hover/active states

Navigator Position

Reposition navigator buttons vertically:

@using Syncfusion.Blazor.Navigations

<SfCarousel CssClass="navigators-bottom">
    <CarouselItem>
        <div class="slide-content">Slide 1</div>
    </CarouselItem>
    <CarouselItem>
        <div class="slide-content">Slide 2</div>
    </CarouselItem>
    <CarouselItem>
        <div class="slide-content">Slide 3</div>
    </CarouselItem>
    <CarouselItem>
        <div class="slide-content">Slide 4</div>
    </CarouselItem>
    <CarouselItem>
        <div class="slide-content">Slide 5</div>
    </CarouselItem>
</SfCarousel>

<style>
    .navigators-bottom .e-carousel-navigators {
        top: auto;      /* Remove default top: 50% */
        bottom: 20px;   /* Position 20px from bottom */
    }

    .e-carousel .slide-content {
        align-items: center;
        display: flex;
        font-size: 1.25rem;
        height: 100%;
        justify-content: center;
    }
</style>

Position Variations:

• top: 20px - Position near top
• bottom: 20px - Position near bottom
• top: 50%; transform: translateY(-50%) - Center vertically (default)

External Navigator Buttons

Position navigation buttons outside the carousel area:

@using Syncfusion.Blazor.Navigations

<SfCarousel CssClass="external-navigators">
    <CarouselItem>
        <div class="slide-content">Slide 1</div>
    </CarouselItem>
    <CarouselItem>
        <div class="slide-content">Slide 2</div>
    </CarouselItem>
    <CarouselItem>
        <div class="slide-content">Slide 3</div>
    </CarouselItem>
    <CarouselItem>
        <div class="slide-content">Slide 4</div>
    </CarouselItem>
    <CarouselItem>
        <div class="slide-content">Slide 5</div>
    </CarouselItem>
</SfCarousel>

<style>
    .external-navigators .e-carousel-navigators .e-previous,
    .external-navigators .e-carousel-navigators .e-next {
        margin: 0 -60px;       /* Move buttons outside by 60px */
        background: black;      /* Add background */
        border-radius: 50%;     /* Make circular */
        width: 40px;
        height: 40px;
    }

    .e-carousel .slide-content {
        align-items: center;
        display: flex;
        font-size: 1.25rem;
        height: 100%;
        justify-content: center;
    }
</style>

Use Cases:

• Full-width carousels with external controls
• Image galleries where buttons shouldn't overlay images
• Designs requiring clear separation between content and controls

Customizing Partial Slides

Adjust the visible area of partial slides:

@using Syncfusion.Blazor.Navigations

<SfCarousel PartialVisible="true" CssClass="custom-partial">
    <CarouselItem>
        <figure class="img-container">
            <img src="https://ej2.syncfusion.com/products/images/carousel/cardinal.png" 
                 alt="cardinal" 
                 style="height:100%;width:100%;" />
            <figcaption class="img-caption">Cardinal</figcaption>
        </figure>
    </CarouselItem>
    <CarouselItem>
        <figure class="img-container">
            <img src="https://ej2.syncfusion.com/products/images/carousel/hunei.png" 
                 alt="kingfisher" 
                 style="height:100%;width:100%;" />
            <figcaption class="img-caption">Kingfisher</figcaption>
        </figure>
    </CarouselItem>
    <CarouselItem>
        <figure class="img-container">
            <img src="https://ej2.syncfusion.com/products/images/carousel/costa-rica.png" 
                 alt="keel-billed-toucan" 
                 style="height:100%;width:100%;" />
            <figcaption class="img-caption">Keel-billed-toucan</figcaption>
        </figure>
    </CarouselItem>
    <CarouselItem>
        <figure class="img-container">
            <img src="https://ej2.syncfusion.com/products/images/carousel/kaohsiung.png" 
                 alt="yellow-warbler" 
                 style="height:100%;width:100%;" />
            <figcaption class="img-caption">Yellow-warbler</figcaption>
        </figure>
    </CarouselItem>
    <CarouselItem>
        <figure class="img-container">
            <img src="https://ej2.syncfusion.com/products/images/carousel/bee-eater.png" 
                 alt="bee-eater" 
                 style="height:100%;width:100%;" />
            <figcaption class="img-caption">Bee-eater</figcaption>
        </figure>
    </CarouselItem>
</SfCarousel>

<style>
    .custom-partial.e-carousel.e-partial .e-carousel-slide-container {
        padding: 0 150px;  /* Show more/less of adjacent slides */
    }

    .img-container {
        margin: 0 10px;
        width: 100%;
        height: 100%;
    }

    .img-caption {
        bottom: 4em;
        color: #fff;
        font-size: 12pt;
        height: 2em;
        position: relative;
        padding: 0.3em 1em;
        text-align: center;
        width: 100%;
    }
</style>

Padding Values:

• padding: 0 50px - Show small preview (more of active slide visible)
• padding: 0 150px - Show larger preview (less of active slide visible)
• padding: 0 250px - Show maximum preview (adjacent slides almost equal to active)

Responsive Partial Slides:

/* Adjust partial visibility for different screen sizes */
.custom-partial.e-carousel.e-partial .e-carousel-slide-container {
    padding: 0 150px;
}

@media (max-width: 768px) {
    .custom-partial.e-carousel.e-partial .e-carousel-slide-container {
        padding: 0 80px;  /* Smaller padding for tablets */
    }
}

@media (max-width: 480px) {
    .custom-partial.e-carousel.e-partial .e-carousel-slide-container {
        padding: 0 40px;  /* Even smaller for mobile */
    }
}

Additional Customization Tips

Custom Active Slide Styling

.e-carousel .e-carousel-item.e-active {
    transform: scale(1.05);
    box-shadow: 0 10px 30px rgba(0, 0, 0, 0.3);
    z-index: 1;
}

Smooth Transitions

.e-carousel .e-carousel-item {
    transition: all 0.3s ease-in-out;
}

Background and Borders

.e-carousel {
    background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
    border: 2px solid #333;
    border-radius: 10px;
    overflow: hidden;
}

Custom Button Backgrounds

.e-carousel .e-carousel-navigators .e-btn {
    background-color: rgba(0, 0, 0, 0.5);
    border-radius: 50%;
}

.e-carousel .e-carousel-navigators .e-btn:hover {
    background-color: rgba(0, 0, 0, 0.8);
}

Using Theme Studio

For comprehensive theme customization, use Syncfusion Theme Studio:

1. Select the base theme (Material, Bootstrap, Fluent, etc.) 2. Customize colors, fonts, and component-specific styles 3. Download the custom theme CSS 4. Reference it in your application

This approach ensures consistent styling across all Syncfusion components in your application.