Skip to content

1031413: Updated Carousel playground sample #9047

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Merged
kmkrish001 merged 2 commits into from
Jun 13, 2026
Merged

1031413: Updated Carousel playground sample #9047

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
2 commits
Select commit Hold shift + click to select a range
9249ff8
1031413: Updated Carousel playground sample
ponselvajeganathan Jun 12, 2026
ad7ec7e
Merge branch 'development' into 1031413-carousel
kmkrish001 Jun 13, 2026
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
18 changes: 9 additions & 9 deletions blazor/carousel/animations-and-transitions.md
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -63,7 +63,7 @@ The following demo depicts the example for `Fade` animation,

</style>
```
{% previewsample "https://blazorplayground.syncfusion.com/embed/LNrUMrhrhmDEXNND?appbar=false&editor=false&result=true&errorlist=false&theme=bootstrap5" backgroundimage "[Carousel fade animation](images/fade_animation.gif)" %}
{% previewsample "https://blazorplayground.syncfusion.com/embed/hNLxZdsrAVfjOACG?appbar=false&editor=false&result=true&errorlist=false&theme=fluent2" backgroundimage "[Carousel fade animation](images/fade_animation.gif)" %}

### Custom animation

Expand Down Expand Up @@ -154,7 +154,7 @@ The following demo depicts the example for `parallax` custom animation

</style>
```
{% previewsample "https://blazorplayground.syncfusion.com/embed/VjhgWrBrLGWiDURZ?appbar=false&editor=false&result=true&errorlist=false&theme=bootstrap5" backgroundimage "[Carousel custom animation](images/custom_animation.gif)" %}
{% previewsample "https://blazorplayground.syncfusion.com/embed/LNrxDHsVAhpTPgJU?appbar=false&editor=false&result=true&errorlist=false&theme=fluent2" backgroundimage "[Carousel custom animation](images/custom_animation.gif)" %}

## Intervals between slides

Expand Down Expand Up @@ -200,7 +200,7 @@ Using the items property, you can set different intervals for each item to trans
}
</style>
```
{% previewsample "https://blazorplayground.syncfusion.com/embed/LZBAshBVVwCUQGvt?appbar=false&editor=false&result=true&errorlist=false&theme=bootstrap5" %}
{% previewsample "https://blazorplayground.syncfusion.com/embed/VjBxNxCVUVfbpnIM?appbar=false&editor=false&result=true&errorlist=false&theme=fluent2" %}

N> Interval property can accept value in terms of milliseconds.

Expand Down Expand Up @@ -248,7 +248,7 @@ In the carousel, all slides transitions are performed continuously after the spe
}
</style>
```
{% previewsample "https://blazorplayground.syncfusion.com/embed/rZrAihLBhwCyYryK?appbar=false&editor=false&result=true&errorlist=false&theme=bootstrap5" %}
{% previewsample "https://blazorplayground.syncfusion.com/embed/hNVRDRWrKVIryvrP?appbar=false&editor=false&result=true&errorlist=false&theme=fluent2" %}

## Pause on hover

Expand Down Expand Up @@ -296,7 +296,7 @@ The following example depicts the code to play the slides when hovering the mous
}
</style>
```
{% previewsample "https://blazorplayground.syncfusion.com/embed/hXrKWLLhhGsvUQay?appbar=false&editor=false&result=true&errorlist=false&theme=bootstrap5" %}
{% previewsample "https://blazorplayground.syncfusion.com/embed/rDBdjRWVKLIHItiK?appbar=false&editor=false&result=true&errorlist=false&theme=fluent2" %}

## Looping slides

Expand Down Expand Up @@ -342,7 +342,7 @@ In the carousel, slides transitions are repeated continuously when you reach the
}
</style>
```
{% previewsample "https://blazorplayground.syncfusion.com/embed/LXrgiVVhrwLArCWL?appbar=false&editor=false&result=true&errorlist=false&theme=bootstrap5" backgroundimage "[Carousel Looping Slides](images/looping_slides.png)" %}
{% previewsample "https://blazorplayground.syncfusion.com/embed/rDrHjdChUhHCGnew?appbar=false&editor=false&result=true&errorlist=false&theme=fluent2" backgroundimage "[Carousel Looping Slides](images/looping_slides.png)" %}

## Slide changing events

