Blazor Carousel Overview
The Carousel for Blazor is an interactive component that allows users to browse a collection of content items (pages) one at a time. The Carousel template supports random web content, although it is most often used to display images.
The Carousel component is part of Telerik UI for Blazor, a
professional grade UI library with 110+ native components for building modern and feature-rich applications. To try it out sign up for a free 30-day trial.
Creating Blazor Carousel
- Use the
TelerikCarouseltag to add the component to your razor page. - Populate the
Dataproperty with your collection of items. - Use the nested
<Template>tag to declare the HTML content that you want to display. - Set
WidthandHeightattributes of the Carousel, according to the content to display.
Carousel with 5 pages and some basic content
@* Blazor Carousel *@
<TelerikCarousel Data="@CarouselData"
Width="400px" Height="200px">
<Template>
<div class="item">ID @(context.ID) : @(context.Text)</div>
</Template>
</TelerikCarousel>
<style>
.item {
background: #3d57d8;
color: #fff;
font: 36px/200px sans-serif;
text-align: center;
}
</style>
@code {
public IEnumerable<CarouselModel> CarouselData = Enumerable.Range(1, 5).Select(x => new CarouselModel
{
ID = x,
Text = "Text " + x
});
public class CarouselModel
{
public int ID { get; set; }
public string Text { get; set; }
}
}
The
carousel-itemclass is used by Bootstrap which introduces some conflicts and might lead to undesired behavior if used in the Template. That said, you should avoid it when setting CSS class for the child element of the Carousel Template.
Template
To display any content in the Carousel, use a Template and place your desired markup inside. If a template is not set, the Carousel will not display anything.
Events
The Blazor Carousel generates events that you can handle and further customize its behavior. Read more about the Blazor Carousel events...
Carousel Parameters
The following table lists Carousel parameters. Check the Carousel API Reference for a full list of properties, methods and events.
| Parameter | Type and Default Value | Description |
|---|---|---|
Arrows |
bool ( true) |
Whether the navigation arrow buttons will be shown. |
LoopPages |
bool ( true) |
Whether the Carousel will switch to the first page, when the last one is reached. |
Pageable |
bool ( true) |
Whether the overlay pager will be visible. Each page is represented by a clickable dot. The current page is represented by a colored dot. If the dots cannot fit in the available horizontal space, the pager will be scrollable. |
Page |
int ( 1 ) |
The 1-based index of content item to display. Supports two-way binding. |
AutomaticPageChange |
bool ( true) |
Whether the Carousel will automatically switch to the next page after a short delay. |
AutomaticPageChangeInterval |
int ( 5000 ) |
The automatic page change delay in milliseconds. |
Width |
string |
The Carousel width. See Dimensions for more details. The Carousel renders in a <div>, so it expands horizontally to 100% by default. |
Height |
string |
The Carousel height. By default and by design, the component has no height and does not expand, based on its content. In other words, the Carousel will be zero pixels high, if height is not applied. |
Class |
string |
The CSS class that will be rendered on the main wrapping element of the component. Use it to apply custom styles or override the theme. |
Carousel Reference and Methods
To execute Carousel methods, obtain reference to the component instance via @ref.
The Carousel is a generic component. Its type depends on the type of its model and the type of its Value. In case you cannot provide either the Value or Data initially, you need to set the corresponding types to the TItem and TValue parameters.
The table below lists the Carousel methods. Also consult the Carousel API.
| Method | Description |
|---|---|
Rebind |
Refreshes the component data. |
<TelerikCarousel @ref="@CarouselRef" .../>
@code{
private TelerikCarousel<MyModel> CarouselRef;
}