Populating Items in Blazor Carousel
27 Aug 202611 minutes to read
Populating items using CarouselItem
You can populate the Blazor Carousel by declaring CarouselItem child components inside SfCarousel. You can customize the transition interval for each item separately using the Interval property on CarouselItem. The following example demonstrates populating items using CarouselItem.
@using Syncfusion.Blazor.Navigations
<div class="control-container">
<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>
</div>
<style>
.control-container {
background-color: #adb5bd;
height: 300px;
margin: 0 auto;
width: 500px;
}
.e-carousel .slide-content {
align-items: center;
display: flex;
font-size: 1.25rem;
height: 100%;
justify-content: center;
}
</style>Selection
By default, the Blazor Carousel displays the first slide. You can select a different slide in one of the following ways:
- Select an item using the property.
- Select an item using the method.
Select an item using the property
Use the SelectedIndex property (default: 0) to set the slide displayed at initial rendering, or to switch to a specific slide at any time. The two-way bindable form (@bind-SelectedIndex) keeps the property synchronized with the active index.
@using Syncfusion.Blazor.Navigations
<div class="control-container">
<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>
</div>
@code {
int CurrentIndex = 2;
}
<style>
.control-container {
background-color: #adb5bd;
height: 300px;
margin: 0 auto;
width: 500px;
}
.e-carousel .slide-content {
align-items: center;
display: flex;
font-size: 1.25rem;
height: 100%;
justify-content: center;
}
</style>
Select an item using the method
Use the PreviousAsync or NextAsync public methods of the Blazor Carousel component to navigate to the previous or next slide programmatically.
@using Syncfusion.Blazor.Buttons
@using Syncfusion.Blazor.Navigations
<div class="container">
<div class="row control-container">
<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>
<div class="row justify-content-center">
<SfButton CssClass="w-auto" @onclick="@(()=>OnNavigationClick(CarouselSlideDirection.Previous))">Previous</SfButton>
<SfButton CssClass="w-auto" @onclick="@(()=>OnNavigationClick(CarouselSlideDirection.Next))">Next</SfButton>
</div>
</div>
@code {
SfCarousel CarouselRef;
int CurrentIndex = 2;
async Task OnNavigationClick(CarouselSlideDirection slideDirection)
{
if (slideDirection == CarouselSlideDirection.Previous)
{
await CarouselRef.PreviousAsync();
}
else
{
await CarouselRef.NextAsync();
}
}
}
<style>
.control-container {
background-color: #adb5bd;
height: 300px;
margin: 0 auto;
width: 500px;
}
.e-carousel .slide-content {
align-items: center;
display: flex;
font-size: 1.25rem;
height: 100%;
justify-content: center;
}
</style>Partial visible slides
The Blazor Carousel can display one complete slide along with a partial view of the adjacent (previous and next) slides at the same time. You can enable or disable this behavior using the PartialVisible property (default: false).
@using Syncfusion.Blazor.Navigations
<div class="control-container">
<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>
</div>
<style>
.control-container {
margin: 0 auto 2em;
max-width: 800px;
height: 300px;
}
.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>
NOTE
Slide animation applies only when
PartialVisibleis enabled.
The last slide is displayed as a partial slide during initial rendering when the Loop and PartialVisible properties are both enabled.
The previous slide is not displayed at initial rendering when Loop is disabled.
The following example demonstrates the PartialVisible behavior when Loop is disabled.
@using Syncfusion.Blazor.Navigations
<div class="control-container">
<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>
</div>
<style>
.control-container {
margin: 0 auto 2em;
max-width: 800px;
height: 300px;
}
.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>