Expand Down Expand Up @@ -397,7 +397,7 @@ The following demo depicts the example for carousel events,
}
</style>
```
{% previewsample "https://blazorplayground.syncfusion.com/embed/rtLKCrLrrQLIIQtX?appbar=false&editor=false&result=true&errorlist=false&theme=bootstrap5" %}
{% previewsample "https://blazorplayground.syncfusion.com/embed/hZhHDRWBULRIpgrG?appbar=false&editor=false&result=true&errorlist=false&theme=fluent2" %}

## Disable touch swiping

Expand Down Expand Up @@ -443,7 +443,7 @@ In the carousel, you can able to perform swipe the carousel slides using touch a
}
</style>
```
{% previewsample "https://blazorplayground.syncfusion.com/embed/VNBUMrhBVGVwHmZw?appbar=false&editor=false&result=true&errorlist=false&theme=bootstrap5" %}
{% previewsample "https://blazorplayground.syncfusion.com/embed/BNBRZnWVArxYNuuP?appbar=false&editor=false&result=true&errorlist=false&theme=fluent2" %}

## Swipe modes

Expand Down Expand Up @@ -503,4 +503,4 @@ The following are the different swipe modes available in the carousel:

</style>
```
{% previewsample "https://blazorplayground.syncfusion.com/embed/LZhgMVVVhQADiviB?appbar=false&editor=false&result=true&errorlist=false&theme=bootstrap5" backgroundimage "[Carousel Swipe Mode](images/swipe.gif)" %}
{% previewsample "https://blazorplayground.syncfusion.com/embed/rthxDnChUBQKMXup?appbar=false&editor=false&result=true&errorlist=false&theme=fluent2" backgroundimage "[Carousel Swipe Mode](images/swipe.gif)" %}
2 changes: 1 addition & 1 deletion blazor/carousel/getting-started-with-server-app.md
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -227,7 +227,7 @@ N> If the Interactivity Location is set to `Global`, the render mode is automati

* Press <kbd>Ctrl</kbd>+<kbd>F5</kbd> (Windows) or <kbd>⌘</kbd>+<kbd>F5</kbd> (macOS) to launch the application. This will render the Blazor Carousel component in the default web browser.

{% previewsample "https://blazorplayground.syncfusion.com/embed/hthSMMhiVkQbevAP?appbar=false&editor=false&result=true&errorlist=false&theme=bootstrap5" backgroundimage "[Blazor Carousel Component.](images/blazor-carousel-getting-started.png)" %}
{% previewsample "https://blazorplayground.syncfusion.com/embed/BXrRZHsVUrMKRirX?appbar=false&editor=false&result=true&errorlist=false&theme=fluent2" backgroundimage "[Blazor Carousel Component.](images/blazor-carousel-getting-started.png)" %}

N> [View Sample in GitHub](https://github.com/SyncfusionExamples/Blazor-Getting-Started-Examples/tree/main/Carousel).

Expand Down
2 changes: 1 addition & 1 deletion blazor/carousel/getting-started-with-web-app.md
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -235,7 +235,7 @@ N> If the **Interactivity Location** is set to `Global` with `Auto` or `WebAssem

* Press <kbd>Ctrl</kbd>+<kbd>F5</kbd> (Windows) or <kbd>⌘</kbd>+<kbd>F5</kbd> (macOS) to launch the application. This will render the Blazor Carousel component in the default web browser.

{% previewsample "https://blazorplayground.syncfusion.com/embed/hthSMMhiVkQbevAP?appbar=false&editor=false&result=true&errorlist=false&theme=bootstrap5" backgroundimage "[Blazor Carousel Component.](images/blazor-carousel-getting-started.png)" %}
{% previewsample "https://blazorplayground.syncfusion.com/embed/BXrRZHsVUrMKRirX?appbar=false&editor=false&result=true&errorlist=false&theme=fluent2" backgroundimage "[Blazor Carousel Component.](images/blazor-carousel-getting-started.png)" %}

