Carousel

The Carousel field is used to display images or data in a customizable carousel layout. Data for the carousel pages is returned from a target. It has two layouts, basic and advanced. The basic layout is a predefined generic format that allows you to easily slot in images that’s automatically formatted on the carousel pages for you. The advanced layout gives you full control over the pages’ appearance, allowing you to specify raw HTML with your own CSS styles to tailor the pages’ look to suit your business requirements and populate them with the returned target images/data.

The Carousel field has pages, which can display images in basic layout and can display custom HTML as advanced layout. When the layout type is advanced the options to display content as carousel pages are infinite.

This is an example of the Carousel component in the UX with five pages.

Basic Carousel with Five Pages
Carousel Layout

The content is where the image or custom HTML is placed. The arrows and pagers are navigation options for the carousel. The Carousel can be navigated with the arrow keys on a keyboard, which is always turned on by default.

The carousel component has two types of layout, Basic and Advanced. They are selected as Carousel Type in the field definition.

All targets for carousel using the basic layout must return at a minimum, the following columns

  • ImageURL – This column contains the source URL of the images in the carousel component.
  • AltText – This colimn contains the Alt Text of each images in the carousel component.

IMPORTANT NOTE: The number of pages will be determined by how many rows of ImageURL are present. The order of the carousel pages will follow the row order in the table.

Below is the HTML code for a better understanding how the columns are being used in the code.

<TelerikCarousel>
    <Template>
        <div class="CarouselContent CarouselContentBasic">
            <img class="CarouselImage" src="@context.ImageURL" alt="@context.AltText" />
        </div>
    </Template>
</TelerikCarousel>

The advanced layout can be anything that can be displayed as a carousel. It does not require any mandatory columns returned form the target. In the field definition the columns can be specified as Carousel Keys. The keys should also be present in the Carousel HTML code inside curly braces {}. When the component code is executed the keys will be used to find columns in the returned table from the target call and the value of each row of the column will be replaced in the HTML.

IMPORTANT NOTE: The number of pages will be determined by how many rows of data are present. The order of the carousel pages will follow the row order in the table.

Below is the HTML code for a better understanding how the custom HTML is being used in the code, where @context.CarouselBody will contain your custom HTML.

<TelerikCarousel>
    <Template>
        <div class="CarouselContent">
            @context.CarouselBody
        </div>
    </Template>
</TelerikCarousel>

The first section of the component contains all the variables needed for the component to function.

OnParametersSetAsync()

This method is called when the component first loads and when there’s an update to the parent component. The purpose of this method is to assign values to variables and to call GetCarouselData().

This method is used to call the target specified in the field definition, parse the returned data and display it in the carousel. It also formats the custom HTML for advanced carousel layout.

Updated on June 27, 2024

Was this article helpful?

Related Articles

Need Support?
Can’t find the answer you’re looking for? Don’t worry we’re here to help!
Contact Support