Class SfCarousel

The carousel component is a slide show of images, contents or images with contents.

Inheritance

System.Object

SfBaseComponent

SfCarousel

Inherited Members

SfBaseComponent.Dispose()

SfBaseComponent.Dispose(Boolean)

SfBaseComponent.OnInitializedAsync()

SfBaseComponent.OnObservableChange(String, Object, Boolean, NotifyCollectionChangedEventArgs)

Namespace: Syncfusion.Blazor.Navigations

Assembly: Syncfusion.Blazor.dll

Syntax

public class SfCarousel : SfBaseComponent

Remarks

Carousel items can be populated by specifying CarouselItem within SfCarousel tag directive.

Examples

In the below code example, a basic Carousel component initialized with CarouselItem tag directive.

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

Constructors

SfCarousel()

Declaration

public SfCarousel()

Properties

AllowKeyboardInteraction

Gets or sets the ability to use keyboard input in the Carousel.

Declaration

public bool AllowKeyboardInteraction { get; set; }

Property Value

Type	Description
System.Boolean	A boolean value indicating whether keyboard interaction is enabled. The default value is true.

Remarks

If any form input component is placed on the carousel slide, interacting with it may cause
the left/right arrow keys to navigate to other slides. Disabling keyboard interaction helps
prevent this unintended navigation, leading to a smoother user experience.

AnimationEffect

Gets or sets the animation effects applies to the slide transition.

Declaration

public CarouselAnimationEffect AnimationEffect { get; set; }

Property Value

Type	Description
CarouselAnimationEffect	One of the CarouselAnimationEffect enumeration. The default value is Slide

Examples

 
<SfCarousel AnimationEffect="CarouselAnimationEffect.Fade">
    <CarouselItem><div>Slide 1</div></CarouselItem>
    <CarouselItem><div>Slide 2</div></CarouselItem>
    <CarouselItem><div>Slide 3</div></CarouselItem>
</SfCarousel> 

AutoPlay

Gets or sets whether the slide transition is automatic or manual.

Declaration

public bool AutoPlay { get; set; }

Property Value

Type	Description
System.Boolean	false, the slide transition has been stopped otherwise the slide transition plays. The default value is true.

ButtonsVisibility

Gets or sets whether to show previous/next navigation buttons or not.

Declaration

public CarouselButtonVisibility ButtonsVisibility { get; set; }

Property Value

Type	Description
CarouselButtonVisibility	One of the CarouselButtonVisibility enumeration. The default value is Visible

Examples

 
<SfCarousel ButtonsVisibility="CarouselButtonVisibility.VisibleOnHover"></SfCarousel> 

CssClass

Gets or sets the custom classes to customize the Carousel component.

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. The default value is null.

Examples

 
<SfCarousel CssClass="custom-carousel e-custom-animation"></SfCarousel> 

EnablePersistence

Gets or sets whether to persist component's state between page reloads.

Declaration

public bool EnablePersistence { get; set; }

Property Value

Type	Description
System.Boolean	true, the SelectedIndex property is persisted. The default value is false.

Remarks

To persist the SelectedIndex property, it is mandatory to provide the ID property.

Examples

 
<SfCarousel Id="CarouselSlide" EnablePersistence="true"></SfCarousel> 

EnableRtl

Gets or sets whether the right to left direction is enabled for Carousel component.

Declaration

public bool EnableRtl { get; set; }

Property Value

Type	Description
System.Boolean	true, the right to left direction is enabled for carousel component. The default value is false.

EnableTouchSwipe

Gets or sets whether the slide transition should occur or not when performing swipe action.

Declaration

public bool EnableTouchSwipe { get; set; }

Property Value

Type	Description
System.Boolean	true, the slide transition with swipe action in touch screen works otherwise touch swipe action does not work. The default value is true.

Height

Gets or sets the height of the Carousel in pixels/number/percentage. Number value is considered as pixels.

Declaration

public string Height { get; set; }

Property Value

Type	Description
System.String	If we set the height value, then the carousel will render based on specified height otherwise the default height value auto is set.

Examples

 
<SfCarousel Height="500px"></SfCarousel> 

HtmlAttributes

Gets or sets a collection of additional attributes that will applied to the carousel 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 component to render non-declared attributes. The default value is null.

Remarks

Additional attributes can be added by specifying HtmlAttributes directive.

Examples

 
<SfCarousel HtmlAttributes="customAttribute"></SfCarousel> 
@code{ 
   Dictionary<string, object> customAttribute = new Dictionary<string, object>() 
   { 
       { "aria-label", "Slide show of current News" } 
   }; 
} 

ID

Gets or sets the unique Id value for carousel component.

Declaration

public string ID { get; set; }

Property Value

Type	Description
System.String	If we set the id, then the id value set for carousel element. The default value is null.

Examples

 
<SfCarousel Id="CarouselForNews"></SfCarousel> 

IndicatorsTemplate

Gets or sets template as Microsoft.AspNetCore.Components.RenderFragment, that defines custom appearance of indicators. Here, context refers to the Index and SelectedIndex value.

