Class CarouselItem

A class that represents the Carousel item of SfCarousel component.

Inheritance

System.Object

CarouselItem

Namespace: Syncfusion.Blazor.Navigations

Assembly: Syncfusion.Blazor.dll

Syntax

public class CarouselItem : OwningComponentBase

Examples

In the below code example, a basic Carousel has been rendered using CarouselItem tag directive.

 
<SfCarousel>
    <CarouselItem><div>Slide 1</div></CarouselItem>
    <CarouselItem><div>Slide 2</div></CarouselItem>
    <CarouselItem><div>Slide 3</div></CarouselItem>
</SfCarousel>

Constructors

CarouselItem()

Declaration

public CarouselItem()

Properties

ChildContent

Child Content for the Carousel item.

Declaration

public RenderFragment ChildContent { get; set; }

Property Value

Type	Description
Microsoft.AspNetCore.Components.RenderFragment	The value used to build the content.

CssClass

Gets or sets the classes for carousel item to customize the carousel item.

Declaration

public string CssClass { get; set; }

Property Value

Type	Description
System.String	If we set the css class, then the custom class is applied for carousel item. The default value is null.

Examples

 
<SfCarousel> 
    <CarouselItem CssClass="item1"><div>Slide 1</div></CarouselItem>
    <CarouselItem CssClass="item2"><div>Slide 2</div></CarouselItem>
    <CarouselItem CssClass="item3"><div>Slide 3</div></CarouselItem>
</SfCarousel> 

HtmlAttributes

Gets or sets a collection of additional attributes that will be applied to the carousel item element.

Declaration

public Dictionary<string, object> HtmlAttributes { get; set; }

Property Value

Type	Description
System.Collections.Generic.Dictionary<System.String, System.Object>	It allows the carousel item element to render non-declared attributes. The default value is null.

Examples

 
<SfCarousel>
    <CarouselItem HtmlAttributes="customAttribute"><div>Slide 1</div></CarouselItem>
    <CarouselItem><div>Slide 2</div></CarouselItem>
    <CarouselItem><div>Slide 3</div></CarouselItem>
</SfCarousel>
@code{ 
   Dictionary<string, object> customAttribute = new Dictionary<string, object>() 
   { 
       { "aria-label", "slide1" } 
   }; 
} 

Interval

Gets or sets the auto transition time in milliseconds for individual carousel items.

Declaration

public int Interval { get; set; }

Property Value

Type	Description
System.Int32	If we set the interval value, then the slide transition begins after the specified time interval for individual carousel items otherwise the default interval value 5000 is set.

Examples

 
<SfCarousel> 
    <CarouselItem Interval="3000"><div>Slide 1</div></CarouselItem>
    <CarouselItem><div>Slide 2</div></CarouselItem>
    <CarouselItem><div>Slide 3</div></CarouselItem>
</SfCarousel> 

Template

Gets or sets template to customize the carousel item.

Declaration

public RenderFragment Template { get; set; }

Property Value

Type	Description
Microsoft.AspNetCore.Components.RenderFragment	A template content that specifies the visualization of carousel item. The default value is null.

Examples

 
<SfCarousel> 
    <CarouselItem><Template><div>Slide 1</div></Template></CarouselItem>
    <CarouselItem><Template><div>Slide 2</div></Template></CarouselItem>
    <CarouselItem><Template><div>Slide 3</div></Template></CarouselItem>
</SfCarousel> 

Methods

Dispose(Boolean)

Dispose unmanaged resources in the Syncfusion Blazor component.

Declaration

protected override void Dispose(bool disposing)

Parameters

Type	Name	Description
System.Boolean	disposing	Boolean value to dispose the object.

OnInitialized()

Method invoked when the component is ready to start.

Declaration

protected override void OnInitialized()