- bit BlazorUI
  • Layouts
  • Lists
  • Navs
  • Notifications
  • Progress
  • Surfaces
  • Utilities
  • Extras
  • Iconography
  • Theming
  • Carousel

    Carousel (Carousel slide-show) let people show their items in seperate slides from two or more items.

    Usage

    Basic
    1 / 4
    2 / 4
    3 / 4
    4 / 4
    InfiniteScrolling
    Configure the BitCarousel component for infinite scrolling, allowing the carousel to loop through slides continuously.

    Aurora
    This is Aurora and it's fantastic
    Beautiful Mountain
    This is a Beautiful Mountain and it's gorgeous
    Forest In The Valley
    This is a Forest In The Valley and it's beautiful
    Road Among The Mountains
    This is a Road Among The Mountains and it's amazing
    HideDots
    Use the HideDots property to hide the navigation dots below the carousel slides.

    1 / 4
    Aurora
    This is Aurora and it's fantastic
    2 / 4
    Beautiful Mountain
    This is a Beautiful Mountain and it's gorgeous
    3 / 4
    Forest In The Valley
    This is a Forest In The Valley and it's beautiful
    4 / 4
    Road Among The Mountains
    This is a Road Among The Mountains and it's amazing
    Public API
    Use the public API of BitCarousel to control the slides programmatically. This example shows how to navigate slides using buttons.

    1 / 4
    Aurora
    This is Aurora and it's fantastic
    2 / 4
    Beautiful Mountain
    This is a Beautiful Mountain and it's gorgeous
    3 / 4
    Forest In The Valley
    This is a Forest In The Valley and it's beautiful
    4 / 4
    Road Among The Mountains
    This is a Road Among The Mountains and it's amazing
    AutoPlay
    Configure the BitCarousel to automatically transition between slides. The AutoPlay feature allows you to set the interval for automatic slide transitions.

    1 / 4
    Aurora
    This is Aurora and it's fantastic
    2 / 4
    Beautiful Mountain
    This is a Beautiful Mountain and it's gorgeous
    3 / 4
    Forest In The Valley
    This is a Forest In The Valley and it's beautiful
    4 / 4
    Road Among The Mountains
    This is a Road Among The Mountains and it's amazing
    Advanced
    Use BitCarousel with customized style, visible items count, and scroll items count for advanced scenarios.

    1
    2
    3
    4
    5
    6
    7
    8
    9
    RTL
    Use BitCarousel in right-to-left (RTL).

    یک
    دو
    سه
    چهار
    پنج
    شیش
    هفت
    هشت
    نه

    API

    BitCarousel parameters
    Name
    Type
    Default value
    Description
    AnimationDuration double 0.5 Sets the duration of the scrolling animation in seconds (the default value is 0.5).
    AutoPlay bool false Enables/disables the auto scrolling of the slides.
    AutoPlayInterval double 2000 Sets the interval of the auto scrolling in milliseconds (the default value is 2000).
    ChildContent RenderFragment? null Items of the carousel.
    HideDots bool false Hides the Dots indicator at the bottom of the BitCarousel.
    HideNextPrev bool false Hides the Next/Prev buttons of the BitCarousel.
    InfiniteScrolling bool false If enabled the carousel items will navigate in an infinite loop (first item comes after last item and last item comes before first item).
    OnChange EventCallback<int> The event that will be called on carousel page navigation.
    ScrollItemsCount int 1 Number of items that is going to be changed on navigation.
    VisibleItemsCount int 1 Number of items that is visible in the carousel.
    BitCarousel public members
    Name
    Type
    Default value
    Description
    GoNext Task Navigates to the next carousel item.
    GoPrev Task Navigates to the previous carousel item.
    GoTo Task Navigates to the given carousel item index.
    BitComponentBase parameters
    Name
    Type
    Default value
    Description
    AriaLabel string? null The aria-label of the control for the benefit of screen readers.
    Class string? null Custom CSS class for the root element of the component.
    Dir BitDir? null Determines the component direction.
    HtmlAttributes Dictionary<string, object> new Dictionary<string, object>() Capture and render additional attributes in addition to the component's parameters.
    Id string? null Custom id attribute for the root element. if null the UniqueId will be used instead.
    IsEnabled bool true Whether or not the component is enabled.
    Style string? null Custom CSS style for the root element of the component.
    Visibility BitVisibility BitVisibility.Visible Whether the component is visible, hidden or collapsed.
    BitComponentBase public members
    Name
    Type
    Default value
    Description
    UniqueId Guid Guid.NewGuid() The readonly unique id of the root element. it will be assigned to a new Guid at component instance construction.
    RootElement ElementReference The ElementReference of the root element.
    BitVisibility enum
    Name
    Value
    Description
    Visible 0 The content of the component is visible.
    Hidden 1 The content of the component is hidden, but the space it takes on the page remains (visibility:hidden).
    Collapsed 2 The component is hidden (display:none).
    BitDir enum
    Name
    Value
    Description
    Ltr 0 Ltr (left to right) is to be used for languages that are written from the left to the right (like English).
    Rtl 1 Rtl (right to left) is to be used for languages that are written from the right to the left (like Arabic).
    Auto 2 Auto lets the user agent decide. It uses a basic algorithm as it parses the characters inside the element until it finds a character with a strong directionality, then applies that directionality to the whole element.
    • On this page