menu

Blazor

  • Code Examples
  • Upgrade Guide
  • User Guide
  • Demos
  • Support
  • Forums
  • Download
Class SfCarousel - Blazor API Reference | Syncfusion

    Show / Hide Table of Contents

    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
    Back to top Generated by DocFX
    Copyright © 2001 - 2025 Syncfusion Inc. All Rights Reserved