Class CarouselItem

A class that represents the Carousel item of SfCarousel component.

Inheritance
object
ComponentBase
OwningComponentBase
SfOwningComponentBase
CarouselItem
Implements
Inherited Members
Namespace: Syncfusion.Blazor.Navigations
Assembly: Syncfusion.Blazor.dll
Syntax
public class CarouselItem : SfOwningComponentBase, IComponent, IHandleEvent, IHandleAfterRender, IDisposable
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
[Parameter]
public RenderFragment ChildContent { get; set; }
Property Value
Type Description
RenderFragment

The value used to build the content.

CssClass

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

Declaration
[Parameter]
public string CssClass { get; set; }
Property Value
Type Description
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>

Interval

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

Declaration
[Parameter]
public int Interval { get; set; }
Property Value
Type Description
int

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
[Parameter]
public RenderFragment Template { get; set; }
Property Value
Type Description
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(bool)

Dispose unmanaged resources in the Syncfusion Blazor component.

Declaration
protected override void Dispose(bool disposing)
Parameters
Type Name Description
bool disposing

Boolean value to dispose the object.
Overrides

OnInitialized()

Method invoked when the component is ready to start.

Declaration
protected override void OnInitialized()
Overrides

Implements