syncfusion-blazor-carousel

What this skill does

# 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](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](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](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](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](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](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:

```cshtml
@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](references/getting-started.md) for setup details.

## Common Patterns

### Pattern 1: Auto-Playing Carousel with Pause on Hover

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

```cshtml
<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)

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

```cshtml
@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

```cshtml
<SfCarousel AnimationEffect="CarouselAnimationEffect.Fade">
    <CarouselItem Interval="2000">
        <div>Quick Slide (2