N> [View Sample in GitHub](https://github.com/SyncfusionExamples/Blazor-Getting-Started-Examples/tree/main/Carousel).

Expand Down
2 changes: 1 addition & 1 deletion blazor/carousel/getting-started.md
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -213,6 +213,6 @@ Add the Blazor Carousel component in the **~/Pages/Index.razor** file.

* Press <kbd>Ctrl</kbd>+<kbd>F5</kbd> (Windows) or <kbd>⌘</kbd>+<kbd>F5</kbd> (macOS) to launch the application. This will render the Blazor Carousel component in the default web browser.

{% previewsample "https://blazorplayground.syncfusion.com/embed/hthSMMhiVkQbevAP?appbar=false&editor=false&result=true&errorlist=false&theme=bootstrap5" backgroundimage "[Blazor Carousel Component](images/blazor-carousel-getting-started.png)" %}
{% previewsample "https://blazorplayground.syncfusion.com/embed/BXrRZHsVUrMKRirX?appbar=false&editor=false&result=true&errorlist=false&theme=fluent2" backgroundimage "[Blazor Carousel Component](images/blazor-carousel-getting-started.png)" %}

N> [View Sample in GitHub](https://github.com/SyncfusionExamples/Blazor-Getting-Started-Examples/tree/main/Carousel).
24 changes: 12 additions & 12 deletions blazor/carousel/navigators-and-indicators.md
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -68,7 +68,7 @@ The following example depicts the code to hide the navigators in the carousel.
}
</style>
```
{% previewsample "https://blazorplayground.syncfusion.com/embed/hDhKCBVhAsyEmfKw?appbar=false&editor=false&result=true&errorlist=false&theme=bootstrap5" backgroundimage "[Carousel Navigators](images/navigators_hidden.png)" %}
{% previewsample "https://blazorplayground.syncfusion.com/embed/LjrRXHMhgVvjpWIz?appbar=false&editor=false&result=true&errorlist=false&theme=fluent2" backgroundimage "[Carousel Navigators](images/navigators_hidden.png)" %}

### Show previous and next button on hover

Expand Down Expand Up @@ -114,7 +114,7 @@ In the carousel, you can show the previous and next buttons only on mouse hover
}
</style>
```
{% previewsample "https://blazorplayground.syncfusion.com/embed/VDrAiBrLAMdVnAce?appbar=false&editor=false&result=true&errorlist=false&theme=bootstrap5" backgroundimage "[Carousel Navigators OnHover](images/navigators_onhover.gif)" %}
{% previewsample "https://blazorplayground.syncfusion.com/embed/hDrdNdWLqBbvsovw?appbar=false&editor=false&result=true&errorlist=false&theme=fluent2" backgroundimage "[Carousel Navigators OnHover](images/navigators_onhover.gif)" %}

### Previous and next button template

Expand Down Expand Up @@ -196,7 +196,7 @@ Template options are provided to customize the previous button using [PreviousBu
}
</style>
```
{% previewsample "https://blazorplayground.syncfusion.com/embed/rZVUihrBKinwfomJ?appbar=false&editor=false&result=true&errorlist=false&theme=bootstrap5" backgroundimage "[Carousel Navigators Template](images/navigators_template.png)" %}
{% previewsample "https://blazorplayground.syncfusion.com/embed/VDhRjxihqwIdLwvS?appbar=false&editor=false&result=true&errorlist=false&theme=fluent2" backgroundimage "[Carousel Navigators Template](images/navigators_template.png)" %}

## Indicators

Expand Down Expand Up @@ -244,7 +244,7 @@ In indicators, the total slides and current slide state have been depicted. You
}
</style>
```
{% previewsample "https://blazorplayground.syncfusion.com/embed/VDBAsVBBgWwAAeOK?appbar=false&editor=false&result=true&errorlist=false&theme=bootstrap5" backgroundimage "[Carousel Indicators](images/indicators_hidden.png)" %}
{% previewsample "https://blazorplayground.syncfusion.com/embed/LZLnXxMLKwHjTyeK?appbar=false&editor=false&result=true&errorlist=false&theme=fluent2" backgroundimage "[Carousel Indicators](images/indicators_hidden.png)" %}

### Indicators template

Expand Down Expand Up @@ -320,7 +320,7 @@ Template option is provided to customize the indicators by using the [Indicators
}
</style>
```
{% previewsample "https://blazorplayground.syncfusion.com/embed/rNLqshhrUWwRrjbh?appbar=false&editor=false&result=true&errorlist=false&theme=bootstrap5" backgroundimage "[Carousel Indicators](images/indicators_template.png)" %}
{% previewsample "https://blazorplayground.syncfusion.com/embed/rXBHXdirUGRTCSEU?appbar=false&editor=false&result=true&errorlist=false&theme=fluent2" backgroundimage "[Carousel Indicators](images/indicators_template.png)" %}

### Showing preview of slide in indicator

Expand Down Expand Up @@ -395,7 +395,7 @@ You can customize the indicators by showing the preview image of each slide usin
}
</style>
```
{% previewsample "https://blazorplayground.syncfusion.com/embed/VtLAsVBBgMwagdvn?appbar=false&editor=false&result=true&errorlist=false&theme=bootstrap5" backgroundimage "[Carousel Indicators](images/indicators_preview.png)" %}
{% previewsample "https://blazorplayground.syncfusion.com/embed/LNrRZRMLgGRcEJmC?appbar=false&editor=false&result=true&errorlist=false&theme=fluent2" backgroundimage "[Carousel Indicators](images/indicators_preview.png)" %}

### Indicators Types

Expand Down Expand Up @@ -450,7 +450,7 @@ A default indicator in a carousel is a set of dots that indicate the current pos
}
</style>
```
{% previewsample "https://blazorplayground.syncfusion.com/embed/BXBKsBVhKsaLlNlA?appbar=false&editor=false&result=true&errorlist=false&theme=bootstrap5" backgroundimage "[Carousel indicators type default](images/indicator-default.png)" %}
{% previewsample "https://blazorplayground.syncfusion.com/embed/hZLnDnMLUcGzJkqk?appbar=false&editor=false&result=true&errorlist=false&theme=fluent2" backgroundimage "[Carousel indicators type default](images/indicator-default.png)" %}

#### Dynamic Indicator

Expand Down Expand Up @@ -496,7 +496,7 @@ A dynamic indicator in a carousel provides visual cues or markers that dynamical
}
</style>
```
{% previewsample "https://blazorplayground.syncfusion.com/embed/rZBqsLBhACumvJUW?appbar=false&editor=false&result=true&errorlist=false&theme=bootstrap5" backgroundimage "[Carousel indicators type dynamic](images/indicator-dynamic.png)" %}
{% previewsample "https://blazorplayground.syncfusion.com/embed/LNhRDxMLUQcvmJUr?appbar=false&editor=false&result=true&errorlist=false&theme=fluent2" backgroundimage "[Carousel indicators type dynamic](images/indicator-dynamic.png)" %}