Declaration

public RenderFragment<IndicatorsTemplateContext> IndicatorsTemplate { get; set; }

Property Value

Type	Description
Microsoft.AspNetCore.Components.RenderFragment<IndicatorsTemplateContext>	A template content that specifies the visualization of indicators. The default value is null.

Remarks

Use the template's context parameter Index which returns current index of the slide and SelectedIndex which returns the index of active slide. With the SelectedIndex parameter, you can differentiate the active indicator.

Examples

<SfCarousel>
    <CarouselItem><div>Slide 1</div></CarouselItem>
    <CarouselItem><div>Slide 2</div></CarouselItem>
    <CarouselItem><div>Slide 3</div></CarouselItem>
    <IndicatorsTemplate>
        @if(context.SelectedIndex == context.Index)
        {
            <div class="indicator active" indicator-index="@context.Index"></div>
        }
        else
        {
            <div class="indicator" indicator-index="@context.Index"></div>
        }
    </IndicatorsTemplate>
</SfCarousel>

IndicatorsType

Gets or sets the types of the carousel indicators.

Declaration

public CarouselIndicatorsType IndicatorsType { get; set; }

Property Value

Type	Description
CarouselIndicatorsType	One of the CarouselIndicatorsType enumeration. The default value is Default

Examples

  
<SfCarousel IndicatorsType="CarouselIndicatorsType.Fraction"> 
    <CarouselItem><div>Slide 1</div></CarouselItem> 
    <CarouselItem><div>Slide 2</div></CarouselItem> 
    <CarouselItem><div>Slide 3</div></CarouselItem> 
</SfCarousel>  

Interval

Gets or sets the amount of delay time to transition slides automatically.

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 otherwise the default interval value 5000 is set.

Remarks

The interval value accepts in milliseconds.

Examples

 
<SfCarousel Interval="4000"></SfCarousel> 

Loop

Gets or sets whether the slide transition should loop or end when reaches the last slide of the carousel.

Declaration

public bool Loop { get; set; }

Property Value

Type	Description
System.Boolean	false, the slide transition has been stopped at end of the last slide otherwise the slide transition plays continuously. The default value is true.

NextButtonTemplate

Gets or sets template as Microsoft.AspNetCore.Components.RenderFragment, that defines custom appearance of next navigation button.

Declaration

public RenderFragment NextButtonTemplate { get; set; }

Property Value

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

Examples

In the below code example, next navigation button are customized with chevron double icons.

<SfCarousel>
    <CarouselItem><div>Slide 1</div></CarouselItem>
    <CarouselItem><div>Slide 2</div></CarouselItem>
    <CarouselItem><div>Slide 3</div></CarouselItem>
    <NextButtonTemplate>
        <SfButton CssClass="e-flat e-round" IconCss="e-icons e-chevron-right-double"></SfButton >
    </NextButtonTemplate>
</SfCarousel>

PartialVisible

Gets or sets whether the partial slides are rendered or not.

Declaration

public bool PartialVisible { get; set; }

Property Value

Type	Description
System.Boolean	true, the partial slides are rendered. The default value is false.

Remarks

Shows the next and previous slides partially. So, user can identify that more slides are yet to display. Slide animation only applicable if the PartialVisible is enabled.

Examples

 
<SfCarousel PartialVisible="true"></SfCarousel> 
<style 
 .e-partial .e-carousel-slide-container {
   padding: 0 150px;
 }
</style>

PauseOnHover

Gets or sets whether the auto play slides pause on mouse hover or not.

Declaration

public bool PauseOnHover { get; set; }

Property Value

Type	Description
System.Boolean	false, the slide transition has been played on mouse enters to carousel otherwise the slide transition paused. The default value is true.

Remarks

This property applicable when AutoPlay value is true.

Examples

<SfCarousel PauseOnHover="false"></SfCarousel>

PlayButtonTemplate

Gets or sets template as Microsoft.AspNetCore.Components.RenderFragment, that defines custom appearance of play/pause button.

Declaration

public RenderFragment PlayButtonTemplate { get; set; }

Property Value

Type	Description
Microsoft.AspNetCore.Components.RenderFragment	A template content that specifies the visualization of play/pause button. The default value is null.

Remarks

Based on AutoPlay value or click action of the play/pause button, you can decide whether the play or pause button to be rendered.

Examples

<SfCarousel @ref="CarouselRef">
    <CarouselItem><div>Slide 1</div></CarouselItem>
    <CarouselItem><div>Slide 2</div></CarouselItem>
    <CarouselItem><div>Slide 3</div></CarouselItem>
    <PlayButtonTemplate>
        <SfButton CssClass="e-flat e-round" IconCss="@playPauseIcon" @onclick="@OnPlayClick" IsToggle="true"></SfButton>
    </PlayButtonTemplate>