#### Fraction Indicator

Expand Down Expand Up @@ -542,7 +542,7 @@ The fraction indicator type displays the current slide index and total slide cou
}
</style>
```
{% previewsample "https://blazorplayground.syncfusion.com/embed/rXBUCBhhqVZMmiMz?appbar=false&editor=false&result=true&errorlist=false&theme=bootstrap5" backgroundimage "[Carousel indicators type fraction](images/indicator-fraction.png)" %}
{% previewsample "https://blazorplayground.syncfusion.com/embed/rjhxXdWBKclxjGmG?appbar=false&editor=false&result=true&errorlist=false&theme=fluent2" backgroundimage "[Carousel indicators type fraction](images/indicator-fraction.png)" %}

#### Progress Indicator

Expand Down Expand Up @@ -588,7 +588,7 @@ The Progress Indicator type displays the current slide as a progress bar. The Pr
}
</style>
```
{% previewsample "https://blazorplayground.syncfusion.com/embed/rDBgChBrqhNyvyRO?appbar=false&editor=false&result=true&errorlist=false&theme=bootstrap5" backgroundimage "[Carousel indicators type progress](images/indicator-progress.png)" %}
{% previewsample "https://blazorplayground.syncfusion.com/embed/BXrdtRirgmaDwhqA?appbar=false&editor=false&result=true&errorlist=false&theme=fluent2" backgroundimage "[Carousel indicators type progress](images/indicator-progress.png)" %}

## Play button

Expand Down Expand Up @@ -636,7 +636,7 @@ In the carousel, [AutoPlay](https://help.syncfusion.com/cr/blazor/Syncfusion.Bla
}
</style>
```
{% previewsample "https://blazorplayground.syncfusion.com/embed/htLUCBVrgBjuRDmo?appbar=false&editor=false&result=true&errorlist=false&theme=bootstrap5" backgroundimage "[Carousel Indicators](images/play_button.png)" %}
{% previewsample "https://blazorplayground.syncfusion.com/embed/BZhnNRCBgmuxgyfO?appbar=false&editor=false&result=true&errorlist=false&theme=fluent2" backgroundimage "[Carousel Indicators](images/play_button.png)" %}

### Play button template

Expand Down Expand Up @@ -715,4 +715,4 @@ Template option is provided to customize the play button by using the [PlayButto
}
</style>
```
{% previewsample "https://blazorplayground.syncfusion.com/embed/htrgsVVhgVCgSyAJ?appbar=false&editor=false&result=true&errorlist=false&theme=bootstrap5" backgroundimage "[Carousel Indicators](images/play_button_template.png)" %}
{% previewsample "https://blazorplayground.syncfusion.com/embed/hjrdjnsBqmaaYvtc?appbar=false&editor=false&result=true&errorlist=false&theme=fluent2" backgroundimage "[Carousel Indicators](images/play_button_template.png)" %}
10 changes: 5 additions & 5 deletions blazor/carousel/populating-items.md
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -53,7 +53,7 @@ When rendering the Carousel component using items binding, you can assign templa
}
</style>
```
{% previewsample "https://blazorplayground.syncfusion.com/embed/rDVAChhhVnHFuwlZ?appbar=false&editor=false&result=true&errorlist=false&theme=bootstrap5" %}
{% previewsample "https://blazorplayground.syncfusion.com/embed/VXVxjxWVUhhiStlD?appbar=false&editor=false&result=true&errorlist=false&theme=fluent2" %}

## Selection

Expand Down Expand Up @@ -110,7 +110,7 @@ Using the [SelectedIndex](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazo
}
</style>
```
{% previewsample "https://blazorplayground.syncfusion.com/embed/rZLgiVVLhncMgRcW?appbar=false&editor=false&result=true&errorlist=false&theme=bootstrap5" backgroundimage "[Carousel selected slide](images/selected_index.png)" %}
{% previewsample "https://blazorplayground.syncfusion.com/embed/hDBRXxMLgBrfFPXo?appbar=false&editor=false&result=true&errorlist=false&theme=fluent2" backgroundimage "[Carousel selected slide](images/selected_index.png)" %}

### Select an item using the method

Expand Down Expand Up @@ -180,7 +180,7 @@ Using the [PreviousAsync](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazo
}
</style>
```
{% previewsample "https://blazorplayground.syncfusion.com/embed/BZBKsrLhrHGAvIMH?appbar=false&editor=false&result=true&errorlist=false&theme=bootstrap5" %}
{% previewsample "https://blazorplayground.syncfusion.com/embed/LtBHNHMVghLlzRml?appbar=false&editor=false&result=true&errorlist=false&theme=fluent2" %}

## Partial visible slides

Expand Down Expand Up @@ -235,7 +235,7 @@ The Carousel component supports to show one complete slide and a partial view of

</style>
```
{% previewsample "https://blazorplayground.syncfusion.com/embed/hZhqMVVLVdwQwMNf?appbar=false&editor=false&result=true&errorlist=false&theme=bootstrap5" backgroundimage "[Carousel partial visible slide](images/partial-visible.jpg)" %}
{% previewsample "https://blazorplayground.syncfusion.com/embed/LNBdXRshqBqhCAOS?appbar=false&editor=false&result=true&errorlist=false&theme=fluent2" backgroundimage "[Carousel partial visible slide](images/partial-visible.jpg)" %}

N> Slide animation only applicable if the `partialVisible` is enabled.

Expand Down Expand Up @@ -294,7 +294,7 @@ The following example code depicts the functionality of `partialVisible` and wit

</style>
```
{% previewsample "https://blazorplayground.syncfusion.com/embed/rjLqMrrLhHlMnUgO?appbar=false&editor=false&result=true&errorlist=false&theme=bootstrap5" backgroundimage "[Carousel partial visible slide](images/without-loop.jpg)" %}
{% previewsample "https://blazorplayground.syncfusion.com/embed/rjVxXniVUBqodeNT?appbar=false&editor=false&result=true&errorlist=false&theme=fluent2" backgroundimage "[Carousel partial visible slide](images/without-loop.jpg)" %}

## See also

Expand Down