</SfCarousel>
@code{
   SfCarousel CarouselRef;
   private string playPauseIcon = "e-icons e-pause";
   private void OnPlayClick()
    {
        if (!CarouselRef.AutoPlay)
        {
            playPauseIcon = "e-icons e-pause";
            CarouselRef.Play();
        }
        else
        {
            playPauseIcon = "e-icons e-play";
            CarouselRef.Pause();
        }
    }
}

PreviousButtonTemplate

Gets or sets template as Microsoft.AspNetCore.Components.RenderFragment, that defines custom appearance of previous navigation button.

Declaration

public RenderFragment PreviousButtonTemplate { get; set; }

Property Value

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

Examples

In the below code example, previous navigation button are customized with chevron double icons.

<SfCarousel>
    <CarouselItem><div>Slide 1</div></CarouselItem>
    <CarouselItem><div>Slide 2</div></CarouselItem>
    <CarouselItem><div>Slide 3</div></CarouselItem>
    <PreviousButtonTemplate>
        <SfButton CssClass="e-flat e-round" IconCss="e-icons e-chevron-left-double"></SfButton >
    </PreviousButtonTemplate>
</SfCarousel>

SelectedIndex

Gets or sets the index of the current carousel item.

Declaration

public int SelectedIndex { get; set; }

Property Value

Type	Description
System.Int32	If we set the index value, then the slides begin from specified index otherwise the default index value 0 is set.

Examples

 
<SfCarousel SelectedIndex="1"></SfCarousel> 

SelectedIndexChanged

Invokes when index of the active slide changed.

Declaration

public EventCallback<int> SelectedIndexChanged { get; set; }

Property Value

Type	Description
Microsoft.AspNetCore.Components.EventCallback<System.Int32>	Fired when SelectedSlideIndex changes.

ShowIndicators

Gets or sets whether to show indicators or not.

Declaration

public bool ShowIndicators { get; set; }

Property Value

Type	Description
System.Boolean	false, the slide transition indicators will not be shown otherwise the indicators is shown. The default value is true.

ShowPlayButton

Gets or sets whether to show play button or not to play or pause the transitions.

Declaration

public bool ShowPlayButton { get; set; }

Property Value

Type	Description
System.Boolean	true, the slide transition play/pause button will be shown otherwise the button is not shown. The default value is false.

SwipeMode

Gets or sets whether the slide transition should occur or not when performing Touch/Mouse swipe action.

Declaration

public CarouselSwipeMode SwipeMode { get; set; }

Property Value

Type	Description
CarouselSwipeMode	One of the CarouselSwipeMode enumeration values that represents the swiping action for the Carousel slides. The default value is Touch.

Width

Gets or sets the width of the Carousel in pixels/number/percentage. Number value is considered as pixels.

Declaration

public string Width { get; set; }

Property Value

Type	Description
System.String	If we set the width value, then the carousel will render based on specified width otherwise the default width value auto is set.

Examples

 
<SfCarousel Width="500px"></SfCarousel> 

Methods

BuildRenderTree(RenderTreeBuilder)

Declaration

protected override void BuildRenderTree(RenderTreeBuilder __builder)

Parameters

Type	Name	Description
Microsoft.AspNetCore.Components.Rendering.RenderTreeBuilder	__builder

MoveToAsync(Int32)

Navigates to specific carousel item.

Declaration

public Task MoveToAsync(int index)

Parameters

Type	Name	Description
System.Int32	index

Returns

Type	Description
System.Threading.Tasks.Task	Move to carousel item at desired index.

NextAsync()

Navigates to next carousel item.

Declaration

public Task NextAsync()

Returns

Type	Description
System.Threading.Tasks.Task	Move to next carousel item.

OnAfterRenderAsync(Boolean)

Method invoked after each time the component has been rendered.

Declaration

protected override Task OnAfterRenderAsync(bool firstRender)

Parameters

Type	Name	Description
System.Boolean	firstRender	Set to true for the first time component rendering; otherwise gets false.

Returns

Type	Description
System.Threading.Tasks.Task	A System.Threading.Tasks.Task representing any asynchronous operation.

Overrides

SfBaseComponent.OnAfterRenderAsync(Boolean)

OnInitialized()

Method invoked when the component is ready to start.

Declaration

protected override void OnInitialized()

OnParametersSetAsync()

Method invoked when the component has received parameters from its parent in the render tree, and the incoming values have been assigned to properties.

Declaration

protected override Task OnParametersSetAsync()

Returns

Type
System.Threading.Tasks.Task

Pause()

Pauses the transition of carousel items.

Declaration

public void Pause()

Play()

Starts the transition of carousel items.

Declaration

public void Play()

PreventRender(Boolean)

Prevents the Carousel render. This method will internally sets value to be returned from ShouldRender method.

Declaration

public void PreventRender(bool preventRender = true)

Parameters

Type	Name	Description
System.Boolean	preventRender	Default value is true. Toggles the ShouldRender method value.

PreviousAsync()

Navigates to previous carousel item.

Declaration

public Task PreviousAsync()

Returns

Type	Description
System.Threading.Tasks.Task	Move to previous carousel item.

ShouldRender()

Declaration

protected override bool ShouldRender()

Returns

Type
System.Boolean