diff --git a/src/BlazorUI/Bit.BlazorUI/Components/Lists/Carousel/BitCarousel.razor b/src/BlazorUI/Bit.BlazorUI/Components/Lists/Carousel/BitCarousel.razor
index 327d693cdaa..1533e72aa63 100644
--- a/src/BlazorUI/Bit.BlazorUI/Components/Lists/Carousel/BitCarousel.razor
+++ b/src/BlazorUI/Bit.BlazorUI/Components/Lists/Carousel/BitCarousel.razor
@@ -3,17 +3,76 @@
 
 <div @ref="RootElement" @attributes="HtmlAttributes"
      id="@_Id"
+     role="region"
+     aria-roledescription="carousel"
+     aria-label="@AriaLabel"
      style="@StyleBuilder.Value"
      class="@ClassBuilder.Value"
-     dir="@Dir?.ToString().ToLower()">
+     dir="@Dir?.ToString().ToLower()"
+     tabindex="@((NoKeyboard || IsEnabled is false) ? null : (TabIndex ?? "0"))"
+     @onkeydown="HandleKeyDown"
+     @onfocusin="HandleFocusIn"
+     @onfocusout="HandleFocusOut"
+     @onmouseenter="HandleMouseEnter"
+     @onmouseleave="HandleMouseLeave">
+
+    @* The controls are rendered before the slides so the play/pause button is the first thing the keyboard
+       reaches, which is what the carousel pattern of the ARIA authoring practices asks of a carousel that
+       moves on its own: the motion can be stopped before anything else is dealt with. The stylesheet puts
+       the row back below the slides, so nothing about the way the carousel looks changes with it. *@
+    @if ((HideDots is false && _pagesCount > 1) || (AutoPlay && ShowPlayPause))
+    {
+        <div class="bit-csl-dcn @Classes?.DotsContainer"
+             style="@_directionStyle @Styles?.DotsContainer">
+            @if (AutoPlay && ShowPlayPause)
+            {
+                var playPauseIcon = IsPaused
+                                    ? BitIconInfo.From(PlayIcon, PlayIconName ?? "Play")
+                                    : BitIconInfo.From(PauseIcon, PauseIconName ?? "Pause");
+                <button @onclick="TogglePlay"
+                        type="button"
+                        aria-controls="@_ContainerId"
+                        aria-label="@(IsPaused ? PlayButtonAriaLabel : PauseButtonAriaLabel)"
+                        disabled="@(IsEnabled is false)"
+                        class="bit-csl-ppb @Classes?.PlayPauseButton"
+                        style="@Styles?.PlayPauseButton">
+                    <i aria-hidden="true"
+                       style="@Styles?.PlayPauseButtonIcon"
+                       class="@playPauseIcon?.GetCssClasses() @Classes?.PlayPauseButtonIcon" />
+                </button>
+            }
+            @if (HideDots is false && _pagesCount > 1)
+            {
+                @* The group holds the dots alone (not the play/pause button), so its accessible label
+                   describes exactly what it contains. *@
+                <div role="group" aria-label="@DotsAriaLabel" class="bit-csl-dts">
+                    @for (int i = 0; i < _pagesCount; i++)
+                    {
+                        int index = i;
+                        <button @onclick="(() => HandleGotoPage(index))"
+                                type="button"
+                                aria-controls="@_ContainerId"
+                                aria-label="@($"{DotAriaLabel} {index + 1}")"
+                                aria-current="@(_currentPage == index ? "true" : null)"
+                                disabled="@(IsEnabled is false)"
+                                style="@Styles?.Dots @(_currentPage == index ? Styles?.GetCurrentDot() : null)"
+                                class="bit-csl-dot @(DotTemplate is null ? null : "bit-csl-dtt") @((_currentPage == index ? $"bit-csl-cud {Classes?.GetCurrentDot()}" : "").Trim()) @Classes?.Dots">@DotTemplate?.Invoke(index)</button>
+                    }
+                </div>
+            }
+        </div>
+    }
 
     <div @ref="_carouselContainer"
+         id="@_ContainerId"
+         @onwheel="HandleWheel"
+         @onwheel:preventDefault="Wheel"
          @onpointerup="HandlePointerUp"
          @onpointerleave="HandlePointerUp"
          @onpointermove="HandlePointerMove"
          @onpointerdown="HandlePointerDown"
-         @onpointerdown:preventDefault="true"
-         class="bit-csl-cnt @Classes?.Container"
+         aria-live="@(IsPlaying ? "off" : "polite")"
+         class="bit-csl-cnt @(NoDrag ? "bit-csl-ndr" : null) @Classes?.Container"
          style="@_directionStyle @Styles?.Container">
 
         <CascadingValue Value="this" IsFixed="true">
@@ -22,35 +81,31 @@
 
         @if (HideNextPrev is false)
         {
-            var goLeftIcon = BitIconInfo.From(GoLeftIcon, GoLeftIconName ?? "ChevronRight");
-            var goRightIcon = BitIconInfo.From(GoRightIcon, GoRightIconName ?? "ChevronRight bit-ico-r180");
-            <div @onclick="GoLeft"
-                 class="bit-csl-lbt @Classes?.Buttons @Classes?.GoLeftButton"
-                 style="@_goLeftButtonStyle @Styles?.Buttons @Styles?.GoLeftButton">
-                <i style="@Styles?.GoLeftButtonIcon"
-                   class="@goLeftIcon?.GetCssClasses() @Classes?.GoLeftButtonIcon" />
-            </div>
+            var goLeftIcon = BitIconInfo.From(GoLeftIcon, GoLeftIconName ?? (Vertical ? "ChevronDown" : "ChevronRight"));
+            var goRightIcon = BitIconInfo.From(GoRightIcon, GoRightIconName ?? (Vertical ? "ChevronUp" : "ChevronRight bit-ico-r180"));
+            <button @onclick="HandleGoLeft"
+                    type="button"
+                    aria-controls="@_ContainerId"
+                    aria-label="@GetGoLeftAriaLabel()"
+                    disabled="@(IsEnabled is false)"
+                    class="bit-csl-lbt @Classes?.Buttons @Classes?.GoLeftButton"
+                    style="@_goLeftButtonStyle @Styles?.Buttons @Styles?.GoLeftButton">
+                <i aria-hidden="true"
+                   style="@Styles?.ButtonIcons @Styles?.GoLeftButtonIcon"
+                   class="@goLeftIcon?.GetCssClasses() @Classes?.ButtonIcons @Classes?.GoLeftButtonIcon" />
+            </button>
 
-            <div @onclick="GoRight"
-                 class="bit-csl-rbt @Classes?.Buttons @Classes?.GoRightButton"
-                 style="@_goRightButtonStyle @Styles?.Buttons @Styles?.GoRightButton">
-                <i style="@Styles?.GoRightButtonIcon"
-                   class="@goRightIcon?.GetCssClasses() @Classes?.GoRightButtonIcon" />
-            </div>
+            <button @onclick="HandleGoRight"
+                    type="button"
+                    aria-controls="@_ContainerId"
+                    aria-label="@GetGoRightAriaLabel()"
+                    disabled="@(IsEnabled is false)"
+                    class="bit-csl-rbt @Classes?.Buttons @Classes?.GoRightButton"
+                    style="@_goRightButtonStyle @Styles?.Buttons @Styles?.GoRightButton">
+                <i aria-hidden="true"
+                   style="@Styles?.ButtonIcons @Styles?.GoRightButtonIcon"
+                   class="@goRightIcon?.GetCssClasses() @Classes?.ButtonIcons @Classes?.GoRightButtonIcon" />
+            </button>
         }
     </div>
-
-    @if (HideDots is false)
-    {
-        <div class="bit-csl-dcn @Classes?.DotsContainer"
-             style="@_directionStyle @Styles?.DotsContainer">
-            @for (int i = 0; i < _pagesCount; i++)
-            {
-                int index = i;
-                <div @onclick="(() => GotoPage(index))"
-                     style="@Styles?.Dots"
-                     class="bit-csl-dot @((_currentPage == index ? $"bit-csl-cud {Classes?.CurrectDot}" : "").Trim()) @Classes?.Dots"></div>
-            }
-        </div>
-    }
-</div>
\ No newline at end of file
+</div>
diff --git a/src/BlazorUI/Bit.BlazorUI/Components/Lists/Carousel/BitCarousel.razor.cs b/src/BlazorUI/Bit.BlazorUI/Components/Lists/Carousel/BitCarousel.razor.cs
index f68593940a3..8586a816348 100644
--- a/src/BlazorUI/Bit.BlazorUI/Components/Lists/Carousel/BitCarousel.razor.cs
+++ b/src/BlazorUI/Bit.BlazorUI/Components/Lists/Carousel/BitCarousel.razor.cs
@@ -3,15 +3,43 @@ namespace Bit.BlazorUI;
 /// <summary>
 /// Carousel (slide-show) let people show their items in separate slides from two or more items.
 /// </summary>
+/// <remarks>
+/// The slides are laid out side by side inside a clipping box and moved with a transform, so a page of
+/// <see cref="VisibleItemsCount"/> items slides in while the previous page slides out. The carousel can be
+/// driven with its own next/prev buttons, with the dots below it, by dragging it, with the keyboard, with the
+/// mouse wheel, from application code through <see cref="GoNext"/>/<see cref="GoPrev"/>/<see cref="GoTo(int)"/>,
+/// or on its own with <see cref="AutoPlay"/>.
+/// <br />
+/// It follows the carousel pattern of the ARIA authoring practices: the root is a labelled region marked as a
+/// carousel, every slide is a labelled group, the controls are real buttons, and automatic rotation stops as
+/// soon as the pointer or the keyboard focus enters the carousel so it can never move content out from under
+/// the person reading it.
+/// </remarks>
 public partial class BitCarousel : BitComponentBase
 {
     private int _pagesCount;
     private int _currentPage;
     private double _pointerX;
+    private double _pointerY;
+    private bool _hovered;
+    private bool _stopped;
+    private bool _focused;
+    private bool _isPaused;
+    private bool _navigating;
+    private bool _pageHidden;
+    private bool _needsReset;
     private bool _isPointerDown;
+    private bool _afterFirstRender;
+    private bool _defaultPageApplied;
+    private double _rootWidth;
+    private int _laidOutItemsCount = -1;
+    private (bool Playing, bool Paused) _playbackState;
+    private string _layoutSignature = string.Empty;
     private int[] _othersIndices = [];
     private int[] _currentIndices = [];
+    private DateTime _lastWheel = DateTime.MinValue;
     private int _internalScrollItemsCount = 1;
+    private int _internalVisibleItemsCount = 1;
     private System.Timers.Timer? _autoPlayTimer;
     private string _directionStyle = string.Empty;
     private string _goLeftButtonStyle = string.Empty;
@@ -20,6 +48,14 @@ public partial class BitCarousel : BitComponentBase
     private ElementReference _carouselContainer = default!;
     private DotNetObjectReference<BitCarousel> _dotnetObj = default!;
 
+    // The keys the carousel acts on are also the keys the browser scrolls the page with, so they are
+    // swallowed on the way in. They are handled in the browser rather than with Blazor's preventDefault
+    // directive, because the directive is static while the carousel only owns these keys while the
+    // keyboard is enabled. Only the keys of the axis the carousel actually scrolls on are taken, so a
+    // horizontal carousel does not keep the page from being scrolled with the up/down arrow keys.
+    private static readonly string[] _horizontalNavigationKeys = ["ArrowLeft", "ArrowRight", "Home", "End"];
+    private static readonly string[] _verticalNavigationKeys = ["ArrowUp", "ArrowDown", "Home", "End"];
+
 
 
     [Inject] private IJSRuntime _js { get; set; } = default!;
@@ -27,20 +63,47 @@ public partial class BitCarousel : BitComponentBase
 
 
 
+    // The element the controls of the carousel act on. Naming it lets every one of them point at it with
+    // aria-controls, so the relation between a control and the slides it moves is spelled out.
+    internal string _ContainerId => $"{_Id}-cnt";
+
+
+
     /// <summary>
     /// Specifies the accent color kind of the component.
     /// </summary>
+    /// <remarks>
+    /// It colors the dot of the current page. <see cref="Color"/> takes precedence over it when both are set.
+    /// </remarks>
     [Parameter, ResetClassBuilder]
     public BitColorKind? Accent { get; set; }
 
     /// <summary>
     /// Sets the duration of the scrolling animation in seconds (the default value is 0.5).
     /// </summary>
-    [Parameter] public double AnimationDuration { get; set; } = 0.5;
+    /// <remarks>
+    /// It is the duration of the slide of a page in and out of the view, and of the cross-fade of the
+    /// <see cref="Fade"/> effect. A value of 0 moves the slides at once, with no animation at all.
+    /// <br />
+    /// The animation also collapses to a near-zero duration when the operating system or the browser
+    /// reports 'prefers-reduced-motion: reduce', unless <see cref="BitComponentBase.ForceAnimation"/>
+    /// opts the carousel out of it.
+    /// </remarks>
+    [Parameter, ResetStyleBuilder]
+    public double AnimationDuration { get; set; } = 0.5;
 
     /// <summary>
     /// Enables/disables the auto scrolling of the slides.
     /// </summary>
+    /// <remarks>
+    /// The rotation pauses on its own while the pointer is over the carousel (<see cref="PauseOnHover"/>),
+    /// while the keyboard focus is inside it (<see cref="PauseOnFocus"/>) and while the page is hidden in a
+    /// background tab, and it can be stopped from application code with <see cref="Pause"/> or by the person
+    /// reading the page with the button <see cref="ShowPlayPause"/> renders.
+    /// <br />
+    /// A carousel that reaches its last page rewinds to the first one, unless <see cref="StopOnLastSlide"/>
+    /// says to stop there.
+    /// </remarks>
     [Parameter] public bool AutoPlay { get; set; }
 
     /// <summary>
@@ -48,6 +111,11 @@ public partial class BitCarousel : BitComponentBase
     /// </summary>
     [Parameter] public double AutoPlayInterval { get; set; } = 2000;
 
+    /// <summary>
+    /// Plays the auto scrolling backwards, from the last slide towards the first one.
+    /// </summary>
+    [Parameter] public bool AutoPlayReverse { get; set; }
+
     /// <summary>
     /// Items of the carousel.
     /// </summary>
@@ -56,7 +124,88 @@ public partial class BitCarousel : BitComponentBase
     /// <summary>
     /// The custom CSS classes for the different parts of the carousel.
     /// </summary>
-    [Parameter] public BitCarouselClassStyles? Classes { get; set; }
+    [Parameter, ResetClassBuilder]
+    public BitCarouselClassStyles? Classes { get; set; }
+
+    /// <summary>
+    /// The general color of the carousel.
+    /// </summary>
+    /// <remarks>
+    /// It colors the dot of the current page and the next/prev and play/pause buttons.
+    /// <br />
+    /// When not set, the carousel falls back to <see cref="Accent"/>, and to the primary color of the theme
+    /// when that is not set either.
+    /// </remarks>
+    [Parameter, ResetClassBuilder]
+    public BitColor? Color { get; set; }
+
+    /// <summary>
+    /// The page (1 based, like <see cref="GoTo(int)"/>) the carousel shows when it first renders.
+    /// </summary>
+    /// <remarks>
+    /// It is only read while the carousel is being laid out for the first time, so changing it afterwards
+    /// does not move the carousel. Use <see cref="GoTo(int)"/> for that. Values outside of the range of
+    /// the carousel are clamped to its first or last page.
+    /// </remarks>
+    [Parameter] public int DefaultPage { get; set; } = 1;
+
+    /// <summary>
+    /// The accessible label of a dot of the carousel, followed by the number of the page it navigates to.
+    /// </summary>
+    [Parameter] public string DotAriaLabel { get; set; } = "Slide";
+
+    /// <summary>
+    /// The accessible label of the dots container of the carousel.
+    /// </summary>
+    [Parameter] public string DotsAriaLabel { get; set; } = "Choose slide to display";
+
+    /// <summary>
+    /// The custom content of a dot of the carousel, receiving the zero based index of the page the dot
+    /// navigates to.
+    /// </summary>
+    /// <remarks>
+    /// A dot that holds content is laid out around that content instead of being rendered as the default
+    /// circle, so it can carry a page number, a thumbnail, or anything else. Use <see cref="Classes"/> and
+    /// <see cref="Styles"/> (their <c>Dots</c> and <c>CurrentDot</c> members) to style it.
+    /// </remarks>
+    [Parameter] public RenderFragment<int>? DotTemplate { get; set; }
+
+    /// <summary>
+    /// The distance (in pixels) the pointer has to travel over the carousel before it moves to another page.
+    /// </summary>
+    /// <remarks>
+    /// A drag that travels further across the other axis than along the one the carousel scrolls is left
+    /// alone, so scrolling a page by dragging over a carousel does not flip its slides.
+    /// </remarks>
+    [Parameter] public int DragThreshold { get; set; } = 20;
+
+    /// <summary>
+    /// Cross-fades the slides in place instead of sliding them.
+    /// </summary>
+    /// <remarks>
+    /// A fading carousel shows exactly one slide at a time, so <see cref="VisibleItemsCount"/> and
+    /// <see cref="ScrollItemsCount"/> are both taken as 1 while it is enabled.
+    /// </remarks>
+    [Parameter] public bool Fade { get; set; }
+
+    /// <summary>
+    /// The space between the slides of the carousel (any CSS length, for example <c>1rem</c>).
+    /// </summary>
+    /// <remarks>
+    /// The gap is taken out of the room each slide already occupies, so adding one never changes how many
+    /// slides fit in the carousel.
+    /// </remarks>
+    [Parameter, ResetStyleBuilder]
+    public string? Gap { get; set; }
+
+    /// <summary>
+    /// The accessible label of the go to left button of the carousel.
+    /// </summary>
+    /// <remarks>
+    /// When not set, the button is labelled after what it actually does, which is the next slide in a
+    /// left-to-right carousel and the previous one in a right-to-left carousel.
+    /// </remarks>
+    [Parameter] public string? GoLeftAriaLabel { get; set; }
 
     /// <summary>
     /// Gets or sets the icon for the go to left button using custom CSS classes for external icon libraries.
@@ -83,6 +232,15 @@ public partial class BitCarousel : BitComponentBase
     /// </remarks>
     [Parameter] public string? GoLeftIconName { get; set; }
 
+    /// <summary>
+    /// The accessible label of the go to right button of the carousel.
+    /// </summary>
+    /// <remarks>
+    /// When not set, the button is labelled after what it actually does, which is the previous slide in a
+    /// left-to-right carousel and the next one in a right-to-left carousel.
+    /// </remarks>
+    [Parameter] public string? GoRightAriaLabel { get; set; }
+
     /// <summary>
     /// Gets or sets the icon for the go to right button using custom CSS classes for external icon libraries.
     /// Takes precedence over <see cref="GoRightIconName"/> when both are set.
@@ -111,11 +269,19 @@ public partial class BitCarousel : BitComponentBase
     /// <summary>
     /// Hides the Dots indicator at the bottom of the BitCarousel.
     /// </summary>
+    /// <remarks>
+    /// The dots are also left out when everything fits on a single page, since there is nothing to
+    /// navigate to then.
+    /// </remarks>
     [Parameter] public bool HideDots { get; set; }
 
     /// <summary>
     /// Hides the Next/Prev buttons of the BitCarousel.
     /// </summary>
+    /// <remarks>
+    /// Each button also hides itself at the end it cannot move any further towards, unless
+    /// <see cref="InfiniteScrolling"/> is enabled.
+    /// </remarks>
     [Parameter] public bool HideNextPrev { get; set; }
 
     /// <summary>
@@ -123,26 +289,209 @@ public partial class BitCarousel : BitComponentBase
     /// </summary>
     [Parameter] public bool InfiniteScrolling { get; set; }
 
+    /// <summary>
+    /// The accessible label of a slide of the carousel, as a composite format string whose <c>{0}</c> is the
+    /// 1 based position of the slide and whose <c>{1}</c> is the number of slides (the default value is
+    /// "{0} of {1}").
+    /// </summary>
+    /// <remarks>
+    /// It is only used for the slides that were not given an <see cref="BitComponentBase.AriaLabel"/> of
+    /// their own, which is what the carousel pattern of the ARIA authoring practices asks for when a slide
+    /// has nothing better to be called.
+    /// </remarks>
+    [Parameter] public string? ItemAriaLabelFormat { get; set; }
+
+    /// <summary>
+    /// Disables dragging the carousel with the pointer.
+    /// </summary>
+    [Parameter] public bool NoDrag { get; set; }
+
+    /// <summary>
+    /// Removes the carousel from the tab sequence and turns off its keyboard navigation.
+    /// </summary>
+    /// <remarks>
+    /// A carousel is normally focusable so it can be operated with the arrow keys (and with Home and End),
+    /// which is the only way to reach a slide for someone who cannot use a pointer. Only turn this off when
+    /// the same navigation is offered somewhere else on the page.
+    /// </remarks>
+    [Parameter] public bool NoKeyboard { get; set; }
+
     /// <summary>
     /// The event that will be called on carousel page navigation.
     /// </summary>
+    /// <remarks>
+    /// The provided value is the zero based index of the page the carousel moved to.
+    /// </remarks>
     [Parameter] public EventCallback<int> OnChange { get; set; }
 
+    /// <summary>
+    /// The accessible label of the play/pause button while the auto scrolling is running.
+    /// </summary>
+    [Parameter] public string PauseButtonAriaLabel { get; set; } = "Stop automatic slide show";
+
+    /// <summary>
+    /// Gets or sets the icon of the play/pause button while the auto scrolling is running, using custom CSS
+    /// classes for external icon libraries. Takes precedence over <see cref="PauseIconName"/> when both are set.
+    /// </summary>
+    [Parameter] public BitIconInfo? PauseIcon { get; set; }
+
+    /// <summary>
+    /// Gets or sets the name of the icon of the play/pause button while the auto scrolling is running, from
+    /// the built-in Fluent UI icons.
+    /// </summary>
+    [Parameter] public string? PauseIconName { get; set; }
+
+    /// <summary>
+    /// Pauses the auto scrolling while the keyboard focus is inside the carousel (the default value is true).
+    /// </summary>
+    /// <remarks>
+    /// Turning this off makes the carousel move the control that is being operated with the keyboard out of
+    /// the view, so leave it on unless the slides hold nothing focusable at all.
+    /// </remarks>
+    [Parameter] public bool PauseOnFocus { get; set; } = true;
+
+    /// <summary>
+    /// Pauses the auto scrolling while the pointer is over the carousel (the default value is true).
+    /// </summary>
+    [Parameter] public bool PauseOnHover { get; set; } = true;
+
+    /// <summary>
+    /// The accessible label of the play/pause button while the auto scrolling is paused.
+    /// </summary>
+    [Parameter] public string PlayButtonAriaLabel { get; set; } = "Start automatic slide show";
+
+    /// <summary>
+    /// Gets or sets the icon of the play/pause button while the auto scrolling is paused, using custom CSS
+    /// classes for external icon libraries. Takes precedence over <see cref="PlayIconName"/> when both are set.
+    /// </summary>
+    [Parameter] public BitIconInfo? PlayIcon { get; set; }
+
+    /// <summary>
+    /// Gets or sets the name of the icon of the play/pause button while the auto scrolling is paused, from
+    /// the built-in Fluent UI icons.
+    /// </summary>
+    [Parameter] public string? PlayIconName { get; set; }
+
+    /// <summary>
+    /// Adapts <see cref="VisibleItemsCount"/> and <see cref="ScrollItemsCount"/> to the width of the carousel.
+    /// </summary>
+    /// <remarks>
+    /// Each option applies while the carousel is no wider than its <see cref="BitCarouselResponsiveOption.Breakpoint"/>,
+    /// and the narrowest matching one wins. A carousel wider than every breakpoint keeps the counts of its own
+    /// parameters. The width that is matched against is the width of the carousel itself, not of the window, so
+    /// the same carousel adapts to the room it is given inside a sidebar and inside a full width page.
+    /// </remarks>
+    [Parameter] public IEnumerable<BitCarouselResponsiveOption>? ResponsiveOptions { get; set; }
+
     /// <summary>
     /// Number of items that is going to be changed on navigation.
     /// </summary>
+    /// <remarks>
+    /// It is clamped to <see cref="VisibleItemsCount"/>, since a carousel cannot skip over slides that were
+    /// never shown. A non-infinite carousel also moves by fewer items near its ends when a full move would
+    /// overshoot them, so its first and last pages always stay full.
+    /// </remarks>
     [Parameter] public int ScrollItemsCount { get; set; } = 1;
 
+    /// <summary>
+    /// Renders a play/pause button next to the dots, so the auto scrolling can be stopped and started again.
+    /// </summary>
+    /// <remarks>
+    /// Only rendered while <see cref="AutoPlay"/> is enabled. Offering this control is what the "pause,
+    /// stop, hide" success criterion of WCAG asks of any content that moves on its own for more than five
+    /// seconds, so turn it on for a carousel that carries meaningful content.
+    /// </remarks>
+    [Parameter] public bool ShowPlayPause { get; set; }
+
+    /// <summary>
+    /// The size of the dots and of the next/prev buttons of the carousel.
+    /// </summary>
+    [Parameter, ResetClassBuilder]
+    public BitSize? Size { get; set; }
+
+    /// <summary>
+    /// Stops the auto scrolling as soon as the carousel is navigated by hand.
+    /// </summary>
+    /// <remarks>
+    /// Once stopped this way the rotation only comes back through <see cref="Resume"/> or the play/pause
+    /// button, which is what someone who took over the carousel expects.
+    /// </remarks>
+    [Parameter] public bool StopOnInteraction { get; set; }
+
+    /// <summary>
+    /// Stops the auto scrolling on the last page instead of rewinding to the first one.
+    /// </summary>
+    /// <remarks>
+    /// It has no effect while <see cref="InfiniteScrolling"/> is enabled, where there is no last page to
+    /// stop on.
+    /// </remarks>
+    [Parameter] public bool StopOnLastSlide { get; set; }
+
     /// <summary>
     /// The custom CSS styles for the different parts of the carousel.
     /// </summary>
-    [Parameter] public BitCarouselClassStyles? Styles { get; set; }
+    [Parameter, ResetStyleBuilder]
+    public BitCarouselClassStyles? Styles { get; set; }
+
+    /// <summary>
+    /// Stacks the slides vertically, so the carousel scrolls up and down instead of left and right.
+    /// </summary>
+    /// <remarks>
+    /// A vertical carousel is laid out over the height of its root element, so give it one (the default is
+    /// a fixed height, and any height set through <see cref="BitComponentBase.Style"/> or a class replaces
+    /// it). Its direction does not flip in right-to-left, since only the horizontal axis has a direction.
+    /// </remarks>
+    [Parameter, ResetClassBuilder]
+    public bool Vertical { get; set; }
 
     /// <summary>
     /// Number of items that is visible in the carousel.
     /// </summary>
     [Parameter] public int VisibleItemsCount { get; set; } = 1;
 
+    /// <summary>
+    /// Navigates the carousel with the wheel of the mouse (or with a two finger scroll on a trackpad).
+    /// </summary>
+    /// <remarks>
+    /// The carousel keeps the wheel to itself while this is enabled, so the page underneath it does not
+    /// scroll while the pointer is over the carousel.
+    /// <br />
+    /// Scrolling away from the reader (down, or right) moves the carousel forwards, whichever way its
+    /// slides are laid out, since a wheel is not a grab of the slides the way a drag is.
+    /// </remarks>
+    [Parameter] public bool Wheel { get; set; }
+
+
+
+    /// <summary>
+    /// The zero based index of the page the carousel is currently showing.
+    /// </summary>
+    public int CurrentPage => _currentPage;
+
+    /// <summary>
+    /// The number of items (slides) of the carousel.
+    /// </summary>
+    public int ItemsCount => _allItems.Count;
+
+    /// <summary>
+    /// Whether the auto scrolling is currently running.
+    /// </summary>
+    /// <remarks>
+    /// It is false while the rotation is paused for any reason, including the pointer resting over the
+    /// carousel and the page sitting in a background tab.
+    /// </remarks>
+    public bool IsPlaying => _autoPlayTimer?.Enabled ?? false;
+
+    /// <summary>
+    /// Whether the auto scrolling has been paused through <see cref="Pause"/> or the play/pause button.
+    /// </summary>
+    public bool IsPaused => _isPaused || _stopped;
+
+    /// <summary>
+    /// The number of pages of the carousel.
+    /// </summary>
+    public int PagesCount => _pagesCount;
+
 
 
     /// <summary>
@@ -162,8 +511,12 @@ public async Task GoPrev()
     }
 
     /// <summary>
-    /// Navigates to the given carousel item number.
+    /// Navigates to the given carousel page number (1 based).
     /// </summary>
+    /// <param name="number">
+    /// The 1 based number of the page to navigate to. Values outside of the range of the carousel are
+    /// clamped to its first or last page, or wrapped around while <see cref="InfiniteScrolling"/> is enabled.
+    /// </param>
     public async Task GoTo(int number)
     {
         await GotoPage(number - 1);
@@ -174,7 +527,9 @@ public async Task GoTo(int number)
     /// </summary>
     public void Pause()
     {
-        _autoPlayTimer?.Stop();
+        _isPaused = true;
+
+        UpdateAutoPlayTimer();
     }
 
     /// <summary>
@@ -182,7 +537,38 @@ public void Pause()
     /// </summary>
     public void Resume()
     {
-        _autoPlayTimer?.Start();
+        _isPaused = false;
+        _stopped = false;
+
+        UpdateAutoPlayTimer();
+    }
+
+    /// <summary>
+    /// Pauses the AutoPlay when it is running, and resumes it when it is paused.
+    /// </summary>
+    public void TogglePlay()
+    {
+        if (IsPaused)
+        {
+            Resume();
+        }
+        else
+        {
+            Pause();
+        }
+    }
+
+    /// <summary>
+    /// Measures the carousel again and lays its slides out accordingly.
+    /// </summary>
+    /// <remarks>
+    /// The carousel already does this on its own whenever it is resized and whenever its items change, so
+    /// this is only needed after something else moved the ground under it (a container that changed size
+    /// without the carousel changing size with it, for example).
+    /// </remarks>
+    public async Task Refresh()
+    {
+        await ResetDimensionsAsync();
     }
 
 
@@ -190,6 +576,15 @@ public void Resume()
     [JSInvokable("OnResize")]
     public async Task _OnResize(ContentRect rect)
     {
+        if (IsDisposed) return;
+
+        // The width the responsive options are matched against is the width of the carousel itself, which
+        // is exactly what the observer reports here.
+        if (rect is not null && rect.Width > 0)
+        {
+            _rootWidth = rect.Width;
+        }
+
         await ResetDimensionsAsync();
     }
 
@@ -201,12 +596,27 @@ internal void RegisterItem(BitCarouselItem item)
 
         _allItems.Add(item);
 
+        _needsReset = true;
+
         StateHasChanged();
     }
 
     internal void UnregisterItem(BitCarouselItem carouselItem)
     {
-        _allItems.Remove(carouselItem);
+        if (_allItems.Remove(carouselItem) is false) return;
+
+        // The indices of the items are what every calculation of the carousel is written in terms of, so
+        // the ones after the removed item are moved up rather than left pointing one slot too far.
+        for (int i = 0; i < _allItems.Count; i++)
+        {
+            _allItems[i].Index = i;
+        }
+
+        if (IsDisposed) return;
+
+        _needsReset = true;
+
+        StateHasChanged();
     }
 
 
@@ -217,6 +627,16 @@ protected override void RegisterCssClasses()
     {
         ClassBuilder.Register(() => Classes?.Root);
 
+        ClassBuilder.Register(() => Vertical ? "bit-csl-vrt" : string.Empty);
+
+        ClassBuilder.Register(() => Size switch
+        {
+            BitSize.Small => "bit-csl-sm",
+            BitSize.Medium => "bit-csl-md",
+            BitSize.Large => "bit-csl-lg",
+            _ => string.Empty
+        });
+
         ClassBuilder.Register(() => Accent switch
         {
             BitColorKind.Primary => "bit-csl-apri",
@@ -225,11 +645,42 @@ protected override void RegisterCssClasses()
             BitColorKind.Transparent => "bit-csl-atra",
             _ => "bit-csl-apri"
         });
+
+        // The color classes come after the accent ones in the stylesheet, so a carousel that sets both
+        // ends up with the color it was given rather than with the accent it fell back to.
+        ClassBuilder.Register(() => Color switch
+        {
+            BitColor.Primary => "bit-csl-pri",
+            BitColor.Secondary => "bit-csl-sec",
+            BitColor.Tertiary => "bit-csl-ter",
+            BitColor.Info => "bit-csl-inf",
+            BitColor.Success => "bit-csl-suc",
+            BitColor.Warning => "bit-csl-wrn",
+            BitColor.SevereWarning => "bit-csl-swr",
+            BitColor.Error => "bit-csl-err",
+            BitColor.PrimaryBackground => "bit-csl-pbg",
+            BitColor.SecondaryBackground => "bit-csl-sbg",
+            BitColor.TertiaryBackground => "bit-csl-tbg",
+            BitColor.PrimaryForeground => "bit-csl-pfg",
+            BitColor.SecondaryForeground => "bit-csl-sfg",
+            BitColor.TertiaryForeground => "bit-csl-tfg",
+            BitColor.PrimaryBorder => "bit-csl-pbr",
+            BitColor.SecondaryBorder => "bit-csl-sbr",
+            BitColor.TertiaryBorder => "bit-csl-tbr",
+            _ => string.Empty
+        });
     }
 
     protected override void RegisterCssStyles()
     {
         StyleBuilder.Register(() => Styles?.Root);
+
+        StyleBuilder.Register(() => Gap.HasValue() ? $"--bit-csl-gap:{Gap}" : string.Empty);
+
+        // The duration is handed to the stylesheet as the -full token rather than written into the
+        // transitions directly, so the reduced-motion collapse in the stylesheet can still shorten it
+        // (an inline duration would be out of reach of any media query).
+        StyleBuilder.Register(() => FormattableString.Invariant($"--bit-csl-dur-full:{Math.Max(0, AnimationDuration)}s"));
     }
 
     protected override void OnInitialized()
@@ -241,7 +692,23 @@ protected override void OnInitialized()
 
     protected override void OnParametersSet()
     {
-        _internalScrollItemsCount = ScrollItemsCount;
+        _directionStyle = Dir == BitDir.Rtl ? "direction:rtl" : string.Empty;
+
+        ClampCounts();
+
+        // Everything that changes where the slides sit is folded into one signature, so a single
+        // comparison decides whether the carousel has to be measured and laid out again.
+        var signature = FormattableString.Invariant(
+            $"{_internalVisibleItemsCount}|{_internalScrollItemsCount}|{Vertical}|{Fade}|{InfiniteScrolling}|{Dir}|{NoKeyboard}|{NoDrag}|{IsEnabled}");
+
+        if (_layoutSignature != signature)
+        {
+            _layoutSignature = signature;
+
+            _needsReset = _afterFirstRender;
+        }
+
+        UpdateAutoPlayTimer();
 
         base.OnParametersSet();
     }
@@ -254,30 +721,24 @@ protected override async Task OnAfterRenderAsync(bool firstRender)
 
             await _js.BitObserversRegisterResize(UniqueId, RootElement, _dotnetObj);
 
-            if (ScrollItemsCount > VisibleItemsCount)
-            {
-                _internalScrollItemsCount = VisibleItemsCount;
-            }
+            _afterFirstRender = true;
+            _needsReset = false;
 
             await ResetDimensionsAsync();
 
-            await _pageVisibility.Init();
-        }
+            await RegisterPreventDefaultsAsync();
 
-        _directionStyle = Dir == BitDir.Rtl ? "direction:rtl" : string.Empty;
+            await _pageVisibility.Init();
 
-        if (AutoPlay && _autoPlayTimer is null)
-        {
-            _autoPlayTimer = new System.Timers.Timer(AutoPlayInterval);
-            _autoPlayTimer.Elapsed += AutoPlayTimerElapsed;
-            _autoPlayTimer.Start();
+            UpdateAutoPlayTimer();
         }
-
-        if (AutoPlay is false && _autoPlayTimer is not null)
+        else if (_needsReset)
         {
-            _autoPlayTimer.Elapsed -= AutoPlayTimerElapsed;
-            _autoPlayTimer.Dispose();
-            _autoPlayTimer = null;
+            _needsReset = false;
+
+            await ResetDimensionsAsync();
+
+            await RegisterPreventDefaultsAsync();
         }
 
         await base.OnAfterRenderAsync(firstRender);
@@ -285,140 +746,551 @@ protected override async Task OnAfterRenderAsync(bool firstRender)
 
 
 
-    private async Task ResetDimensionsAsync()
+    private async Task RegisterPreventDefaultsAsync()
     {
-        _currentIndices = Enumerable.Range(0, VisibleItemsCount).ToArray();
-        _othersIndices = Enumerable.Range(0, _internalScrollItemsCount).ToArray();
-
-        var itemsCount = _allItems.Count;
-        var rect = await _js.BitUtilsGetBoundingClientRect(_carouselContainer);
-        if (rect is null) return;
-        var sign = Dir == BitDir.Rtl ? -1 : 1;
-        for (int i = 0; i < itemsCount; i++)
-        {
-            var item = _allItems[i];
-            item.InternalStyle = FormattableString.Invariant($"width:{(rect.Width / VisibleItemsCount)}px;display:block");
-            item.InternalTransformStyle = FormattableString.Invariant($"transform:translateX({sign * 100 * i}%)");
-        }
+        var keys = (NoKeyboard || IsEnabled is false) ? [] : (Vertical ? _verticalNavigationKeys : _horizontalNavigationKeys);
 
-        _pagesCount = (int)Math.Ceiling((decimal)itemsCount / VisibleItemsCount);
+        await _js.BitUtilsRegisterPreventKeys(RootElement, keys);
 
-        SetNavigationButtonsVisibility();
-
-        StateHasChanged();
+        // Dragging a slide must not start the browser's own drag of an image inside it, but it is
+        // suppressed in the browser rather than with Blazor's static preventDefault directive, so a
+        // pointerdown on the next/prev buttons is left alone and they can still take the focus.
+        await _js.BitUtilsRegisterPreventPointerDown(_carouselContainer, NoDrag is false && IsEnabled);
     }
 
-    private void SetNavigationButtonsVisibility()
+    // The narrowest option the carousel still fits in wins, so the options can be listed in any order. A
+    // width of zero means the carousel has not been measured yet, where its own counts are all there is.
+    private BitCarouselResponsiveOption? GetResponsiveOption()
     {
-        _goLeftButtonStyle = (InfiniteScrolling is false && _currentIndices[_currentIndices.Length - 1] == _allItems.Count - 1) ? "display:none" : string.Empty;
+        if (ResponsiveOptions is null) return null;
+        if (_rootWidth <= 0) return null;
 
-        _goRightButtonStyle = (InfiniteScrolling is false && _currentIndices[0] == 0) ? "display:none" : string.Empty;
-    }
-
-    private async Task GoLeft() => await (Dir == BitDir.Rtl ? Prev() : Next());
+        BitCarouselResponsiveOption? matched = null;
 
-    private async Task GoRight() => await (Dir == BitDir.Rtl ? Next() : Prev());
-
-    private async Task Prev()
-    {
-        _othersIndices = Enumerable.Range(0, _internalScrollItemsCount).Select(i =>
+        foreach (var option in ResponsiveOptions)
         {
-            var idx = _currentIndices[0] - (i + 1);
-            if (InfiniteScrolling && idx < 0)
+            if (option is null) continue;
+            if (option.Breakpoint < _rootWidth) continue;
+            if (matched is null || option.Breakpoint < matched.Breakpoint)
             {
-                idx += _allItems.Count;
+                matched = option;
             }
-            return idx;
-        }).Where(i => i >= 0).Reverse().ToArray();
+        }
 
-        await Go();
+        return matched;
     }
 
-    private async Task Next()
+    // Both counts have to make sense on their own (a carousel showing zero items would divide by zero) and
+    // against each other (a carousel cannot scroll past what it shows, or show more slides than it holds).
+    private void ClampCounts()
     {
         var itemsCount = _allItems.Count;
-        _othersIndices = Enumerable.Range(0, _internalScrollItemsCount).Select(i =>
-        {
-            var idx = _currentIndices[_currentIndices.Length - 1] + (i + 1);
-            if (InfiniteScrolling && idx > itemsCount - 1)
+
+        var option = GetResponsiveOption();
+
+        var visible = Fade ? 1 : Math.Max(1, option?.VisibleItemsCount ?? VisibleItemsCount);
+
+        if (itemsCount > 0 && visible > itemsCount)
+        {
+            visible = itemsCount;
+        }
+
+        _internalVisibleItemsCount = visible;
+
+        _internalScrollItemsCount = Fade ? 1 : Math.Clamp(option?.ScrollItemsCount ?? ScrollItemsCount, 1, visible);
+    }
+
+    // A page is one step of the carousel, which is what the dots stand for and what OnChange reports. The
+    // steps are as far apart as the carousel scrolls, so a carousel that shows several slides and moves
+    // them one at a time has a step (and a dot) per slide rather than per screenful, and its dots keep up
+    // with it. A carousel that moves by everything it shows has the screenful back as its step.
+    private int CalculatePagesCount(int itemsCount, int visible, int scroll)
+    {
+        if (itemsCount < 1 || visible < 1 || scroll < 1) return 0;
+
+        if (InfiniteScrolling) return (int)Math.Ceiling((decimal)itemsCount / scroll);
+
+        if (itemsCount <= visible) return 1;
+
+        return (int)Math.Ceiling((decimal)(itemsCount - visible) / scroll) + 1;
+    }
+
+    private string Translate(double percent)
+    {
+        return Vertical
+            ? FormattableString.Invariant($"transform:translateY({percent}%)")
+            : FormattableString.Invariant($"transform:translateX({percent}%)");
+    }
+
+    // Only the transform is animated, so the move stays on the compositor and the size a slide is given
+    // by a re-layout still lands at once. The duration lives in a CSS variable (fed from AnimationDuration
+    // in RegisterCssStyles), so the stylesheet can collapse it under 'prefers-reduced-motion: reduce'.
+    private string Transition()
+    {
+        return "transition:transform var(--bit-csl-dur)";
+    }
+
+    private async Task ResetDimensionsAsync()
+    {
+        if (IsDisposed) return;
+
+        // A re-layout in the middle of a move would read its half applied state as if it were settled and
+        // leave the slides at the wrong offsets, so it waits for the move to be over. The move ends with a
+        // render of its own, which is where the deferred re-layout is picked up again.
+        if (_navigating)
+        {
+            _needsReset = true;
+            return;
+        }
+
+        // The measurement comes first because the width it reports is also what the responsive options are
+        // matched against, so the counts below are the ones the carousel actually has room for.
+        var rect = await _js.BitUtilsGetBoundingClientRect(_carouselContainer);
+
+        if (IsDisposed) return;
+
+        if (rect is not null && rect.Width > 0)
+        {
+            _rootWidth = rect.Width;
+        }
+
+        ClampCounts();
+
+        var itemsCount = _allItems.Count;
+        var visible = _internalVisibleItemsCount;
+        var scroll = _internalScrollItemsCount;
+
+        var itemsCountChanged = _laidOutItemsCount != itemsCount;
+
+        _laidOutItemsCount = itemsCount;
+
+        _pagesCount = CalculatePagesCount(itemsCount, visible, scroll);
+
+        // The page the carousel is on is kept across a re-layout, so resizing the window (or adding a slide)
+        // does not throw the reader back to the first page.
+        var first = _currentIndices.Length > 0 ? _currentIndices[0] : 0;
+
+        // The page the carousel starts on is applied to the first layout that has something to lay out, so
+        // it is rendered on that page instead of sliding over to it after the fact.
+        if (_defaultPageApplied is false && itemsCount > 0)
+        {
+            _defaultPageApplied = true;
+
+            first = Math.Clamp(DefaultPage - 1, 0, Math.Max(0, _pagesCount - 1)) * scroll;
+        }
+
+        if (first < 0 || first >= itemsCount) first = 0;
+
+        if (InfiniteScrolling is false)
+        {
+            first = Math.Min(first, Math.Max(0, itemsCount - visible));
+        }
+
+        // A page of an infinite carousel can borrow slides from the other end (GotoPage wraps the
+        // indices that run past the last item around to the first one), so a re-layout wraps them
+        // the same way instead of cutting the borrowed slides off.
+        _currentIndices = InfiniteScrolling && itemsCount > 0
+            ? Enumerable.Range(first, visible).Select(i => i % itemsCount).ToArray()
+            : Enumerable.Range(first, visible).Where(i => i < itemsCount).ToArray();
+        _othersIndices = [];
+
+        _currentPage = CalculateCurrentPage(_currentIndices, visible);
+
+        SetNavigationButtonsVisibility();
+        UpdateItemsCurrentState();
+
+        // The page count above is what the auto play hinges on, so the timer is re-evaluated here:
+        // a carousel that only just received enough items to have somewhere to rotate to starts, and
+        // one whose items were taken away stops.
+        UpdateAutoPlayTimer();
+
+        // The transform of a slide and the opacity of the fade effect belong to a layout, so they
+        // are cleared up front rather than left behind stale when the measurement above failed.
+        foreach (var item in _allItems)
+        {
+            item.InternalFadeStyle = string.Empty;
+            item.InternalTransformStyle = string.Empty;
+
+            // The accessible name a slide falls back to counts the slides around it, so all of them are
+            // rendered again when the carousel gains or loses one. Nothing else about a slide depends on
+            // the others, so an ordinary re-layout (a resize, for one) leaves them alone.
+            if (itemsCountChanged)
+            {
+                item.Refresh();
+            }
+        }
+
+        if (rect is not null)
+        {
+            var size = Vertical ? rect.Height : rect.Width;
+            var itemSize = visible > 0 ? size / visible : size;
+            var sign = (Vertical is false && Dir == BitDir.Rtl) ? -1 : 1;
+
+            for (int i = 0; i < itemsCount; i++)
+            {
+                var item = _allItems[i];
+
+                item.InternalStyle = Vertical
+                    ? FormattableString.Invariant($"height:{itemSize}px;width:100%;display:block")
+                    : FormattableString.Invariant($"width:{itemSize}px;display:block");
+
+                item.InternalTransitionStyle = string.Empty;
+
+                if (Fade)
+                {
+                    var isCurrent = Array.IndexOf(_currentIndices, i) >= 0;
+
+                    item.InternalTransformStyle = string.Empty;
+                    item.InternalFadeStyle = isCurrent ? "opacity:1;z-index:1" : "opacity:0;z-index:0";
+                }
+                else
+                {
+                    // A slide that is on screen sits at its place in the visible run, and everything else
+                    // is laid out relative to the first visible slide, which is what puts the slides before
+                    // the current page out to its start rather than piling them up after it.
+                    var position = Array.IndexOf(_currentIndices, i);
+
+                    if (position < 0) position = i - first;
+
+                    item.InternalFadeStyle = string.Empty;
+                    item.InternalTransformStyle = Translate(sign * 100 * position);
+                }
+            }
+        }
+
+        StateHasChanged();
+    }
+
+    private void UpdateItemsCurrentState()
+    {
+        for (int i = 0; i < _allItems.Count; i++)
+        {
+            _allItems[i].InternalIsCurrent = Array.IndexOf(_currentIndices, i) >= 0;
+        }
+    }
+
+    private void SetNavigationButtonsVisibility()
+    {
+        var itemsCount = _allItems.Count;
+
+        var atStart = InfiniteScrolling is false && (_currentIndices.Length == 0 || _currentIndices[0] <= 0);
+        var atEnd = InfiniteScrolling is false && (_currentIndices.Length == 0 || _currentIndices[^1] >= itemsCount - 1);
+
+        // A carousel with a single page has nowhere to go, so neither button is of any use on it.
+        var single = _pagesCount < 2;
+
+        // The button on the left of a right-to-left carousel is the one that goes back, so which end
+        // silences which button flips with the direction. The vertical axis has no direction to flip.
+        var isRtl = Vertical is false && Dir == BitDir.Rtl;
+
+        _goLeftButtonStyle = (single || (isRtl ? atStart : atEnd)) ? "display:none" : string.Empty;
+        _goRightButtonStyle = (single || (isRtl ? atEnd : atStart)) ? "display:none" : string.Empty;
+    }
+
+    private bool CanGoNext()
+    {
+        if (_allItems.Count == 0) return false;
+        if (InfiniteScrolling) return true;
+
+        return _currentIndices.Length > 0 && _currentIndices[^1] < _allItems.Count - 1;
+    }
+
+    private bool CanGoPrev()
+    {
+        if (_allItems.Count == 0) return false;
+        if (InfiniteScrolling) return true;
+
+        return _currentIndices.Length > 0 && _currentIndices[0] > 0;
+    }
+
+    private async Task GoLeft() => await ((Vertical is false && Dir == BitDir.Rtl) ? Prev() : Next());
+
+    private async Task GoRight() => await ((Vertical is false && Dir == BitDir.Rtl) ? Next() : Prev());
+
+    // Everything the person reading the page does to the carousel by hand goes through here first, so the
+    // auto scrolling can step aside for them when it was asked to.
+    private void HandleInteraction()
+    {
+        if (StopOnInteraction is false) return;
+        if (AutoPlay is false) return;
+
+        _stopped = true;
+
+        UpdateAutoPlayTimer();
+    }
+
+    private async Task HandleGoLeft()
+    {
+        HandleInteraction();
+
+        await GoLeft();
+    }
+
+    private async Task HandleGoRight()
+    {
+        HandleInteraction();
+
+        await GoRight();
+    }
+
+    private async Task HandleGotoPage(int index)
+    {
+        HandleInteraction();
+
+        await GotoPage(index);
+    }
+
+    private async Task HandleNext()
+    {
+        HandleInteraction();
+
+        await Next();
+    }
+
+    private async Task HandlePrev()
+    {
+        HandleInteraction();
+
+        await Prev();
+    }
+
+    private async Task Prev()
+    {
+        if (IsEnabled is false) return;
+
+        var itemsCount = _allItems.Count;
+
+        if (itemsCount == 0 || _currentIndices.Length == 0) return;
+
+        // A move back lands on the page before the current one. That is a plain move of the scroll count
+        // almost everywhere, and a shorter one when leaving the last page of a carousel whose items do not
+        // divide evenly into pages, since that page was pulled back to keep itself full.
+        var count = InfiniteScrolling
+            ? _internalScrollItemsCount
+            : Math.Clamp(_currentIndices[0] - Math.Max(0, (_currentPage - 1) * _internalScrollItemsCount),
+                         0, _internalVisibleItemsCount);
+
+        if (count < 1) return;
+
+        _othersIndices = Enumerable.Range(0, count).Select(i =>
+        {
+            var idx = _currentIndices[0] - (i + 1);
+            if (InfiniteScrolling && idx < 0)
+            {
+                idx += itemsCount;
+            }
+            return idx;
+        }).Where(i => i >= 0 && i < itemsCount).Reverse().ToArray();
+
+        await Go(false, count);
+    }
+
+    private async Task Next()
+    {
+        if (IsEnabled is false) return;
+
+        var itemsCount = _allItems.Count;
+
+        if (itemsCount == 0 || _currentIndices.Length == 0) return;
+
+        // Moving forward by fewer items than asked for keeps the last page full, instead of leaving a
+        // blank space after the last item when the items do not divide evenly into pages.
+        var count = InfiniteScrolling
+            ? _internalScrollItemsCount
+            : Math.Min(_internalScrollItemsCount, itemsCount - 1 - _currentIndices[^1]);
+
+        if (count < 1) return;
+
+        _othersIndices = Enumerable.Range(0, count).Select(i =>
+        {
+            var idx = _currentIndices[^1] + (i + 1);
+            if (InfiniteScrolling && idx > itemsCount - 1)
             {
                 idx -= itemsCount;
             }
             return idx;
-        }).Where(i => i < itemsCount).ToArray();
+        }).Where(i => i >= 0 && i < itemsCount).ToArray();
 
-        await Go(true);
+        await Go(true, count);
     }
 
     private async Task Go(bool isNext = false, int scrollCount = 0)
     {
         if (IsDisposed) return;
+        if (IsEnabled is false) return;
         if (_othersIndices.Length == 0) return;
 
+        // A second move started while the first one is still being handed to the browser would read the
+        // half applied state as if it were settled, and leave slides behind at the wrong offsets.
+        if (_navigating) return;
+
+        var visible = _internalVisibleItemsCount;
+
         if (scrollCount < 1)
         {
             scrollCount = _internalScrollItemsCount;
         }
 
-        var diff = VisibleItemsCount - scrollCount;
+        scrollCount = Math.Clamp(scrollCount, 1, visible);
+
+        var diff = visible - scrollCount;
         var newIndices = (isNext
-            ? _currentIndices.Skip(VisibleItemsCount - diff).Take(diff).Concat(_othersIndices)
+            ? _currentIndices.Skip(scrollCount).Take(diff).Concat(_othersIndices)
             : _othersIndices.Concat(_currentIndices.Take(diff))).ToArray();
 
-        var currents = _currentIndices.Select(i => _allItems[i]).ToArray();
-        var others = _othersIndices.Select(i => _allItems[i]).ToArray();
+        var currents = _currentIndices.Where(IsValidIndex).Select(i => _allItems[i]).ToArray();
+        var others = _othersIndices.Where(IsValidIndex).Select(i => _allItems[i]).ToArray();
+
+        if (others.Length == 0) return;
+
+        if (Fade)
+        {
+            var transition = "transition:opacity var(--bit-csl-dur)";
+
+            _navigating = true;
+
+            try
+            {
+                foreach (var c in currents)
+                {
+                    c.InternalTransitionStyle = transition;
+                    c.InternalFadeStyle = "opacity:0;z-index:0";
+                }
+
+                foreach (var o in others)
+                {
+                    o.InternalTransitionStyle = transition;
+                    o.InternalFadeStyle = "opacity:1;z-index:1";
+                }
+
+                await ApplyNewIndices(newIndices);
+            }
+            finally
+            {
+                _navigating = false;
+
+                // A re-layout that arrived in the middle of the move was put off until it was over, and
+                // this is where it is over, so it is asked for a render of its own to be picked up in.
+                if (_needsReset) StateHasChanged();
+            }
+
+            return;
+        }
 
         var sign = isNext ? 1 : -1;
-        var offset = isNext ? VisibleItemsCount : scrollCount;
+        var offset = isNext ? visible : scrollCount;
 
+        // The incoming slides are put just outside the view without a transition first, so the move
+        // below animates from the edge of the carousel instead of from wherever they happened to sit.
         for (int i = 0; i < others.Length; i++)
         {
             var o = others[i];
             o.InternalTransitionStyle = string.Empty;
             var x = sign * 100 * (offset + (sign * i));
-            x = Dir == BitDir.Rtl ? -x : x;
-            o.InternalTransformStyle = FormattableString.Invariant($"transform:translateX({x}%)");
+            x = (Vertical is false && Dir == BitDir.Rtl) ? -x : x;
+            o.InternalTransformStyle = Translate(x);
         }
 
+        _navigating = true;
 
-        StateHasChanged();
-        if (IsDisposed) return;
-        _autoPlayTimer?.Stop();
-        await Task.Delay(50);
-        if (IsDisposed) return;
-        _autoPlayTimer?.Start();
+        // The flag covers the whole move, up to and including the bookkeeping of the new indices.
+        try
+        {
+            // The placement above has to reach the browser as a frame of its own, otherwise it is coalesced
+            // with the move below into a single style change and there is nothing left to animate. A
+            // carousel that was asked for no animation wants exactly that coalescing, so it skips the
+            // frame and the slides land on their new places at once.
+            if (AnimationDuration > 0)
+            {
+                StateHasChanged();
+
+                await Task.Delay(50);
+
+                if (IsDisposed) return;
+            }
+
+            offset = isNext ? visible - scrollCount : 0;
 
-        offset = isNext ? VisibleItemsCount - scrollCount : 0;
+            var transitionStyle = Transition();
 
-        for (int i = 0; i < currents.Length; i++)
+            for (int i = 0; i < currents.Length; i++)
+            {
+                var c = currents[i];
+                c.InternalTransitionStyle = transitionStyle;
+                var x = -sign * 100 * (scrollCount + (-sign * i));
+                x = (Vertical is false && Dir == BitDir.Rtl) ? -x : x;
+                c.InternalTransformStyle = Translate(x);
+            }
+
+            for (int i = 0; i < others.Length; i++)
+            {
+                var o = others[i];
+                o.InternalTransitionStyle = transitionStyle;
+                var x = 100 * (offset + i);
+                x = (Vertical is false && Dir == BitDir.Rtl) ? -x : x;
+                o.InternalTransformStyle = Translate(x);
+            }
+
+            await ApplyNewIndices(newIndices);
+        }
+        finally
         {
-            var c = currents[i];
-            c.InternalTransitionStyle = FormattableString.Invariant($"transition:all {AnimationDuration}s");
-            var x = -sign * 100 * (scrollCount + (-sign * i));
-            x = Dir == BitDir.Rtl ? -x : x;
-            c.InternalTransformStyle = FormattableString.Invariant($"transform:translateX({x}%)");
+            _navigating = false;
+
+            // A re-layout that arrived in the middle of the move was put off until it was over, and this
+            // is where it is over, so it is asked for a render of its own to be picked up in.
+            if (_needsReset) StateHasChanged();
         }
+    }
 
-        for (int i = 0; i < others.Length; i++)
+    private bool IsValidIndex(int index) => index >= 0 && index < _allItems.Count;
+
+    // The page is where the first visible item falls, except at the end of a non-infinite carousel: its
+    // last page is aligned to the last item when the items do not divide evenly into pages, so standing
+    // on the last item is what standing on the last page means there.
+    private int CalculateCurrentPage(int[] indices, int visible)
+    {
+        if (visible < 1 || indices.Length == 0) return 0;
+
+        if (InfiniteScrolling is false && _pagesCount > 0 && indices[^1] == _allItems.Count - 1)
         {
-            var o = others[i];
-            o.InternalTransitionStyle = FormattableString.Invariant($"transition:all {AnimationDuration}s");
-            var x = 100 * (offset + i);
-            x = Dir == BitDir.Rtl ? -x : x;
-            o.InternalTransformStyle = FormattableString.Invariant($"transform:translateX({x}%)");
+            return _pagesCount - 1;
         }
 
+        var scroll = Math.Max(1, _internalScrollItemsCount);
+
+        return Math.Clamp((int)Math.Floor((decimal)indices[0] / scroll), 0, Math.Max(0, _pagesCount - 1));
+    }
+
+    private async Task ApplyNewIndices(int[] newIndices)
+    {
+        var visible = _internalVisibleItemsCount;
+        var previousPage = _currentPage;
+
         _currentIndices = newIndices;
-        _currentPage = (int)Math.Floor((decimal)_currentIndices[0] / VisibleItemsCount);
-        _ = OnChange.InvokeAsync(_currentPage);
+        _currentPage = CalculateCurrentPage(newIndices, visible);
 
+        UpdateItemsCurrentState();
         SetNavigationButtonsVisibility();
 
+        // The interval is measured from the end of a move, so a slide that was navigated by hand is not
+        // whisked away by the auto scrolling a moment later.
+        RestartAutoPlayTimer();
+
         StateHasChanged();
+
+        if (previousPage != _currentPage)
+        {
+            await OnChange.InvokeAsync(_currentPage);
+        }
     }
 
     private async Task GotoPage(int index)
     {
+        if (IsEnabled is false) return;
+        if (_pagesCount < 1) return;
+        if (_currentIndices.Length == 0) return;
+
         if (index < 0)
         {
             index = InfiniteScrolling ? _pagesCount - 1 : 0;
@@ -428,84 +1300,354 @@ private async Task GotoPage(int index)
             index = InfiniteScrolling ? 0 : _pagesCount - 1;
         }
 
-        if (_currentIndices[0] == index * VisibleItemsCount) return;
+        var visible = _internalVisibleItemsCount;
+        var scroll = _internalScrollItemsCount;
+        var itemsCount = _allItems.Count;
+
+        if (itemsCount == 0) return;
+
+        var first = _currentIndices[0];
+        var target = index * scroll;
+
+        if (InfiniteScrolling)
+        {
+            target %= itemsCount;
+        }
+        else
+        {
+            // The last page of a carousel whose items do not divide evenly into pages is aligned to its
+            // last item, so navigating to it never leaves a blank space after the item.
+            target = Math.Min(target, Math.Max(0, itemsCount - visible));
+        }
+
+        if (target == first) return;
 
-        var indices = Enumerable.Range(index * VisibleItemsCount, VisibleItemsCount);
-        var isNext = false;
-        if (index < _currentPage) // go prev
+        bool isNext;
+        int distance;
+
+        if (InfiniteScrolling)
         {
-            _othersIndices = indices.ToArray();
+            // Either way around the loop reaches the page, so the carousel takes the shorter one.
+            var forward = ((target - first) % itemsCount + itemsCount) % itemsCount;
+
+            isNext = forward <= itemsCount - forward;
+            distance = isNext ? forward : itemsCount - forward;
         }
-        else // go next
+        else
         {
-            isNext = true;
-            var itemsCount = _allItems.Count;
-            _othersIndices = indices.Select(idx =>
-            {
-                if (InfiniteScrolling && idx > itemsCount - 1) idx -= itemsCount;
-                return idx;
-            }).Where(i => i < itemsCount).ToArray();
+            isNext = target > first;
+            distance = Math.Abs(target - first);
         }
 
-        await Go(isNext, VisibleItemsCount);
+        // A page next to the current one shares slides with it, so only the slides that are actually new
+        // are brought in and the shared ones stay where they are instead of being thrown out and
+        // animated back in. A page further away than the carousel is wide replaces it outright.
+        var count = Math.Min(distance, visible);
+
+        // The indices past the end wrap around to the start of an infinite carousel, so a page that is
+        // only partially filled by the items borrows the missing slides from the other end instead of
+        // being rendered with a blank space.
+        _othersIndices = Enumerable.Range(0, count).Select(i =>
+        {
+            var idx = isNext ? (target + visible - count + i) : (target + i);
+            if (InfiniteScrolling) idx = (idx % itemsCount + itemsCount) % itemsCount;
+            return idx;
+        }).Where(IsValidIndex).ToArray();
+
+        await Go(isNext, count);
     }
 
-    private async Task HandlePointerMove(MouseEventArgs e)
+    private async Task HandleKeyDown(KeyboardEventArgs e)
+    {
+        if (NoKeyboard) return;
+        if (IsEnabled is false) return;
+
+        // A carousel that swallowed a modified arrow key would take the browser shortcuts of the page
+        // with it, so only the plain keys are acted on.
+        if (e.CtrlKey || e.AltKey || e.MetaKey || e.ShiftKey) return;
+
+        switch (e.Key)
+        {
+            case "ArrowRight" when Vertical is false:
+            case "ArrowDown" when Vertical:
+                await HandleGoLeft();
+                break;
+
+            case "ArrowLeft" when Vertical is false:
+            case "ArrowUp" when Vertical:
+                await HandleGoRight();
+                break;
+
+            case "Home":
+                await HandleGotoPage(0);
+                break;
+
+            case "End":
+                await HandleGotoPage(_pagesCount - 1);
+                break;
+        }
+    }
+
+    private async Task HandleWheel(WheelEventArgs e)
+    {
+        if (Wheel is false) return;
+        if (IsEnabled is false) return;
+
+        var delta = Math.Abs(e.DeltaY) >= Math.Abs(e.DeltaX) ? e.DeltaY : e.DeltaX;
+
+        if (delta == 0) return;
+
+        // A single flick of a trackpad fires a long tail of events, which would run through the whole
+        // carousel at once without a quiet period between the moves.
+        var now = DateTime.UtcNow;
+
+        if ((now - _lastWheel).TotalMilliseconds < Math.Max(200, AnimationDuration * 1000)) return;
+
+        _lastWheel = now;
+
+        // A wheel is not a grab of the slides, so it is read the way a wheel always is: away from the
+        // reader (down, or right) moves the carousel forwards, whichever way its slides are laid out.
+        await (delta > 0 ? HandleNext() : HandlePrev());
+    }
+
+    private async Task HandlePointerMove(PointerEventArgs e)
     {
         if (_isPointerDown is false) return;
 
-        var delta = e.ClientX - _pointerX;
-        if (Math.Abs(delta) <= 20) return;
+        var deltaX = e.ClientX - _pointerX;
+        var deltaY = e.ClientY - _pointerY;
 
-        _isPointerDown = false;
-        await _js.BitUtilsSetStyle(_carouselContainer, "cursor", string.Empty);
+        var along = Vertical ? deltaY : deltaX;
+        var across = Vertical ? deltaX : deltaY;
+
+        if (Math.Abs(along) <= Math.Max(1, DragThreshold)) return;
 
-        if (delta < 0)
+        // A drag that travels further across the carousel than along it is a scroll of the page that
+        // happens to pass over the carousel, and flipping a slide under it would be a surprise.
+        if (Math.Abs(across) > Math.Abs(along))
         {
-            await GoLeft();
+            await EndDrag();
+            return;
+        }
+
+        await EndDrag();
+
+        if (along < 0)
+        {
+            await HandleGoLeft();
         }
         else
         {
-            await GoRight();
+            await HandleGoRight();
         }
     }
 
-    private async Task HandlePointerDown(MouseEventArgs e)
+    private async Task HandlePointerDown(PointerEventArgs e)
     {
+        if (NoDrag) return;
+        if (IsEnabled is false) return;
+
         _isPointerDown = true;
         _pointerX = e.ClientX;
+        _pointerY = e.ClientY;
+
         await _js.BitUtilsSetStyle(_carouselContainer, "cursor", "grabbing");
-        StateHasChanged();
     }
 
-    private async Task HandlePointerUp(MouseEventArgs e)
+    private async Task HandlePointerUp(PointerEventArgs e)
+    {
+        if (_isPointerDown is false) return;
+
+        await EndDrag();
+    }
+
+    private async Task EndDrag()
     {
         _isPointerDown = false;
+
         await _js.BitUtilsSetStyle(_carouselContainer, "cursor", string.Empty);
-        StateHasChanged();
     }
 
-    private async void AutoPlayTimerElapsed(object? sender, System.Timers.ElapsedEventArgs e)
+    private void HandleMouseEnter()
     {
-        await InvokeAsync(Next);
+        if (PauseOnHover is false) return;
+
+        _hovered = true;
+
+        UpdateAutoPlayTimer();
     }
 
-    private Task PageVisibilityChange(bool hidden)
+    private void HandleMouseLeave()
+    {
+        if (_hovered is false) return;
+
+        _hovered = false;
+
+        UpdateAutoPlayTimer();
+    }
+
+    private void HandleFocusIn()
     {
-        if (hidden)
+        if (PauseOnFocus is false) return;
+
+        _focused = true;
+
+        UpdateAutoPlayTimer();
+    }
+
+    private void HandleFocusOut()
+    {
+        if (_focused is false) return;
+
+        _focused = false;
+
+        UpdateAutoPlayTimer();
+    }
+
+    private bool ShouldAutoPlay()
+    {
+        if (AutoPlay is false) return false;
+        if (IsEnabled is false) return false;
+        if (_isPaused || _stopped) return false;
+        if (_pageHidden) return false;
+        if (PauseOnHover && _hovered) return false;
+        if (PauseOnFocus && _focused) return false;
+
+        // A carousel with a single page has nowhere to rotate to. The timer is re-evaluated from
+        // ResetDimensionsAsync whenever the items (and with them the page count) change.
+        return _pagesCount > 1;
+    }
+
+    private void UpdateAutoPlayTimer()
+    {
+        // The page visibility event can still reach a carousel that was disposed while the event was
+        // being raised (the handlers are snapshotted before they are awaited), and re-creating the
+        // timer here at that point would leak it, ticking, for the rest of the process.
+        if (IsDisposed) return;
+
+        // Before the first render there is nothing to rotate yet, and a timer started during
+        // prerendering would tick on the server against a carousel that is not on screen.
+        if (_afterFirstRender is false) return;
+
+        if (ShouldAutoPlay() is false)
         {
-            Pause();
+            _autoPlayTimer?.Stop();
         }
         else
         {
-            Resume();
+            // The timer itself rejects an interval beyond int.MaxValue (and one that is not positive),
+            // so anything unusable falls back to the default instead of throwing in the middle of a render.
+            var interval = AutoPlayInterval > 0 ? Math.Min(AutoPlayInterval, int.MaxValue) : 2000;
+
+            if (_autoPlayTimer is null)
+            {
+                _autoPlayTimer = new System.Timers.Timer(interval);
+                _autoPlayTimer.Elapsed += AutoPlayTimerElapsed;
+            }
+            else if (_autoPlayTimer.Interval != interval)
+            {
+                _autoPlayTimer.Interval = interval;
+            }
+
+            _autoPlayTimer.Start();
+        }
+
+        // The playback state feeds the play/pause button and the aria-live attribute, so it is rendered
+        // right away even when the change came from code (Pause/Resume) rather than from an event the
+        // renderer already follows up on. Nothing else here shows, so a state that did not move (this
+        // runs on every parameter set) is not worth a render.
+        var state = (IsPlaying, IsPaused);
+
+        if (_playbackState == state) return;
+
+        _playbackState = state;
+
+        StateHasChanged();
+    }
+
+    private void RestartAutoPlayTimer()
+    {
+        if (_autoPlayTimer is null || _autoPlayTimer.Enabled is false) return;
+
+        _autoPlayTimer.Stop();
+        _autoPlayTimer.Start();
+    }
+
+    private async void AutoPlayTimerElapsed(object? sender, System.Timers.ElapsedEventArgs e)
+    {
+        if (IsDisposed) return;
+
+        try
+        {
+            await InvokeAsync(async () =>
+            {
+                if (IsDisposed || _navigating) return;
+                if (ShouldAutoPlay() is false) return;
+
+                var forward = AutoPlayReverse is false;
+
+                if (forward ? CanGoNext() : CanGoPrev())
+                {
+                    await (forward ? Next() : Prev());
+                }
+                else if (StopOnLastSlide)
+                {
+                    _stopped = true;
+
+                    UpdateAutoPlayTimer();
+
+                    StateHasChanged();
+                }
+                else
+                {
+                    // Rewinding keeps a carousel that was told to play going, instead of leaving it
+                    // stalled on its last page for good.
+                    await GotoPage(forward ? 0 : _pagesCount - 1);
+                }
+            });
         }
+        catch (ObjectDisposedException) { } // the renderer went away between the tick and the dispatch
+        catch (JSDisconnectedException) { } // the circuit went away while the slides were being moved
+        catch (Exception ex)
+        {
+            // An exception that escapes an async void handler takes the whole process down, so anything
+            // else (an OnChange callback that threw, for example) is handed back to the renderer, where
+            // it is treated like an exception of any ordinary event handler.
+            try
+            {
+                await DispatchExceptionAsync(ex);
+            }
+            catch { } // the renderer itself went away; there is nothing left to report the exception to
+        }
+    }
+
+    private Task PageVisibilityChange(bool hidden)
+    {
+        _pageHidden = hidden;
+
+        UpdateAutoPlayTimer();
 
         return Task.CompletedTask;
     }
 
 
 
+    private string? GetGoLeftAriaLabel()
+    {
+        if (GoLeftAriaLabel.HasValue()) return GoLeftAriaLabel;
+
+        return (Vertical is false && Dir == BitDir.Rtl) ? "Previous slide" : "Next slide";
+    }
+
+    private string? GetGoRightAriaLabel()
+    {
+        if (GoRightAriaLabel.HasValue()) return GoRightAriaLabel;
+
+        return (Vertical is false && Dir == BitDir.Rtl) ? "Next slide" : "Previous slide";
+    }
+
+
+
     protected override async ValueTask DisposeAsync(bool disposing)
     {
         if (IsDisposed || disposing is false) return;
diff --git a/src/BlazorUI/Bit.BlazorUI/Components/Lists/Carousel/BitCarousel.scss b/src/BlazorUI/Bit.BlazorUI/Components/Lists/Carousel/BitCarousel.scss
index d08da8ad022..fce3bc38530 100644
--- a/src/BlazorUI/Bit.BlazorUI/Components/Lists/Carousel/BitCarousel.scss
+++ b/src/BlazorUI/Bit.BlazorUI/Components/Lists/Carousel/BitCarousel.scss
@@ -5,6 +5,45 @@
     position: relative;
     height: spacing(25);
     flex-direction: column;
+
+    // The dot of the current page takes the accent (or the Color) of the carousel, and the buttons take
+    // the neutral foreground so they stay legible over whatever the slides hold. The uncolored carousel
+    // resolves to the primary accent, which is what it always rendered with.
+    --bit-csl-clr: #{$clr-pri};
+    --bit-csl-clr-hover: #{$clr-pri-hover};
+    --bit-csl-btn: #{$clr-fg-pri};
+    --bit-csl-btn-hover: #{$clr-fg-pri-hover};
+    --bit-csl-dot: #{$clr-bg-ter};
+    --bit-csl-dot-hover: #{$clr-bg-ter-hover};
+    --bit-csl-gap: 0px;
+    --bit-csl-dot-size: #{spacing(1.25)};
+    --bit-csl-btn-size: #{spacing(3)};
+
+    // The duration of the slide/fade of the pages. The AnimationDuration parameter arrives inline as
+    // the -full token and the transitions read this derived one, following the -full pattern of
+    // motion.fluent.scss, so the reduced-motion query below can still collapse a duration that was
+    // set inline. The fallback is the default of the parameter.
+    --bit-csl-dur: var(--bit-csl-dur-full, 0.5s);
+
+    &:focus-visible {
+        @include focus-ring;
+    }
+}
+
+// 0.01ms instead of 0ms for the same reason as in motion.fluent.scss: a zero-duration transition
+// never fires its transitionend event.
+@media (prefers-reduced-motion: reduce) {
+    .bit-csl {
+        --bit-csl-dur: 0.01ms;
+    }
+}
+
+// The shared .bit-fam opt-out (BitComponentBase.ForceAnimation) only re-points the --bit-mot-* tokens,
+// so the carousel's own token is restored here, both for a carousel that sets ForceAnimation itself
+// and for one sitting inside an opted-out subtree.
+.bit-csl.bit-fam,
+.bit-fam .bit-csl {
+    --bit-csl-dur: var(--bit-csl-dur-full, 0.5s);
 }
 
 .bit-crsi {
@@ -12,12 +51,18 @@
     bottom: 0;
     display: none;
     position: absolute;
+    box-sizing: border-box;
+
+    // The gap is carved out of the box each slide already occupies, half on each side, so the slides
+    // keep lining up with the pages of the carousel no matter how many of them are visible.
+    padding-inline: calc(var(--bit-csl-gap) / 2);
 }
 
 .bit-csl-cnt {
     width: 100%;
     height: 100%;
     cursor: grab;
+    order: 1;
     flex-grow: 1;
     overflow: hidden;
     user-select: none;
@@ -29,24 +74,25 @@
     }
 }
 
+.bit-csl-ndr {
+    cursor: default;
+}
+
 .bit-csl-lbt,
-.bit-csl-rbt {
-    top: 0;
+.bit-csl-rbt,
+.bit-csl-ppb {
     border: 0;
-    bottom: 0;
-    width: 10%;
     padding: 0;
     z-index: 1;
     opacity: 0.5;
     display: flex;
     cursor: pointer;
     background: 0 0;
-    color: $clr-fg-pri;
-    position: absolute;
     text-align: center;
     align-items: center;
-    font-size: spacing(3);
     justify-content: center;
+    color: var(--bit-csl-btn);
+    font-size: var(--bit-csl-btn-size);
     transition: opacity $mot-duration ease;
 
     @media (hover: hover) {
@@ -54,9 +100,28 @@
             outline: 0;
             opacity: 0.9;
             text-decoration: none;
-            color: $clr-fg-pri-hover;
+            color: var(--bit-csl-btn-hover);
         }
     }
+
+    &:focus-visible {
+        opacity: 1;
+
+        @include focus-ring;
+    }
+
+    &:disabled {
+        cursor: default;
+        color: $clr-fg-dis;
+    }
+}
+
+.bit-csl-lbt,
+.bit-csl-rbt {
+    top: 0;
+    bottom: 0;
+    width: 10%;
+    position: absolute;
 }
 
 .bit-csl-lbt {
@@ -67,73 +132,192 @@
     left: 0;
 }
 
+// A vertical carousel scrolls along its height, so the buttons move to the edges it actually scrolls
+// towards: the "left" (next) button to the bottom and the "right" (prev) button to the top.
+.bit-csl-vrt {
+    .bit-crsi {
+        top: unset;
+        bottom: unset;
+        left: 0;
+        right: 0;
+        padding-inline: 0;
+        padding-block: calc(var(--bit-csl-gap) / 2);
+    }
+
+    .bit-csl-cnt {
+        touch-action: pan-x;
+    }
+
+    .bit-csl-lbt,
+    .bit-csl-rbt {
+        top: unset;
+        bottom: unset;
+        left: 0;
+        right: 0;
+        width: 100%;
+        height: 10%;
+    }
+
+    .bit-csl-lbt {
+        bottom: 0;
+    }
+
+    .bit-csl-rbt {
+        top: 0;
+    }
+}
+
+// The row of controls is rendered before the slides so the play/pause button is the first thing the
+// keyboard reaches (see the comment in the markup), and ordered back below them here, so the change of
+// the reading order costs nothing visually.
 .bit-csl-dcn {
-    text-align: center;
+    order: 2;
+    display: flex;
+    flex-wrap: wrap;
+    align-items: center;
+    justify-content: center;
+    gap: spacing(0.5);
     margin-top: spacing(1.25);
 }
 
+.bit-csl-ppb {
+    position: relative;
+    font-size: calc(var(--bit-csl-dot-size) + #{spacing(0.5)});
+}
+
+// The dots group scopes the accessible label to the dots alone (the play/pause button lives outside
+// of it). It lays the dots out exactly like its container does, so the row looks the same with or
+// without the button next to it.
+.bit-csl-dts {
+    display: flex;
+    flex-wrap: wrap;
+    align-items: center;
+    justify-content: center;
+    gap: spacing(0.5);
+}
+
 .bit-csl-dot {
+    border: 0;
+    padding: 0;
     cursor: pointer;
     border-radius: 50%;
-    width: spacing(1.25);
-    height: spacing(1.25);
     display: inline-block;
-    margin: 0 spacing(0.5);
-    background-color: $clr-bg-ter;
+    width: var(--bit-csl-dot-size);
+    height: var(--bit-csl-dot-size);
+    background-color: var(--bit-csl-dot);
     transition: background-color $mot-duration-long ease;
 
     @media (hover: hover) {
         &:hover {
-            background-color: $clr-bg-ter-hover;
+            background-color: var(--bit-csl-dot-hover);
         }
     }
-}
 
+    &:focus-visible {
+        @include focus-ring;
+    }
 
-.bit-csl-apri {
-    .bit-csl-cud {
-        background-color: $clr-pri;
+    &:disabled {
+        cursor: default;
+        background-color: $clr-bg-dis;
+    }
+}
 
-        @media (hover: hover) {
-            &:hover {
-                background-color: $clr-pri-hover;
-            }
+// A dot that carries its own content (DotTemplate) is laid out around it instead of being drawn as the
+// fixed size circle, so a page number or a thumbnail is not squeezed into it.
+.bit-csl-dtt {
+    width: auto;
+    height: auto;
+    line-height: 1;
+    border-radius: 0;
+    display: inline-flex;
+    align-items: center;
+    justify-content: center;
+    color: var(--bit-csl-btn);
+    background-color: transparent;
+    transition: color $mot-duration-long ease;
+
+    @media (hover: hover) {
+        &:hover {
+            background-color: transparent;
+            color: var(--bit-csl-btn-hover);
         }
     }
+
+    &:disabled {
+        color: $clr-fg-dis;
+        background-color: transparent;
+    }
 }
 
-.bit-csl-asec {
-    .bit-csl-cud {
-        background-color: $clr-sec;
+.bit-csl-cud {
+    background-color: var(--bit-csl-clr);
 
-        @media (hover: hover) {
-            &:hover {
-                background-color: $clr-sec-hover;
-            }
+    @media (hover: hover) {
+        &:hover {
+            background-color: var(--bit-csl-clr-hover);
         }
     }
 }
 
-.bit-csl-ater {
-    .bit-csl-cud {
-        background-color: $clr-ter;
+.bit-csl-dtt.bit-csl-cud {
+    background-color: transparent;
+    color: var(--bit-csl-clr);
 
-        @media (hover: hover) {
-            &:hover {
-                background-color: $clr-ter-hover;
-            }
+    @media (hover: hover) {
+        &:hover {
+            background-color: transparent;
+            color: var(--bit-csl-clr-hover);
         }
     }
 }
 
+
+.bit-csl-sm {
+    --bit-csl-dot-size: #{spacing(1)};
+    --bit-csl-btn-size: #{spacing(2)};
+}
+
+.bit-csl-md {
+    --bit-csl-dot-size: #{spacing(1.25)};
+    --bit-csl-btn-size: #{spacing(3)};
+}
+
+.bit-csl-lg {
+    --bit-csl-dot-size: #{spacing(1.75)};
+    --bit-csl-btn-size: #{spacing(4)};
+}
+
+
+.bit-csl-apri {
+    --bit-csl-clr: #{$clr-pri};
+    --bit-csl-clr-hover: #{$clr-pri-hover};
+}
+
+.bit-csl-asec {
+    --bit-csl-clr: #{$clr-sec};
+    --bit-csl-clr-hover: #{$clr-sec-hover};
+}
+
+.bit-csl-ater {
+    --bit-csl-clr: #{$clr-ter};
+    --bit-csl-clr-hover: #{$clr-ter-hover};
+}
+
 .bit-csl-atra {
-    .bit-csl-cud {
-        background-color: transparent;
+    --bit-csl-clr: transparent;
+    --bit-csl-clr-hover: transparent;
+}
 
-        @media (hover: hover) {
-            &:hover {
-                background-color: transparent;
-            }
-        }
+
+// Role classes are generated from the shared $bit-color-roles map (see color-role-maps.scss). They sit
+// after the accent classes, so a carousel that sets both Color and Accent renders with its Color. The
+// buttons take the role color as well, so the whole chrome of the carousel reads as that role.
+@each $role, $tokens in $bit-color-roles {
+    .bit-csl-#{$role} {
+        --bit-csl-clr: #{role($tokens, main)};
+        --bit-csl-clr-hover: #{role($tokens, hover)};
+        --bit-csl-btn: #{role($tokens, main)};
+        --bit-csl-btn-hover: #{role($tokens, hover)};
     }
 }
diff --git a/src/BlazorUI/Bit.BlazorUI/Components/Lists/Carousel/BitCarouselClassStyles.cs b/src/BlazorUI/Bit.BlazorUI/Components/Lists/Carousel/BitCarouselClassStyles.cs
index e04fc6f86b5..a13c16acd71 100644
--- a/src/BlazorUI/Bit.BlazorUI/Components/Lists/Carousel/BitCarouselClassStyles.cs
+++ b/src/BlazorUI/Bit.BlazorUI/Components/Lists/Carousel/BitCarouselClassStyles.cs
@@ -1,4 +1,4 @@
-namespace Bit.BlazorUI;
+namespace Bit.BlazorUI;
 
 /// <summary>
 /// The custom CSS classes and styles of the different parts of the BitCarousel.
@@ -15,11 +15,30 @@ public class BitCarouselClassStyles
     /// </summary>
     public string? Container { get; set; }
 
+    /// <summary>
+    /// Custom CSS classes/styles for the items (slides) of the BitCarousel.
+    /// </summary>
+    public string? Item { get; set; }
+
+    /// <summary>
+    /// Custom CSS classes/styles for the items (slides) of the BitCarousel that are currently on screen.
+    /// </summary>
+    /// <remarks>
+    /// A carousel that shows several slides at a time marks every one of them, so this is the way to make
+    /// the slides of the current page stand out from the ones waiting outside of the view.
+    /// </remarks>
+    public string? CurrentItem { get; set; }
+
     /// <summary>
     /// Custom CSS classes/styles for the next/prev buttons of the BitCarousel.
     /// </summary>
     public string? Buttons { get; set; }
 
+    /// <summary>
+    /// Custom CSS classes/styles for the icons of the next/prev buttons of the BitCarousel.
+    /// </summary>
+    public string? ButtonIcons { get; set; }
+
     /// <summary>
     /// Custom CSS classes/styles for the go to left button of the BitCarousel.
     /// </summary>
@@ -53,5 +72,34 @@ public class BitCarouselClassStyles
     /// <summary>
     /// Custom CSS classes/styles for the current dot element of the BitCarousel.
     /// </summary>
+    [Obsolete($"This property is misspelled and will be removed in a future release. Use {nameof(CurrentDot)} instead.")]
     public string? CurrectDot { get; set; }
+
+    /// <summary>
+    /// Custom CSS classes/styles for the current dot element of the BitCarousel.
+    /// </summary>
+    public string? CurrentDot { get; set; }
+
+    /// <summary>
+    /// Custom CSS classes/styles for the play/pause button of the BitCarousel.
+    /// </summary>
+    public string? PlayPauseButton { get; set; }
+
+    /// <summary>
+    /// Custom CSS classes/styles for the icon of the play/pause button of the BitCarousel.
+    /// </summary>
+    public string? PlayPauseButtonIcon { get; set; }
+
+
+
+    /// <summary>
+    /// Resolves the current dot value, falling back to the misspelled property so the values
+    /// assigned to it before it was replaced keep being applied.
+    /// </summary>
+    internal string? GetCurrentDot()
+    {
+#pragma warning disable CS0618 // Type or member is obsolete
+        return CurrentDot ?? CurrectDot;
+#pragma warning restore CS0618
+    }
 }
diff --git a/src/BlazorUI/Bit.BlazorUI/Components/Lists/Carousel/BitCarouselItem.razor b/src/BlazorUI/Bit.BlazorUI/Components/Lists/Carousel/BitCarouselItem.razor
index c1ecc47d44a..5f38bc20660 100644
--- a/src/BlazorUI/Bit.BlazorUI/Components/Lists/Carousel/BitCarouselItem.razor
+++ b/src/BlazorUI/Bit.BlazorUI/Components/Lists/Carousel/BitCarouselItem.razor
@@ -1,9 +1,15 @@
-@namespace Bit.BlazorUI
+@namespace Bit.BlazorUI
 @inherits BitComponentBase
 
-<div @ref="RootElement"
+<div role="group"
+     aria-roledescription="slide"
+     aria-label="@GetAriaLabel()"
      @attributes="HtmlAttributes"
+     @ref="RootElement"
+     id="@_Id"
      style="@StyleBuilder.Value"
-     class="@ClassBuilder.Value">
+     class="@ClassBuilder.Value"
+     inert="@(InternalIsCurrent is false)"
+     aria-hidden="@(InternalIsCurrent ? null : "true")">
     @ChildContent
-</div>
\ No newline at end of file
+</div>
diff --git a/src/BlazorUI/Bit.BlazorUI/Components/Lists/Carousel/BitCarouselItem.razor.cs b/src/BlazorUI/Bit.BlazorUI/Components/Lists/Carousel/BitCarouselItem.razor.cs
index 5b6b8c3eb3e..4bcf5007ff7 100644
--- a/src/BlazorUI/Bit.BlazorUI/Components/Lists/Carousel/BitCarouselItem.razor.cs
+++ b/src/BlazorUI/Bit.BlazorUI/Components/Lists/Carousel/BitCarouselItem.razor.cs
@@ -1,16 +1,36 @@
-namespace Bit.BlazorUI;
-
+using System.Globalization;
+
+namespace Bit.BlazorUI;
+
+/// <summary>
+/// A single slide of a <see cref="BitCarousel"/>.
+/// </summary>
+/// <remarks>
+/// The item is laid out and moved by the carousel that holds it, so its size, its position and its
+/// transition are all assigned from there. Everything that describes the slide itself (its content,
+/// its classes and styles, and the label assistive technologies read for it) belongs here.
+/// </remarks>
 public partial class BitCarouselItem : BitComponentBase
 {
     [CascadingParameter] protected BitCarousel? Carousel { get; set; }
 
 
 
+    /// <summary>
+    /// The content of the carousel item (slide).
+    /// </summary>
     [Parameter] public RenderFragment? ChildContent { get; set; }
 
 
 
-    internal int Index;
+    /// <summary>
+    /// The zero based position of this item among the items of its carousel.
+    /// </summary>
+    /// <remarks>
+    /// It is assigned by the carousel when the item registers itself, and kept up to date when
+    /// items are added to or removed from the carousel at runtime.
+    /// </remarks>
+    public int Index { get; internal set; }
 
 
 
@@ -33,7 +53,7 @@ internal string InternalTransformStyle
         get => internalTransformStyle;
         set
         {
-            if (internalStyle == value) return;
+            if (internalTransformStyle == value) return;
 
             internalTransformStyle = value;
             StyleBuilder.Reset();
@@ -46,22 +66,75 @@ internal string InternalTransitionStyle
         get => internalTransitionStyle;
         set
         {
-            if (internalStyle == value) return;
+            if (internalTransitionStyle == value) return;
 
             internalTransitionStyle = value;
             StyleBuilder.Reset();
         }
     }
 
+    // The fade effect cross-fades the slides in place instead of translating them, so the opacity
+    // (and the stacking order that keeps the incoming slide on top) is held apart from the transform.
+    private string internalFadeStyle = string.Empty;
+    internal string InternalFadeStyle
+    {
+        get => internalFadeStyle;
+        set
+        {
+            if (internalFadeStyle == value) return;
+
+            internalFadeStyle = value;
+            StyleBuilder.Reset();
+        }
+    }
+
+    // Whether the slide is one of the ones currently on screen. It drives the inert/aria-hidden
+    // state, so the slides that are scrolled out of the view are not reachable with the keyboard
+    // and are not read out by screen readers, and it is also what the current item class and style
+    // of the carousel hang on.
+    private bool internalIsCurrent = true;
+    internal bool InternalIsCurrent
+    {
+        get => internalIsCurrent;
+        set
+        {
+            if (internalIsCurrent == value) return;
+
+            internalIsCurrent = value;
+            ClassBuilder.Reset();
+            StyleBuilder.Reset();
+            StateHasChanged();
+        }
+    }
 
+    // The accessible name a slide falls back to counts the slides around it, so the carousel asks its
+    // items to render again when it gains or loses one of them.
+    internal void Refresh()
+    {
+        StateHasChanged();
+    }
 
     protected override string RootElementClass => "bit-crsi";
 
     protected override void RegisterCssClasses()
     {
+        ClassBuilder.Register(() => Carousel?.Classes?.Item);
+
+        ClassBuilder.Register(() => InternalIsCurrent
+                                    ? $"bit-crsi-cur {Carousel?.Classes?.CurrentItem}".Trim()
+                                    : string.Empty);
+    }
+
+    protected override void RegisterCssStyles()
+    {
+        // These are registered before the Style parameter of the base class, so an explicit style
+        // assigned to a slide still wins over the layout the carousel computes for it.
         StyleBuilder.Register(() => InternalStyle);
         StyleBuilder.Register(() => InternalTransformStyle);
         StyleBuilder.Register(() => InternalTransitionStyle);
+        StyleBuilder.Register(() => InternalFadeStyle);
+        StyleBuilder.Register(() => Carousel?.Styles?.Item);
+        StyleBuilder.Register(() => InternalIsCurrent ? Carousel?.Styles?.CurrentItem : null);
     }
 
     protected override Task OnInitializedAsync()
@@ -70,4 +143,32 @@ protected override Task OnInitializedAsync()
 
         return base.OnInitializedAsync();
     }
+
+
+
+    // The accessible name of a slide falls back to its position, which is what the carousel pattern
+    // of the ARIA authoring practices asks for when a slide has nothing better to be called.
+    private string? GetAriaLabel()
+    {
+        if (AriaLabel.HasValue()) return AriaLabel;
+
+        var count = Carousel?.ItemsCount ?? 0;
+
+        if (count < 1) return null;
+
+        var format = Carousel?.ItemAriaLabelFormat;
+
+        return string.Format(CultureInfo.CurrentCulture, format.HasValue() ? format! : "{0} of {1}", Index + 1, count);
+    }
+
+
+
+    protected override ValueTask DisposeAsync(bool disposing)
+    {
+        if (IsDisposed || disposing is false) return base.DisposeAsync(disposing);
+
+        Carousel?.UnregisterItem(this);
+
+        return base.DisposeAsync(disposing);
+    }
 }
diff --git a/src/BlazorUI/Bit.BlazorUI/Components/Lists/Carousel/BitCarouselResponsiveOption.cs b/src/BlazorUI/Bit.BlazorUI/Components/Lists/Carousel/BitCarouselResponsiveOption.cs
new file mode 100644
index 00000000000..130de39d71e
--- /dev/null
+++ b/src/BlazorUI/Bit.BlazorUI/Components/Lists/Carousel/BitCarouselResponsiveOption.cs
@@ -0,0 +1,33 @@
+namespace Bit.BlazorUI;
+
+/// <summary>
+/// The layout a <see cref="BitCarousel"/> takes while it is no wider than a given breakpoint.
+/// </summary>
+/// <remarks>
+/// The options are matched against the width of the carousel itself (not of the window), and the narrowest
+/// matching one wins, so they can be listed in any order. A member that is left unset keeps the value of the
+/// matching parameter of the carousel.
+/// </remarks>
+public class BitCarouselResponsiveOption
+{
+    /// <summary>
+    /// The largest width (in pixels) of the carousel this option applies to.
+    /// </summary>
+    public double Breakpoint { get; set; }
+
+    /// <summary>
+    /// The number of items that is visible in the carousel while this option applies.
+    /// </summary>
+    /// <remarks>
+    /// When not set, the <see cref="BitCarousel.VisibleItemsCount"/> of the carousel is used.
+    /// </remarks>
+    public int? VisibleItemsCount { get; set; }
+
+    /// <summary>
+    /// The number of items a navigation moves while this option applies.
+    /// </summary>
+    /// <remarks>
+    /// When not set, the <see cref="BitCarousel.ScrollItemsCount"/> of the carousel is used.
+    /// </remarks>
+    public int? ScrollItemsCount { get; set; }
+}
diff --git a/src/BlazorUI/Bit.BlazorUI/Extensions/JsInterop/UtilsJsRuntimeExtensions.cs b/src/BlazorUI/Bit.BlazorUI/Extensions/JsInterop/UtilsJsRuntimeExtensions.cs
index 53735fc18e2..d2f7713066b 100644
--- a/src/BlazorUI/Bit.BlazorUI/Extensions/JsInterop/UtilsJsRuntimeExtensions.cs
+++ b/src/BlazorUI/Bit.BlazorUI/Extensions/JsInterop/UtilsJsRuntimeExtensions.cs
@@ -38,6 +38,12 @@ internal static ValueTask BitUtilsScrollElementIntoView(this IJSRuntime jsRuntim
     }
 
 
+    internal static ValueTask BitUtilsRegisterPreventPointerDown(this IJSRuntime jsRuntime, ElementReference element, bool active)
+    {
+        return jsRuntime.InvokeVoid("BitBlazorUI.Utils.registerPreventPointerDown", element, active);
+    }
+
+
     internal static ValueTask BitUtilsRegisterPreventKeys(this IJSRuntime jsRuntime, ElementReference element, string[] keys)
     {
         return jsRuntime.InvokeVoid("BitBlazorUI.Utils.registerPreventKeys", element, keys);
diff --git a/src/BlazorUI/Bit.BlazorUI/Scripts/Utils.ts b/src/BlazorUI/Bit.BlazorUI/Scripts/Utils.ts
index 558462ba5a7..3a835009835 100644
--- a/src/BlazorUI/Bit.BlazorUI/Scripts/Utils.ts
+++ b/src/BlazorUI/Bit.BlazorUI/Scripts/Utils.ts
@@ -142,6 +142,30 @@
             } catch (e) { console.error("BitBlazorUI.Utils.registerPreventShiftWheel:", e); }
         }
 
+        // Registers a pointerdown listener on the element that suppresses the browser's default
+        // action (dragging an image, selecting text) so the element can be dragged by the pointer
+        // instead. A pointerdown on a button inside the element is left alone, since preventing it
+        // would keep the button from taking the focus. Calling it again updates the active flag in
+        // place, so no separate unregister call is needed - the listener is garbage-collected with
+        // the element itself.
+        public static registerPreventPointerDown(element: HTMLElement, active: boolean) {
+            if (!element) return;
+
+            try {
+                const el = element as any;
+                el.__bitPreventPointerDown = active;
+
+                if (el.__bitPreventPointerDownRegistered) return;
+                el.__bitPreventPointerDownRegistered = true;
+
+                element.addEventListener('pointerdown', (e: PointerEvent) => {
+                    if (!(element as any).__bitPreventPointerDown) return;
+                    if (e.target instanceof Element && e.target.closest('button')) return;
+                    e.preventDefault();
+                });
+            } catch (e) { console.error("BitBlazorUI.Utils.registerPreventPointerDown:", e); }
+        }
+
         // Registers a keydown listener on the element that suppresses the browser's default action
         // for the given keys (e.g. PageUp/PageDown scrolling the page while a spinbutton handles
         // them as value changes). Calling it again updates the key list in place, and an empty list
diff --git a/src/BlazorUI/Demo/Client/Bit.BlazorUI.Demo.Client.Core/Pages/Components/Lists/Carousel/BitCarouselDemo.razor b/src/BlazorUI/Demo/Client/Bit.BlazorUI.Demo.Client.Core/Pages/Components/Lists/Carousel/BitCarouselDemo.razor
index f483b6013a2..2b5e22b5513 100644
--- a/src/BlazorUI/Demo/Client/Bit.BlazorUI.Demo.Client.Core/Pages/Components/Lists/Carousel/BitCarouselDemo.razor
+++ b/src/BlazorUI/Demo/Client/Bit.BlazorUI.Demo.Client.Core/Pages/Components/Lists/Carousel/BitCarouselDemo.razor
@@ -1,60 +1,71 @@
-@page "/components/carousel"
+@page "/components/carousel"
 
 <PageOutlet Url="components/carousel"
             Title="Carousel"
-            Description="Carousel (slideshow) lets users display their items across multiple slides." />
+            Description="Carousel (slideshow) displays items across sliding pages with navigation buttons, dots, drag, keyboard, wheel, autoplay and responsive multi-item layouts." />
 
 <DemoPage Name="Carousel"
           SecondaryNames="@(["SlideShow"])"
-          Description="Carousel (slideshow) lets users display their items across multiple slides."
+          Description="Carousel (slideshow) displays a set of items across sliding pages. It can be navigated with its built-in buttons and dots, by dragging, with the keyboard or the mouse wheel, programmatically, or automatically with autoplay. It shows one or several items at a time (adapting that to its own width), scrolls horizontally or vertically, cross-fades instead of sliding, and follows the carousel pattern of the ARIA authoring practices: a labelled carousel region of labelled slides, real buttons for every control, off-screen slides taken out of the reading and tab order, and a rotation that stops as soon as the pointer or the keyboard focus reaches it."
           Parameters="componentParameters"
           SubClasses="componentSubClasses"
+          SubEnums="componentSubEnums"
           PublicMembers="componentPublicMembers"
           GitHubUrl="Lists/Carousel/BitCarousel.razor"
           GitHubDemoUrl="Lists/Carousel/BitCarouselDemo.razor">
     <DemoExample Title="Basic" RazorCode="@example1RazorCode" Id="example1">
-        <BitCarousel>
+        <div>
+            The basic carousel shows one slide at a time and renders its default chrome: the next/prev buttons over the sides
+            and the navigation dots below the slides. It can also be dragged with the pointer and, since it is focusable,
+            navigated with the arrow keys and the Home/End keys. Give the carousel an AriaLabel that describes its content,
+            so assistive technologies can announce what the carousel region holds.
+        </div>
+        <br />
+        <BitCarousel AriaLabel="Landscape photos">
             <BitCarouselItem>
                 <div class="number">1 / 4</div>
-                <img class="image" src="_content/Bit.BlazorUI.Demo.Client.Core/images/carousel/img1.jpg">
+                <img class="image" alt="Aurora" src="_content/Bit.BlazorUI.Demo.Client.Core/images/carousel/img1.jpg">
             </BitCarouselItem>
             <BitCarouselItem>
                 <div class="number">2 / 4</div>
-                <img class="image" src="_content/Bit.BlazorUI.Demo.Client.Core/images/carousel/img2.jpg" />
+                <img class="image" alt="Beautiful mountain" src="_content/Bit.BlazorUI.Demo.Client.Core/images/carousel/img2.jpg" />
             </BitCarouselItem>
             <BitCarouselItem>
                 <div class="number">3 / 4</div>
-                <img class="image" src="_content/Bit.BlazorUI.Demo.Client.Core/images/carousel/img3.jpg" />
+                <img class="image" alt="Forest in the valley" src="_content/Bit.BlazorUI.Demo.Client.Core/images/carousel/img3.jpg" />
             </BitCarouselItem>
             <BitCarouselItem>
                 <div class="number">4 / 4</div>
-                <img class="image" src="_content/Bit.BlazorUI.Demo.Client.Core/images/carousel/img4.jpg" />
+                <img class="image" alt="Road among the mountains" src="_content/Bit.BlazorUI.Demo.Client.Core/images/carousel/img4.jpg" />
             </BitCarouselItem>
         </BitCarousel>
     </DemoExample>
 
     <DemoExample Title="InfiniteScrolling" RazorCode="@example2RazorCode" Id="example2">
-        <div>Configure the BitCarousel component for infinite scrolling, allowing the carousel to loop through slides continuously.</div>
+        <div>
+            The InfiniteScrolling parameter makes the carousel loop: the first slide follows the last one and the last one
+            precedes the first, so both navigation buttons stay available at all times instead of hiding at the ends.
+        </div>
         <br />
         <div>
             <BitCarousel InfiniteScrolling>
                 <BitCarouselItem>
-                    <img class="image" src="_content/Bit.BlazorUI.Demo.Client.Core/images/carousel/img1.jpg" />
+                    <img class="image" alt="Aurora" src="_content/Bit.BlazorUI.Demo.Client.Core/images/carousel/img1.jpg" />
                     <div class="text-title">Aurora</div>
                     <div class="text-description">This is Aurora and it's fantastic</div>
                 </BitCarouselItem>
                 <BitCarouselItem>
-                    <img class="image" src="_content/Bit.BlazorUI.Demo.Client.Core/images/carousel/img2.jpg" />
+                    <img class="image" alt="Beautiful mountain" src="_content/Bit.BlazorUI.Demo.Client.Core/images/carousel/img2.jpg" />
                     <div class="text-title">Beautiful Mountain</div>
                     <div class="text-description">This is a Beautiful Mountain and it's gorgeous</div>
                 </BitCarouselItem>
                 <BitCarouselItem>
-                    <img class="image" src="_content/Bit.BlazorUI.Demo.Client.Core/images/carousel/img3.jpg" />
+                    <img class="image" alt="Forest in the valley" src="_content/Bit.BlazorUI.Demo.Client.Core/images/carousel/img3.jpg" />
                     <div class="text-title">Forest In The Valley</div>
                     <div class="text-description">This is a Forest In The Valley and it's beautiful</div>
                 </BitCarouselItem>
                 <BitCarouselItem>
-                    <img class="image" src="_content/Bit.BlazorUI.Demo.Client.Core/images/carousel/img4.jpg" />
+                    <img class="image" alt="Road among the mountains" src="_content/Bit.BlazorUI.Demo.Client.Core/images/carousel/img4.jpg" />
                     <div class="text-title">Road Among The Mountains</div>
                     <div class="text-description">This is a Road Among The Mountains and it's amazing</div>
                 </BitCarouselItem>
@@ -63,31 +74,34 @@
     </DemoExample>
 
     <DemoExample Title="HideDots" RazorCode="@example3RazorCode" Id="example3">
-        <div>Use the HideDots property to hide the navigation dots below the carousel slides.</div>
+        <div>
+            The HideDots parameter removes the navigation dots below the slides, leaving only the next/prev buttons
+            (which the HideNextPrev parameter removes in the same way for a fully chromeless carousel).
+        </div>
         <br />
         <div>
             <BitCarousel HideDots>
                 <BitCarouselItem>
                     <div class="number">1 / 4</div>
-                    <img class="image" src="_content/Bit.BlazorUI.Demo.Client.Core/images/carousel/img1.jpg" />
+                    <img class="image" alt="Aurora" src="_content/Bit.BlazorUI.Demo.Client.Core/images/carousel/img1.jpg" />
                     <div class="text-title">Aurora</div>
                     <div class="text-description">This is Aurora and it's fantastic</div>
                 </BitCarouselItem>
                 <BitCarouselItem>
                     <div class="number">2 / 4</div>
-                    <img class="image" src="_content/Bit.BlazorUI.Demo.Client.Core/images/carousel/img2.jpg" />
+                    <img class="image" alt="Beautiful mountain" src="_content/Bit.BlazorUI.Demo.Client.Core/images/carousel/img2.jpg" />
                     <div class="text-title">Beautiful Mountain</div>
                     <div class="text-description">This is a Beautiful Mountain and it's gorgeous</div>
                 </BitCarouselItem>
                 <BitCarouselItem>
                     <div class="number">3 / 4</div>
-                    <img class="image" src="_content/Bit.BlazorUI.Demo.Client.Core/images/carousel/img3.jpg" />
+                    <img class="image" alt="Forest in the valley" src="_content/Bit.BlazorUI.Demo.Client.Core/images/carousel/img3.jpg" />
                     <div class="text-title">Forest In The Valley</div>
                     <div class="text-description">This is a Forest In The Valley and it's beautiful</div>
                 </BitCarouselItem>
                 <BitCarouselItem>
                     <div class="number">4 / 4</div>
-                    <img class="image" src="_content/Bit.BlazorUI.Demo.Client.Core/images/carousel/img4.jpg" />
+                    <img class="image" alt="Road among the mountains" src="_content/Bit.BlazorUI.Demo.Client.Core/images/carousel/img4.jpg" />
                     <div class="text-title">Road Among The Mountains</div>
                     <div class="text-description">This is a Road Among The Mountains and it's amazing</div>
                 </BitCarouselItem>
@@ -97,38 +111,42 @@
 
     <DemoExample Title="Public API" RazorCode="@example4RazorCode" CsharpCode="@example4CsharpCode" Id="example4">
         <div>
-            Use the public API of BitCarousel to control the slides programmatically.
-            This example shows how to navigate slides using buttons.
+            The carousel can be driven entirely from application code through a @@ref to it: GoNext, GoPrev and GoTo
+            (1 based) navigate the slides, Pause, Resume and TogglePlay drive the auto scrolling, and Refresh measures
+            the carousel again after something else moved the ground under it. The CurrentPage (zero based), PagesCount,
+            ItemsCount, IsPlaying and IsPaused members report where it stands, and OnChange fires with the index of the
+            page it moved to. This example hides the built-in buttons and replaces them with its own.
         </div>
         <br />
         <div>
-            <BitCarousel HideNextPrev @ref="carousel">
+            <BitCarousel HideNextPrev @ref="carousel" OnChange="v => currentPage = v">
                 <BitCarouselItem>
                     <div class="number">1 / 4</div>
-                    <img class="image" src="_content/Bit.BlazorUI.Demo.Client.Core/images/carousel/img1.jpg" />
+                    <img class="image" alt="Aurora" src="_content/Bit.BlazorUI.Demo.Client.Core/images/carousel/img1.jpg" />
                     <div class="text-title">Aurora</div>
                     <div class="text-description">This is Aurora and it's fantastic</div>
                 </BitCarouselItem>
                 <BitCarouselItem>
                     <div class="number">2 / 4</div>
-                    <img class="image" src="_content/Bit.BlazorUI.Demo.Client.Core/images/carousel/img2.jpg" />
+                    <img class="image" alt="Beautiful mountain" src="_content/Bit.BlazorUI.Demo.Client.Core/images/carousel/img2.jpg" />
                     <div class="text-title">Beautiful Mountain</div>
                     <div class="text-description">This is a Beautiful Mountain and it's gorgeous</div>
                 </BitCarouselItem>
                 <BitCarouselItem>
                     <div class="number">3 / 4</div>
-                    <img class="image" src="_content/Bit.BlazorUI.Demo.Client.Core/images/carousel/img3.jpg" />
+                    <img class="image" alt="Forest in the valley" src="_content/Bit.BlazorUI.Demo.Client.Core/images/carousel/img3.jpg" />
                     <div class="text-title">Forest In The Valley</div>
                     <div class="text-description">This is a Forest In The Valley and it's beautiful</div>
                 </BitCarouselItem>
                 <BitCarouselItem>
                     <div class="number">4 / 4</div>
-                    <img class="image" src="_content/Bit.BlazorUI.Demo.Client.Core/images/carousel/img4.jpg" />
+                    <img class="image" alt="Road among the mountains" src="_content/Bit.BlazorUI.Demo.Client.Core/images/carousel/img4.jpg" />
                     <div class="text-title">Road Among The Mountains</div>
                     <div class="text-description">This is a Road Among The Mountains and it's amazing</div>
                 </BitCarouselItem>
             </BitCarousel>
         </div>
+        <br />
         <div class="buttons-container">
             <div>
                 <BitButton OnClick="GoPrev">&lt; Prev</BitButton>
@@ -139,46 +157,112 @@
                 <BitNumberField @bind-Value="number" Min="1" Max="4" Mode="BitSpinButtonMode.Compact" />
             </div>
         </div>
+        <br />
+        <div>Current page: @currentPage</div>
     </DemoExample>
 
     <DemoExample Title="AutoPlay" RazorCode="@example5RazorCode" Id="example5">
         <div>
-            Configure the BitCarousel to automatically transition between slides.
-            The AutoPlay feature allows you to set the interval for automatic slide transitions.
+            The AutoPlay parameter rotates the slides on its own at the AutoPlayInterval. The rotation pauses while the
+            pointer rests over the carousel or the keyboard focus is inside it (PauseOnHover / PauseOnFocus, both on by
+            default) and while the page sits in a background tab, and resumes when they leave.
         </div>
         <br />
         <div>
             <BitCarousel HideNextPrev InfiniteScrolling AutoPlay AutoPlayInterval="2500">
                 <BitCarouselItem>
                     <div class="number">1 / 4</div>
-                    <img class="image" src="_content/Bit.BlazorUI.Demo.Client.Core/images/carousel/img1.jpg" />
+                    <img class="image" alt="Aurora" src="_content/Bit.BlazorUI.Demo.Client.Core/images/carousel/img1.jpg" />
                     <div class="text-title">Aurora</div>
                     <div class="text-description">This is Aurora and it's fantastic</div>
                 </BitCarouselItem>
                 <BitCarouselItem>
                     <div class="number">2 / 4</div>
-                    <img class="image" src="_content/Bit.BlazorUI.Demo.Client.Core/images/carousel/img2.jpg" />
+                    <img class="image" alt="Beautiful mountain" src="_content/Bit.BlazorUI.Demo.Client.Core/images/carousel/img2.jpg" />
                     <div class="text-title">Beautiful Mountain</div>
                     <div class="text-description">This is a Beautiful Mountain and it's gorgeous</div>
                 </BitCarouselItem>
                 <BitCarouselItem>
                     <div class="number">3 / 4</div>
-                    <img class="image" src="_content/Bit.BlazorUI.Demo.Client.Core/images/carousel/img3.jpg" />
+                    <img class="image" alt="Forest in the valley" src="_content/Bit.BlazorUI.Demo.Client.Core/images/carousel/img3.jpg" />
                     <div class="text-title">Forest In The Valley</div>
                     <div class="text-description">This is a Forest In The Valley and it's beautiful</div>
                 </BitCarouselItem>
                 <BitCarouselItem>
                     <div class="number">4 / 4</div>
-                    <img class="image" src="_content/Bit.BlazorUI.Demo.Client.Core/images/carousel/img4.jpg" />
+                    <img class="image" alt="Road among the mountains" src="_content/Bit.BlazorUI.Demo.Client.Core/images/carousel/img4.jpg" />
                     <div class="text-title">Road Among The Mountains</div>
                     <div class="text-description">This is a Road Among The Mountains and it's amazing</div>
                 </BitCarouselItem>
             </BitCarousel>
         </div>
+        <br /><br />
+        <div>
+            The ShowPlayPause parameter renders a play/pause button next to the dots so the rotation can be stopped and
+            started by hand (which WCAG asks of any auto-moving content), and StopOnInteraction stops it for good as soon
+            as the carousel is navigated manually. Pause, Resume and TogglePlay do the same from code, and IsPaused /
+            IsPlaying report the state.
+        </div>
+        <br />
+        <div>
+            <BitCarousel InfiniteScrolling AutoPlay AutoPlayInterval="2000" ShowPlayPause StopOnInteraction>
+                <BitCarouselItem>
+                    <div class="number">1 / 4</div>
+                    <img class="image" alt="Aurora" src="_content/Bit.BlazorUI.Demo.Client.Core/images/carousel/img1.jpg" />
+                </BitCarouselItem>
+                <BitCarouselItem>
+                    <div class="number">2 / 4</div>
+                    <img class="image" alt="Beautiful mountain" src="_content/Bit.BlazorUI.Demo.Client.Core/images/carousel/img2.jpg" />
+                </BitCarouselItem>
+                <BitCarouselItem>
+                    <div class="number">3 / 4</div>
+                    <img class="image" alt="Forest in the valley" src="_content/Bit.BlazorUI.Demo.Client.Core/images/carousel/img3.jpg" />
+                </BitCarouselItem>
+                <BitCarouselItem>
+                    <div class="number">4 / 4</div>
+                    <img class="image" alt="Road among the mountains" src="_content/Bit.BlazorUI.Demo.Client.Core/images/carousel/img4.jpg" />
+                </BitCarouselItem>
+            </BitCarousel>
+        </div>
+        <br /><br />
+        <div>
+            The AutoPlayReverse parameter plays the rotation backwards, from the last slide towards the first one.
+        </div>
+        <br />
+        <div>
+            <BitCarousel AutoPlay AutoPlayReverse InfiniteScrolling HideNextPrev Style="height: 100px">
+                <BitCarouselItem Class="item"><div>1</div></BitCarouselItem>
+                <BitCarouselItem Class="item"><div>2</div></BitCarouselItem>
+                <BitCarouselItem Class="item"><div>3</div></BitCarouselItem>
+                <BitCarouselItem Class="item"><div>4</div></BitCarouselItem>
+            </BitCarousel>
+        </div>
+        <br /><br />
+        <div>
+            StopOnLastSlide stops the rotation on the last page instead of rewinding to the first one, which only
+            applies to a carousel that does not scroll infinitely, since an infinite one never reaches an end.
+        </div>
+        <br />
+        <div>
+            <BitCarousel AutoPlay StopOnLastSlide HideNextPrev Style="height: 100px">
+                <BitCarouselItem Class="item"><div>1</div></BitCarouselItem>
+                <BitCarouselItem Class="item"><div>2</div></BitCarouselItem>
+                <BitCarouselItem Class="item"><div>3</div></BitCarouselItem>
+                <BitCarouselItem Class="item"><div>4</div></BitCarouselItem>
+            </BitCarousel>
+        </div>
     </DemoExample>
 
-    <DemoExample Title="Advanced" RazorCode="@example6RazorCode" Id="example6">
-        <div>Use BitCarousel with customized style, visible items count, and scroll items count for advanced scenarios.</div>
+    <DemoExample Title="Multiple items" RazorCode="@example6RazorCode" Id="example6">
+        <div>
+            The VisibleItemsCount parameter lays several slides out side by side, and ScrollItemsCount sets how many of
+            them a navigation moves at a time, so the carousel can page through its items in groups or advance them one
+            by one. The two of them together decide where the carousel stops: a page is one step of it, which is what a
+            dot stands for and what OnChange reports, so a carousel that shows three slides and moves them one at a time
+            gets a dot per slide rather than one per screenful, and its dots keep up with it.
+        </div>
+        <br />
+        <div>Three at a time, moved three at a time (three pages of three slides):</div>
         <br />
         <div>
             <BitCarousel Style="height: 100px" VisibleItemsCount="3" ScrollItemsCount="3">
@@ -193,9 +277,340 @@
                 <BitCarouselItem Class="item"><div>9</div></BitCarouselItem>
             </BitCarousel>
         </div>
+        <br /><br />
+        <div>
+            The same nine slides shown three at a time but moved one at a time, which stops in seven places instead of
+            three. The slides the next step shares with the current one stay where they are instead of being thrown out
+            and animated back in.
+        </div>
+        <br />
+        <div>
+            <BitCarousel Style="height: 100px" VisibleItemsCount="3" ScrollItemsCount="1">
+                <BitCarouselItem Class="item"><div>1</div></BitCarouselItem>
+                <BitCarouselItem Class="item"><div>2</div></BitCarouselItem>
+                <BitCarouselItem Class="item"><div>3</div></BitCarouselItem>
+                <BitCarouselItem Class="item"><div>4</div></BitCarouselItem>
+                <BitCarouselItem Class="item"><div>5</div></BitCarouselItem>
+                <BitCarouselItem Class="item"><div>6</div></BitCarouselItem>
+                <BitCarouselItem Class="item"><div>7</div></BitCarouselItem>
+                <BitCarouselItem Class="item"><div>8</div></BitCarouselItem>
+                <BitCarouselItem Class="item"><div>9</div></BitCarouselItem>
+            </BitCarousel>
+        </div>
+    </DemoExample>
+
+    <DemoExample Title="Gap" RazorCode="@example7RazorCode" Id="example7">
+        <div>
+            The Gap parameter puts space (any CSS length) between the slides of a multi-item carousel. The space is carved
+            out of the room each slide occupies, so the pages keep lining up no matter how many slides are visible.
+        </div>
+        <br />
+        <div>
+            <BitCarousel Style="height: 100px" VisibleItemsCount="3" ScrollItemsCount="1" Gap="1rem" InfiniteScrolling>
+                <BitCarouselItem><div class="item gap-item">1</div></BitCarouselItem>
+                <BitCarouselItem><div class="item gap-item">2</div></BitCarouselItem>
+                <BitCarouselItem><div class="item gap-item">3</div></BitCarouselItem>
+                <BitCarouselItem><div class="item gap-item">4</div></BitCarouselItem>
+                <BitCarouselItem><div class="item gap-item">5</div></BitCarouselItem>
+                <BitCarouselItem><div class="item gap-item">6</div></BitCarouselItem>
+            </BitCarousel>
+        </div>
+    </DemoExample>
+
+    <DemoExample Title="Vertical" RazorCode="@example8RazorCode" Id="example8">
+        <div>
+            The Vertical parameter stacks the slides over the height of the carousel, so it scrolls up and down instead of
+            left and right: the navigation buttons move to the top and bottom edges and the up/down arrow keys take over
+            the navigation.
+        </div>
+        <br />
+        <div>
+            <BitCarousel Vertical Style="height: 200px" InfiniteScrolling>
+                <BitCarouselItem>
+                    <div class="number">1 / 4</div>
+                    <img class="image" alt="Aurora" src="_content/Bit.BlazorUI.Demo.Client.Core/images/carousel/img1.jpg" />
+                </BitCarouselItem>
+                <BitCarouselItem>
+                    <div class="number">2 / 4</div>
+                    <img class="image" alt="Beautiful mountain" src="_content/Bit.BlazorUI.Demo.Client.Core/images/carousel/img2.jpg" />
+                </BitCarouselItem>
+                <BitCarouselItem>
+                    <div class="number">3 / 4</div>
+                    <img class="image" alt="Forest in the valley" src="_content/Bit.BlazorUI.Demo.Client.Core/images/carousel/img3.jpg" />
+                </BitCarouselItem>
+                <BitCarouselItem>
+                    <div class="number">4 / 4</div>
+                    <img class="image" alt="Road among the mountains" src="_content/Bit.BlazorUI.Demo.Client.Core/images/carousel/img4.jpg" />
+                </BitCarouselItem>
+            </BitCarousel>
+        </div>
+    </DemoExample>
+
+    <DemoExample Title="Fade" RazorCode="@example9RazorCode" Id="example9">
+        <div>
+            The Fade parameter cross-fades the slides in place instead of sliding them, for the classic slideshow look.
+            A fading carousel shows exactly one slide at a time.
+        </div>
+        <br />
+        <div>
+            <BitCarousel Fade InfiniteScrolling>
+                <BitCarouselItem>
+                    <div class="number">1 / 4</div>
+                    <img class="image" alt="Aurora" src="_content/Bit.BlazorUI.Demo.Client.Core/images/carousel/img1.jpg" />
+                </BitCarouselItem>
+                <BitCarouselItem>
+                    <div class="number">2 / 4</div>
+                    <img class="image" alt="Beautiful mountain" src="_content/Bit.BlazorUI.Demo.Client.Core/images/carousel/img2.jpg" />
+                </BitCarouselItem>
+                <BitCarouselItem>
+                    <div class="number">3 / 4</div>
+                    <img class="image" alt="Forest in the valley" src="_content/Bit.BlazorUI.Demo.Client.Core/images/carousel/img3.jpg" />
+                </BitCarouselItem>
+                <BitCarouselItem>
+                    <div class="number">4 / 4</div>
+                    <img class="image" alt="Road among the mountains" src="_content/Bit.BlazorUI.Demo.Client.Core/images/carousel/img4.jpg" />
+                </BitCarouselItem>
+            </BitCarousel>
+        </div>
     </DemoExample>
 
-    <DemoExample Title="External Icons" RazorCode="@example7RazorCode" Id="example7">
+    <DemoExample Title="Interaction" RazorCode="@example10RazorCode" Id="example10">
+        <div>
+            The way the carousel is operated by hand is configurable: NoDrag turns off dragging it with the pointer,
+            NoKeyboard takes it out of the tab sequence and turns off the arrow key navigation (arrow keys, Home and
+            End), Wheel navigates it with the mouse wheel (or a trackpad scroll), and DragThreshold sets how far a drag
+            has to travel before it counts. A drag that travels further across the carousel than along it is left alone,
+            so scrolling a page by dragging over a carousel never flips its slides; and a wheel moves the carousel
+            forwards when it is scrolled away from the reader (down, or right), whichever way its slides are laid out.
+        </div>
+        <br />
+        <div>This carousel is navigated with the mouse wheel and cannot be dragged:</div>
+        <br />
+        <div>
+            <BitCarousel Wheel NoDrag InfiniteScrolling Style="height: 100px" VisibleItemsCount="3" ScrollItemsCount="1">
+                <BitCarouselItem Class="item"><div>1</div></BitCarouselItem>
+                <BitCarouselItem Class="item"><div>2</div></BitCarouselItem>
+                <BitCarouselItem Class="item"><div>3</div></BitCarouselItem>
+                <BitCarouselItem Class="item"><div>4</div></BitCarouselItem>
+                <BitCarouselItem Class="item"><div>5</div></BitCarouselItem>
+                <BitCarouselItem Class="item"><div>6</div></BitCarouselItem>
+            </BitCarousel>
+        </div>
+    </DemoExample>
+
+    <DemoExample Title="Animation" RazorCode="@example11RazorCode" Id="example11">
+        <div>
+            The AnimationDuration parameter sets how long the slide transition takes, in seconds (0.5 by default).
+            A value of 0 moves the slides at once, with no animation at all, and the same duration also drives the
+            cross-fade speed of the Fade effect.
+        </div>
+        <br />
+        <div>Slow transition (1.5 seconds):</div>
+        <br />
+        <div>
+            <BitCarousel Style="height: 100px" AnimationDuration="1.5" InfiniteScrolling>
+                <BitCarouselItem Class="item"><div>1</div></BitCarouselItem>
+                <BitCarouselItem Class="item"><div>2</div></BitCarouselItem>
+                <BitCarouselItem Class="item"><div>3</div></BitCarouselItem>
+                <BitCarouselItem Class="item"><div>4</div></BitCarouselItem>
+            </BitCarousel>
+        </div>
+        <br />
+        <div>No animation (0 seconds):</div>
+        <br />
+        <div>
+            <BitCarousel Style="height: 100px" AnimationDuration="0" InfiniteScrolling>
+                <BitCarouselItem Class="item"><div>1</div></BitCarouselItem>
+                <BitCarouselItem Class="item"><div>2</div></BitCarouselItem>
+                <BitCarouselItem Class="item"><div>3</div></BitCarouselItem>
+                <BitCarouselItem Class="item"><div>4</div></BitCarouselItem>
+            </BitCarousel>
+        </div>
+    </DemoExample>
+
+    <DemoExample Title="DefaultPage" RazorCode="@example12RazorCode" Id="example12">
+        <div>
+            The DefaultPage parameter sets the page (1 based, like GoTo) the carousel shows when it first renders.
+            It is only read during the first layout, so changing it afterwards does not move the carousel (use GoTo
+            for that), and values outside of the range of the carousel are clamped to its first or last page.
+        </div>
+        <br />
+        <div>
+            <BitCarousel Style="height: 100px" DefaultPage="3">
+                <BitCarouselItem Class="item"><div>1</div></BitCarouselItem>
+                <BitCarouselItem Class="item"><div>2</div></BitCarouselItem>
+                <BitCarouselItem Class="item"><div>3</div></BitCarouselItem>
+                <BitCarouselItem Class="item"><div>4</div></BitCarouselItem>
+                <BitCarouselItem Class="item"><div>5</div></BitCarouselItem>
+            </BitCarousel>
+        </div>
+    </DemoExample>
+
+    <DemoExample Title="Responsive" RazorCode="@example13RazorCode" Id="example13">
+        <div>
+            The ResponsiveOptions parameter adapts VisibleItemsCount and ScrollItemsCount to the width of the carousel.
+            Each option applies while the carousel is no wider than its Breakpoint (in pixels) and the narrowest matching
+            one wins, so the options can be listed in any order; a carousel wider than every breakpoint keeps the counts
+            of its own parameters. The width that is matched is the width of the carousel itself rather than of the
+            window, so the same carousel adapts to the room it is given inside a sidebar and across a full width page.
+        </div>
+        <br />
+        <div>Resize the window (or this panel) to watch the number of slides change:</div>
+        <br />
+        <div>
+            <BitCarousel Style="height: 100px"
+                         VisibleItemsCount="4"
+                         ScrollItemsCount="4"
+                         InfiniteScrolling
+                         ResponsiveOptions="@([new() { Breakpoint = 640, VisibleItemsCount = 1, ScrollItemsCount = 1 },
+                                               new() { Breakpoint = 960, VisibleItemsCount = 2, ScrollItemsCount = 2 },
+                                               new() { Breakpoint = 1280, VisibleItemsCount = 3, ScrollItemsCount = 3 }])">
+                <BitCarouselItem Class="item"><div>1</div></BitCarouselItem>
+                <BitCarouselItem Class="item"><div>2</div></BitCarouselItem>
+                <BitCarouselItem Class="item"><div>3</div></BitCarouselItem>
+                <BitCarouselItem Class="item"><div>4</div></BitCarouselItem>
+                <BitCarouselItem Class="item"><div>5</div></BitCarouselItem>
+                <BitCarouselItem Class="item"><div>6</div></BitCarouselItem>
+                <BitCarouselItem Class="item"><div>7</div></BitCarouselItem>
+                <BitCarouselItem Class="item"><div>8</div></BitCarouselItem>
+            </BitCarousel>
+        </div>
+    </DemoExample>
+
+    <DemoExample Title="Dots" RazorCode="@example14RazorCode" Id="example14">
+        <div>
+            The DotTemplate parameter replaces the content of a dot, receiving the zero based index of the page it
+            navigates to, so the row below the slides can carry page numbers, thumbnails, or anything else. A dot that
+            holds content is laid out around it instead of being drawn as the default circle, and it keeps the
+            accessible label (DotAriaLabel) and the current page marker the carousel gives it either way.
+        </div>
+        <br />
+        <div>Numbered dots:</div>
+        <br />
+        <div>
+            <BitCarousel Style="height: 100px" InfiniteScrolling>
+                <DotTemplate Context="index"><span>@(index + 1)</span></DotTemplate>
+                <ChildContent>
+                    <BitCarouselItem Class="item"><div>1</div></BitCarouselItem>
+                    <BitCarouselItem Class="item"><div>2</div></BitCarouselItem>
+                    <BitCarouselItem Class="item"><div>3</div></BitCarouselItem>
+                    <BitCarouselItem Class="item"><div>4</div></BitCarouselItem>
+                </ChildContent>
+            </BitCarousel>
+        </div>
+        <br /><br />
+        <div>Thumbnails of the slides they navigate to:</div>
+        <br />
+        <div>
+            <BitCarousel InfiniteScrolling
+                         Classes="@(new() { Dots = "thumb-dot", CurrentDot = "thumb-dot-current" })">
+                <DotTemplate Context="index">
+                    <img class="thumb" alt="" src="@($"_content/Bit.BlazorUI.Demo.Client.Core/images/carousel/img{index + 1}.jpg")" />
+                </DotTemplate>
+                <ChildContent>
+                    <BitCarouselItem>
+                        <img class="image" alt="Aurora" src="_content/Bit.BlazorUI.Demo.Client.Core/images/carousel/img1.jpg" />
+                    </BitCarouselItem>
+                    <BitCarouselItem>
+                        <img class="image" alt="Beautiful mountain" src="_content/Bit.BlazorUI.Demo.Client.Core/images/carousel/img2.jpg" />
+                    </BitCarouselItem>
+                    <BitCarouselItem>
+                        <img class="image" alt="Forest in the valley" src="_content/Bit.BlazorUI.Demo.Client.Core/images/carousel/img3.jpg" />
+                    </BitCarouselItem>
+                    <BitCarouselItem>
+                        <img class="image" alt="Road among the mountains" src="_content/Bit.BlazorUI.Demo.Client.Core/images/carousel/img4.jpg" />
+                    </BitCarouselItem>
+                </ChildContent>
+            </BitCarousel>
+        </div>
+    </DemoExample>
+
+    <DemoExample Title="Accessibility" RazorCode="@example15RazorCode" Id="example15">
+        <div>
+            The carousel follows the carousel pattern of the ARIA authoring practices out of the box: its root is a
+            region marked as a carousel, every slide is a group marked as a slide, the slides that are scrolled out of
+            the view are taken out of the reading and the tab order, all of the controls are real buttons that point at
+            the slides they move with aria-controls, and the play/pause button is the first thing the keyboard reaches
+            so the motion can be stopped before anything else. The text of all of that is yours to set:
+        </div>
+        <br />
+        <ul>
+            <li><b>AriaLabel</b> names the carousel region, which is what a screen reader announces on the way in.</li>
+            <li><b>ItemAriaLabelFormat</b> names the slides that carry no label of their own ("{0} of {1}" by default, where {0} is the position of the slide and {1} the number of slides); a slide that deserves a better name takes an AriaLabel of its own.</li>
+            <li><b>DotsAriaLabel</b> names the group of dots and <b>DotAriaLabel</b> prefixes each one of them, which is followed by the number of the page it navigates to.</li>
+            <li><b>GoLeftAriaLabel</b> and <b>GoRightAriaLabel</b> name the navigation buttons, which otherwise are labelled after what they do (which flips with the direction of the carousel).</li>
+            <li><b>PlayButtonAriaLabel</b> and <b>PauseButtonAriaLabel</b> name the rotation control in each of its two states.</li>
+        </ul>
+        <br />
+        <div>
+            <BitCarousel AutoPlay
+                         ShowPlayPause
+                         InfiniteScrolling
+                         AriaLabel="Landscape photos"
+                         ItemAriaLabelFormat="Photo {0} of {1}"
+                         DotAriaLabel="Photo"
+                         DotsAriaLabel="Choose a photo to display"
+                         GoLeftAriaLabel="Next photo"
+                         GoRightAriaLabel="Previous photo"
+                         PlayButtonAriaLabel="Start the photo slide show"
+                         PauseButtonAriaLabel="Stop the photo slide show">
+                <BitCarouselItem AriaLabel="Aurora over a frozen lake">
+                    <img class="image" alt="Aurora" src="_content/Bit.BlazorUI.Demo.Client.Core/images/carousel/img1.jpg" />
+                </BitCarouselItem>
+                <BitCarouselItem>
+                    <img class="image" alt="Beautiful mountain" src="_content/Bit.BlazorUI.Demo.Client.Core/images/carousel/img2.jpg" />
+                </BitCarouselItem>
+                <BitCarouselItem>
+                    <img class="image" alt="Forest in the valley" src="_content/Bit.BlazorUI.Demo.Client.Core/images/carousel/img3.jpg" />
+                </BitCarouselItem>
+            </BitCarousel>
+        </div>
+    </DemoExample>
+
+    <DemoExample Title="Color" RazorCode="@example16RazorCode" Id="example16">
+        <div>
+            The Color parameter offers the general colors of the theme for the chrome of the carousel: it colors the dot
+            of the current page and the navigation buttons. The Accent parameter is its lighter-weight sibling that only
+            offers the primary/secondary/tertiary/transparent kinds for the current dot.
+        </div>
+        <br />
+        <div class="colors-container">
+            <div>
+                <BitLabel>Primary</BitLabel>
+                <BitCarousel Color="BitColor.Primary" Style="height: 72px" InfiniteScrolling>
+                    <BitCarouselItem Class="item"><div>1</div></BitCarouselItem>
+                    <BitCarouselItem Class="item"><div>2</div></BitCarouselItem>
+                    <BitCarouselItem Class="item"><div>3</div></BitCarouselItem>
+                </BitCarousel>
+            </div>
+            <div>
+                <BitLabel>Success</BitLabel>
+                <BitCarousel Color="BitColor.Success" Style="height: 72px" InfiniteScrolling>
+                    <BitCarouselItem Class="item"><div>1</div></BitCarouselItem>
+                    <BitCarouselItem Class="item"><div>2</div></BitCarouselItem>
+                    <BitCarouselItem Class="item"><div>3</div></BitCarouselItem>
+                </BitCarousel>
+            </div>
+            <div>
+                <BitLabel>Warning</BitLabel>
+                <BitCarousel Color="BitColor.Warning" Style="height: 72px" InfiniteScrolling>
+                    <BitCarouselItem Class="item"><div>1</div></BitCarouselItem>
+                    <BitCarouselItem Class="item"><div>2</div></BitCarouselItem>
+                    <BitCarouselItem Class="item"><div>3</div></BitCarouselItem>
+                </BitCarousel>
+            </div>
+            <div>
+                <BitLabel>Error</BitLabel>
+                <BitCarousel Color="BitColor.Error" Style="height: 72px" InfiniteScrolling>
+                    <BitCarouselItem Class="item"><div>1</div></BitCarouselItem>
+                    <BitCarouselItem Class="item"><div>2</div></BitCarouselItem>
+                    <BitCarouselItem Class="item"><div>3</div></BitCarouselItem>
+                </BitCarousel>
+            </div>
+        </div>
+    </DemoExample>
+
+    <DemoExample Title="External Icons" RazorCode="@example17RazorCode" Id="example17">
         <div>Use icons from external libraries like FontAwesome, Material Icons, and Bootstrap Icons with the <b>GoLeftIcon</b> and <b>GoRightIcon</b> parameters.</div>
 
         <br />
@@ -209,22 +624,22 @@
                      GoLeftIcon="@BitIconInfo.Fa("solid circle-arrow-right")"
                      GoRightIcon="@BitIconInfo.Fa("solid circle-arrow-left")">
             <BitCarouselItem>
-                <img class="image" src="_content/Bit.BlazorUI.Demo.Client.Core/images/carousel/img1.jpg" />
+                <img class="image" alt="Aurora" src="_content/Bit.BlazorUI.Demo.Client.Core/images/carousel/img1.jpg" />
                 <div class="text-title">Aurora</div>
                 <div class="text-description">This is Aurora and it's fantastic</div>
             </BitCarouselItem>
             <BitCarouselItem>
-                <img class="image" src="_content/Bit.BlazorUI.Demo.Client.Core/images/carousel/img2.jpg" />
+                <img class="image" alt="Beautiful mountain" src="_content/Bit.BlazorUI.Demo.Client.Core/images/carousel/img2.jpg" />
                 <div class="text-title">Beautiful Mountain</div>
                 <div class="text-description">This is a Beautiful Mountain and it's gorgeous</div>
             </BitCarouselItem>
             <BitCarouselItem>
-                <img class="image" src="_content/Bit.BlazorUI.Demo.Client.Core/images/carousel/img3.jpg" />
+                <img class="image" alt="Forest in the valley" src="_content/Bit.BlazorUI.Demo.Client.Core/images/carousel/img3.jpg" />
                 <div class="text-title">Forest In The Valley</div>
                 <div class="text-description">This is a Forest In The Valley and it's beautiful</div>
             </BitCarouselItem>
             <BitCarouselItem>
-                <img class="image" src="_content/Bit.BlazorUI.Demo.Client.Core/images/carousel/img4.jpg" />
+                <img class="image" alt="Road among the mountains" src="_content/Bit.BlazorUI.Demo.Client.Core/images/carousel/img4.jpg" />
                 <div class="text-title">Road Among The Mountains</div>
                 <div class="text-description">This is a Road Among The Mountains and it's amazing</div>
             </BitCarouselItem>
@@ -240,30 +655,86 @@
                      GoLeftIcon="@BitIconInfo.Bi("arrow-right-circle")"
                      GoRightIcon="@BitIconInfo.Bi("arrow-left-circle")">
             <BitCarouselItem>
-                <img class="image" src="_content/Bit.BlazorUI.Demo.Client.Core/images/carousel/img1.jpg" />
+                <img class="image" alt="Aurora" src="_content/Bit.BlazorUI.Demo.Client.Core/images/carousel/img1.jpg" />
                 <div class="text-title">Aurora</div>
                 <div class="text-description">This is Aurora and it's fantastic</div>
             </BitCarouselItem>
             <BitCarouselItem>
-                <img class="image" src="_content/Bit.BlazorUI.Demo.Client.Core/images/carousel/img2.jpg" />
+                <img class="image" alt="Beautiful mountain" src="_content/Bit.BlazorUI.Demo.Client.Core/images/carousel/img2.jpg" />
                 <div class="text-title">Beautiful Mountain</div>
                 <div class="text-description">This is a Beautiful Mountain and it's gorgeous</div>
             </BitCarouselItem>
             <BitCarouselItem>
-                <img class="image" src="_content/Bit.BlazorUI.Demo.Client.Core/images/carousel/img3.jpg" />
+                <img class="image" alt="Forest in the valley" src="_content/Bit.BlazorUI.Demo.Client.Core/images/carousel/img3.jpg" />
                 <div class="text-title">Forest In The Valley</div>
                 <div class="text-description">This is a Forest In The Valley and it's beautiful</div>
             </BitCarouselItem>
             <BitCarouselItem>
-                <img class="image" src="_content/Bit.BlazorUI.Demo.Client.Core/images/carousel/img4.jpg" />
+                <img class="image" alt="Road among the mountains" src="_content/Bit.BlazorUI.Demo.Client.Core/images/carousel/img4.jpg" />
                 <div class="text-title">Road Among The Mountains</div>
                 <div class="text-description">This is a Road Among The Mountains and it's amazing</div>
             </BitCarouselItem>
         </BitCarousel>
     </DemoExample>
 
-    <DemoExample Title="RTL" RazorCode="@example8RazorCode" Id="example8">
-        <div>Use BitCarousel in right-to-left (RTL).</div>
+    <DemoExample Title="Size" RazorCode="@example18RazorCode" Id="example18">
+        <div>The Size parameter offers three sizes for the chrome of the carousel: the dots and the navigation buttons.</div>
+        <br />
+        <div class="colors-container">
+            <div>
+                <BitLabel>Small</BitLabel>
+                <BitCarousel Size="BitSize.Small" Style="height: 72px" InfiniteScrolling>
+                    <BitCarouselItem Class="item"><div>1</div></BitCarouselItem>
+                    <BitCarouselItem Class="item"><div>2</div></BitCarouselItem>
+                    <BitCarouselItem Class="item"><div>3</div></BitCarouselItem>
+                </BitCarousel>
+            </div>
+            <div>
+                <BitLabel>Medium</BitLabel>
+                <BitCarousel Size="BitSize.Medium" Style="height: 72px" InfiniteScrolling>
+                    <BitCarouselItem Class="item"><div>1</div></BitCarouselItem>
+                    <BitCarouselItem Class="item"><div>2</div></BitCarouselItem>
+                    <BitCarouselItem Class="item"><div>3</div></BitCarouselItem>
+                </BitCarousel>
+            </div>
+            <div>
+                <BitLabel>Large</BitLabel>
+                <BitCarousel Size="BitSize.Large" Style="height: 72px" InfiniteScrolling>
+                    <BitCarouselItem Class="item"><div>1</div></BitCarouselItem>
+                    <BitCarouselItem Class="item"><div>2</div></BitCarouselItem>
+                    <BitCarouselItem Class="item"><div>3</div></BitCarouselItem>
+                </BitCarousel>
+            </div>
+        </div>
+    </DemoExample>
+
+    <DemoExample Title="Style & Class" RazorCode="@example19RazorCode" Id="example19">
+        <div>
+            Besides the Style and Class parameters of the root element, the Styles and Classes parameters customize every
+            part of the carousel: its container, its items and the ones of them currently on screen (Item and
+            CurrentItem), the navigation buttons and their icons, the dots and the current dot, and the play/pause
+            button and its icon.
+        </div>
+        <br />
+        <div>
+            <BitCarousel Style="height: 100px; border-radius: 0.5rem; overflow: hidden"
+                         InfiniteScrolling
+                         Styles="@(new() { Buttons = "color: white; background-color: rgba(0,0,0,0.35); width: 2.5rem;",
+                                           CurrentDot = "background-color: mediumpurple;" })"
+                         Classes="@(new() { Item = "custom-item" })">
+                <BitCarouselItem><div>1</div></BitCarouselItem>
+                <BitCarouselItem><div>2</div></BitCarouselItem>
+                <BitCarouselItem><div>3</div></BitCarouselItem>
+                <BitCarouselItem><div>4</div></BitCarouselItem>
+            </BitCarousel>
+        </div>
+    </DemoExample>
+
+    <DemoExample Title="RTL" RazorCode="@example20RazorCode" Id="example20">
+        <div>
+            In right-to-left mode the carousel lays its slides out and navigates from right to left, and the roles of the
+            two navigation buttons flip accordingly.
+        </div>
         <br />
         <div>
             <BitCarousel Style="height: 100px" Dir="BitDir.Rtl" VisibleItemsCount="3" ScrollItemsCount="1" InfiniteScrolling>
@@ -279,4 +750,4 @@
             </BitCarousel>
         </div>
     </DemoExample>
-</DemoPage>
\ No newline at end of file
+</DemoPage>
diff --git a/src/BlazorUI/Demo/Client/Bit.BlazorUI.Demo.Client.Core/Pages/Components/Lists/Carousel/BitCarouselDemo.razor.cs b/src/BlazorUI/Demo/Client/Bit.BlazorUI.Demo.Client.Core/Pages/Components/Lists/Carousel/BitCarouselDemo.razor.cs
index a3c9508beab..fcffbc469b0 100644
--- a/src/BlazorUI/Demo/Client/Bit.BlazorUI.Demo.Client.Core/Pages/Components/Lists/Carousel/BitCarouselDemo.razor.cs
+++ b/src/BlazorUI/Demo/Client/Bit.BlazorUI.Demo.Client.Core/Pages/Components/Lists/Carousel/BitCarouselDemo.razor.cs
@@ -4,6 +4,15 @@ public partial class BitCarouselDemo
 {
     private readonly List<ComponentParameter> componentParameters =
     [
+        new()
+        {
+            Name = "Accent",
+            Type = "BitColorKind?",
+            DefaultValue = "null",
+            Description = "Specifies the accent color kind of the component, which colors the dot of the current page. Color takes precedence over it when both are set.",
+            LinkType = LinkType.Link,
+            Href = "#color-kind-enum",
+        },
         new()
         {
             Name = "AnimationDuration",
@@ -26,6 +35,13 @@ public partial class BitCarouselDemo
             Description = "Sets the interval of the auto scrolling in milliseconds (the default value is 2000)."
         },
         new()
+        {
+            Name = "AutoPlayReverse",
+            Type = "bool",
+            DefaultValue = "false",
+            Description = "Plays the auto scrolling backwards, from the last slide towards the first one."
+        },
+        new()
         {
             Name = "ChildContent",
             Type = "RenderFragment?",
@@ -42,6 +58,71 @@ public partial class BitCarouselDemo
             Href = "#class-styles"
         },
         new()
+        {
+            Name = "Color",
+            Type = "BitColor?",
+            DefaultValue = "null",
+            Description = "The general color of the carousel, applied to the dot of the current page and the next/prev and play/pause buttons.",
+            LinkType = LinkType.Link,
+            Href = "#color-enum",
+        },
+        new()
+        {
+            Name = "DefaultPage",
+            Type = "int",
+            DefaultValue = "1",
+            Description = "The page (1 based, like GoTo) the carousel shows when it first renders. Values outside of the range of the carousel are clamped to its first or last page."
+        },
+        new()
+        {
+            Name = "DotAriaLabel",
+            Type = "string",
+            DefaultValue = "Slide",
+            Description = "The accessible label of a dot of the carousel, followed by the number of the page it navigates to."
+        },
+        new()
+        {
+            Name = "DotsAriaLabel",
+            Type = "string",
+            DefaultValue = "Choose slide to display",
+            Description = "The accessible label of the dots container of the carousel."
+        },
+        new()
+        {
+            Name = "DotTemplate",
+            Type = "RenderFragment<int>?",
+            DefaultValue = "null",
+            Description = "The custom content of a dot of the carousel, receiving the zero based index of the page the dot navigates to. A dot that holds content is laid out around it instead of being drawn as the default circle."
+        },
+        new()
+        {
+            Name = "DragThreshold",
+            Type = "int",
+            DefaultValue = "20",
+            Description = "The distance (in pixels) the pointer has to travel over the carousel before it moves to another page."
+        },
+        new()
+        {
+            Name = "Fade",
+            Type = "bool",
+            DefaultValue = "false",
+            Description = "Cross-fades the slides in place instead of sliding them. A fading carousel shows exactly one slide at a time."
+        },
+        new()
+        {
+            Name = "Gap",
+            Type = "string?",
+            DefaultValue = "null",
+            Description = "The space between the slides of the carousel (any CSS length, for example 1rem)."
+        },
+        new()
+        {
+            Name = "GoLeftAriaLabel",
+            Type = "string?",
+            DefaultValue = "null",
+            Description = "The accessible label of the go to left button. When not set, the button is labelled after what it does (next or previous slide, depending on the direction)."
+        },
+        new()
         {
             Name = "GoLeftIcon",
             Type = "BitIconInfo?",
@@ -60,6 +141,13 @@ public partial class BitCarouselDemo
             Href = "https://blazorui.bitplatform.dev/iconography",
         },
         new()
+        {
+            Name = "GoRightAriaLabel",
+            Type = "string?",
+            DefaultValue = "null",
+            Description = "The accessible label of the go to right button. When not set, the button is labelled after what it does (previous or next slide, depending on the direction)."
+        },
+        new()
         {
             Name = "GoRightIcon",
             Type = "BitIconInfo?",
@@ -82,14 +170,14 @@ public partial class BitCarouselDemo
             Name = "HideDots",
             Type = "bool",
             DefaultValue = "false",
-            Description = "Hides the Dots indicator at the bottom of the BitCarousel."
+            Description = "Hides the Dots indicator at the bottom of the BitCarousel. The dots are also left out when everything fits on a single page."
         },
         new()
         {
             Name = "HideNextPrev",
             Type = "bool",
             DefaultValue = "false",
-            Description = "Hides the Next/Prev buttons of the BitCarousel."
+            Description = "Hides the Next/Prev buttons of the BitCarousel. Each button also hides itself at the end it cannot move any further towards, unless InfiniteScrolling is enabled."
         },
         new()
         {
@@ -99,17 +187,141 @@ public partial class BitCarouselDemo
             Description = "If enabled the carousel items will navigate in an infinite loop (first item comes after last item and last item comes before first item)."
         },
         new()
+        {
+            Name = "ItemAriaLabelFormat",
+            Type = "string?",
+            DefaultValue = "null",
+            Description = "The accessible label of a slide of the carousel, as a composite format string whose {0} is the 1 based position of the slide and whose {1} is the number of slides (\"{0} of {1}\" when not set). It is only used for the slides that were not given an AriaLabel of their own."
+        },
+        new()
+        {
+            Name = "NoDrag",
+            Type = "bool",
+            DefaultValue = "false",
+            Description = "Disables dragging the carousel with the pointer."
+        },
+        new()
+        {
+            Name = "NoKeyboard",
+            Type = "bool",
+            DefaultValue = "false",
+            Description = "Removes the carousel from the tab sequence and turns off its keyboard navigation (arrow keys, Home and End)."
+        },
+        new()
         {
             Name = "OnChange",
             Type = "EventCallback<int>",
-            Description = "The event that will be called on carousel page navigation."
+            Description = "The event that will be called on carousel page navigation. The provided value is the zero based index of the page the carousel moved to."
+        },
+        new()
+        {
+            Name = "PauseButtonAriaLabel",
+            Type = "string",
+            DefaultValue = "Stop automatic slide show",
+            Description = "The accessible label of the play/pause button while the auto scrolling is running."
+        },
+        new()
+        {
+            Name = "PauseIcon",
+            Type = "BitIconInfo?",
+            DefaultValue = "null",
+            Description = "The icon of the play/pause button while the auto scrolling is running, using custom CSS classes for external icon libraries. Takes precedence over PauseIconName.",
+            LinkType = LinkType.Link,
+            Href = "#bit-icon-info",
+        },
+        new()
+        {
+            Name = "PauseIconName",
+            Type = "string?",
+            DefaultValue = "null",
+            Description = "The name of the icon of the play/pause button while the auto scrolling is running, from the built-in Fluent UI icons.",
+            LinkType = LinkType.Link,
+            Href = "https://blazorui.bitplatform.dev/iconography",
+        },
+        new()
+        {
+            Name = "PauseOnFocus",
+            Type = "bool",
+            DefaultValue = "true",
+            Description = "Pauses the auto scrolling while the keyboard focus is inside the carousel."
+        },
+        new()
+        {
+            Name = "PauseOnHover",
+            Type = "bool",
+            DefaultValue = "true",
+            Description = "Pauses the auto scrolling while the pointer is over the carousel."
+        },
+        new()
+        {
+            Name = "PlayButtonAriaLabel",
+            Type = "string",
+            DefaultValue = "Start automatic slide show",
+            Description = "The accessible label of the play/pause button while the auto scrolling is paused."
+        },
+        new()
+        {
+            Name = "PlayIcon",
+            Type = "BitIconInfo?",
+            DefaultValue = "null",
+            Description = "The icon of the play/pause button while the auto scrolling is paused, using custom CSS classes for external icon libraries. Takes precedence over PlayIconName.",
+            LinkType = LinkType.Link,
+            Href = "#bit-icon-info",
+        },
+        new()
+        {
+            Name = "PlayIconName",
+            Type = "string?",
+            DefaultValue = "null",
+            Description = "The name of the icon of the play/pause button while the auto scrolling is paused, from the built-in Fluent UI icons.",
+            LinkType = LinkType.Link,
+            Href = "https://blazorui.bitplatform.dev/iconography",
+        },
+        new()
+        {
+            Name = "ResponsiveOptions",
+            Type = "IEnumerable<BitCarouselResponsiveOption>?",
+            DefaultValue = "null",
+            Description = "Adapts VisibleItemsCount and ScrollItemsCount to the width of the carousel. Each option applies while the carousel is no wider than its Breakpoint, and the narrowest matching one wins.",
+            LinkType = LinkType.Link,
+            Href = "#responsive-option",
         },
         new()
         {
             Name = "ScrollItemsCount",
             Type = "int",
             DefaultValue = "1",
-            Description = "Number of items that is going to be changed on navigation."
+            Description = "Number of items that is going to be changed on navigation. It is clamped to VisibleItemsCount, and a non-infinite carousel moves by fewer items near its ends so its first and last pages always stay full. Together with VisibleItemsCount it also decides where the carousel stops, which is what the dots stand for and what OnChange reports."
+        },
+        new()
+        {
+            Name = "ShowPlayPause",
+            Type = "bool",
+            DefaultValue = "false",
+            Description = "Renders a play/pause button next to the dots, so the auto scrolling can be stopped and started again. Only rendered while AutoPlay is enabled."
+        },
+        new()
+        {
+            Name = "Size",
+            Type = "BitSize?",
+            DefaultValue = "null",
+            Description = "The size of the dots and of the next/prev buttons of the carousel.",
+            LinkType = LinkType.Link,
+            Href = "#size-enum",
+        },
+        new()
+        {
+            Name = "StopOnInteraction",
+            Type = "bool",
+            DefaultValue = "false",
+            Description = "Stops the auto scrolling as soon as the carousel is navigated by hand. Once stopped this way the rotation only comes back through Resume or the play/pause button."
+        },
+        new()
+        {
+            Name = "StopOnLastSlide",
+            Type = "bool",
+            DefaultValue = "false",
+            Description = "Stops the auto scrolling on the last page instead of rewinding to the first one. It has no effect while InfiniteScrolling is enabled."
         },
         new()
         {
@@ -121,20 +333,87 @@ public partial class BitCarouselDemo
             Href = "#class-styles"
         },
         new()
+        {
+            Name = "Vertical",
+            Type = "bool",
+            DefaultValue = "false",
+            Description = "Stacks the slides vertically, so the carousel scrolls up and down instead of left and right."
+        },
+        new()
         {
             Name = "VisibleItemsCount",
             Type = "int",
             DefaultValue = "1",
             Description = "Number of items that is visible in the carousel."
+        },
+        new()
+        {
+            Name = "Wheel",
+            Type = "bool",
+            DefaultValue = "false",
+            Description = "Navigates the carousel with the wheel of the mouse (or with a two finger scroll on a trackpad)."
         }
     ];
 
     private readonly List<ComponentSubClass> componentSubClasses =
     [
+        new()
+        {
+            Id = "carousel-item",
+            Title = "BitCarouselItem",
+            Description = "A single slide of the BitCarousel.",
+            Parameters =
+            [
+               new()
+               {
+                   Name = "ChildContent",
+                   Type = "RenderFragment?",
+                   DefaultValue = "null",
+                   Description = "The content of the carousel item (slide)."
+               },
+               new()
+               {
+                   Name = "Index",
+                   Type = "int",
+                   DefaultValue = "0",
+                   Description = "The zero based position of this item among the items of its carousel (read-only, assigned by the carousel)."
+               },
+            ]
+        },
+        new()
+        {
+            Id = "responsive-option",
+            Title = "BitCarouselResponsiveOption",
+            Description = "The layout a BitCarousel takes while it is no wider than a given breakpoint. A member that is left unset keeps the value of the matching parameter of the carousel.",
+            Parameters =
+            [
+               new()
+               {
+                   Name = "Breakpoint",
+                   Type = "double",
+                   DefaultValue = "0",
+                   Description = "The largest width (in pixels) of the carousel this option applies to."
+               },
+               new()
+               {
+                   Name = "VisibleItemsCount",
+                   Type = "int?",
+                   DefaultValue = "null",
+                   Description = "The number of items that is visible in the carousel while this option applies."
+               },
+               new()
+               {
+                   Name = "ScrollItemsCount",
+                   Type = "int?",
+                   DefaultValue = "null",
+                   Description = "The number of items a navigation moves while this option applies."
+               },
+            ]
+        },
         new()
         {
             Id = "class-styles",
-            Title = "BitTimelineClassStyles",
+            Title = "BitCarouselClassStyles",
             Description = "The custom CSS classes and styles of the different parts of the BitCarousel.",
             Parameters =
             [
@@ -153,6 +432,20 @@ public partial class BitCarouselDemo
                    Description = "Custom CSS classes/styles for the container of the BitCarousel."
                },
                new()
+               {
+                   Name = "Item",
+                   Type = "string?",
+                   DefaultValue = "null",
+                   Description = "Custom CSS classes/styles for the items (slides) of the BitCarousel."
+               },
+               new()
+               {
+                   Name = "CurrentItem",
+                   Type = "string?",
+                   DefaultValue = "null",
+                   Description = "Custom CSS classes/styles for the items (slides) of the BitCarousel that are currently on screen."
+               },
+               new()
                {
                    Name = "Buttons",
                    Type = "string?",
@@ -160,6 +453,13 @@ public partial class BitCarouselDemo
                    Description = "Custom CSS classes/styles for the next/prev buttons of the BitCarousel."
                },
                new()
+               {
+                   Name = "ButtonIcons",
+                   Type = "string?",
+                   DefaultValue = "null",
+                   Description = "Custom CSS classes/styles for the icons of the next/prev buttons of the BitCarousel."
+               },
+               new()
                {
                    Name = "GoLeftButton",
                    Type = "string?",
@@ -203,10 +503,24 @@ public partial class BitCarouselDemo
                },
                new()
                {
-                   Name = "CurrectDot",
+                   Name = "CurrentDot",
                    Type = "string?",
                    DefaultValue = "null",
                    Description = "Custom CSS classes/styles for the current dot element of the BitCarousel."
+               },
+               new()
+               {
+                   Name = "PlayPauseButton",
+                   Type = "string?",
+                   DefaultValue = "null",
+                   Description = "Custom CSS classes/styles for the play/pause button of the BitCarousel."
+               },
+               new()
+               {
+                   Name = "PlayPauseButtonIcon",
+                   Type = "string?",
+                   DefaultValue = "null",
+                   Description = "Custom CSS classes/styles for the icon of the play/pause button of the BitCarousel."
                }
             ]
         },
@@ -241,8 +555,93 @@ public partial class BitCarouselDemo
         },
     ];
 
+    private readonly List<ComponentSubEnum> componentSubEnums =
+    [
+        new()
+        {
+            Id = "color-kind-enum",
+            Name = "BitColorKind",
+            Description = "Defines the color kinds available in the bit BlazorUI.",
+            Items =
+            [
+                new() { Name = "Primary", Description = "The primary color kind.", Value = "0" },
+                new() { Name = "Secondary", Description = "The secondary color kind.", Value = "1" },
+                new() { Name = "Tertiary", Description = "The tertiary color kind.", Value = "2" },
+                new() { Name = "Transparent", Description = "The transparent color kind.", Value = "3" },
+            ]
+        },
+        new()
+        {
+            Id = "color-enum",
+            Name = "BitColor",
+            Description = "Defines the general colors available in the bit BlazorUI.",
+            Items =
+            [
+                new() { Name = "Primary", Description = "Primary general color.", Value = "0" },
+                new() { Name = "Secondary", Description = "Secondary general color.", Value = "1" },
+                new() { Name = "Tertiary", Description = "Tertiary general color.", Value = "2" },
+                new() { Name = "Info", Description = "Info general color.", Value = "3" },
+                new() { Name = "Success", Description = "Success general color.", Value = "4" },
+                new() { Name = "Warning", Description = "Warning general color.", Value = "5" },
+                new() { Name = "SevereWarning", Description = "SevereWarning general color.", Value = "6" },
+                new() { Name = "Error", Description = "Error general color.", Value = "7" },
+                new() { Name = "PrimaryBackground", Description = "Primary background color.", Value = "8" },
+                new() { Name = "SecondaryBackground", Description = "Secondary background color.", Value = "9" },
+                new() { Name = "TertiaryBackground", Description = "Tertiary background color.", Value = "10" },
+                new() { Name = "PrimaryForeground", Description = "Primary foreground color.", Value = "11" },
+                new() { Name = "SecondaryForeground", Description = "Secondary foreground color.", Value = "12" },
+                new() { Name = "TertiaryForeground", Description = "Tertiary foreground color.", Value = "13" },
+                new() { Name = "PrimaryBorder", Description = "Primary border color.", Value = "14" },
+                new() { Name = "SecondaryBorder", Description = "Secondary border color.", Value = "15" },
+                new() { Name = "TertiaryBorder", Description = "Tertiary border color.", Value = "16" },
+            ]
+        },
+        new()
+        {
+            Id = "size-enum",
+            Name = "BitSize",
+            Description = "Defines the sizes available in the bit BlazorUI.",
+            Items =
+            [
+                new() { Name = "Small", Description = "The small size.", Value = "0" },
+                new() { Name = "Medium", Description = "The medium size.", Value = "1" },
+                new() { Name = "Large", Description = "The large size.", Value = "2" },
+            ]
+        },
+    ];
+
     private readonly List<ComponentParameter> componentPublicMembers =
     [
+        new()
+        {
+            Name = "CurrentPage",
+            Type = "int",
+            Description = "The zero based index of the page the carousel is currently showing.",
+        },
+        new()
+        {
+            Name = "ItemsCount",
+            Type = "int",
+            Description = "The number of items (slides) of the carousel.",
+        },
+        new()
+        {
+            Name = "PagesCount",
+            Type = "int",
+            Description = "The number of pages of the carousel.",
+        },
+        new()
+        {
+            Name = "IsPlaying",
+            Type = "bool",
+            Description = "Whether the auto scrolling is currently running.",
+        },
+        new()
+        {
+            Name = "IsPaused",
+            Type = "bool",
+            Description = "Whether the auto scrolling has been paused through Pause or the play/pause button.",
+        },
         new()
         {
             Name = "GoNext",
@@ -259,25 +658,38 @@ public partial class BitCarouselDemo
         {
             Name = "GoTo",
             Type = "Task",
-            Description = "Navigates to the given carousel item number.",
+            Description = "Navigates to the given carousel page number (1 based).",
         },
         new()
         {
             Name = "Pause",
-            Type = "Task",
+            Type = "void",
             Description = "Pauses the AutoPlay if enabled.",
         },
         new()
         {
             Name = "Resume",
-            Type = "Task",
+            Type = "void",
             Description = "Resumes the AutoPlay if enabled.",
+        },
+        new()
+        {
+            Name = "TogglePlay",
+            Type = "void",
+            Description = "Pauses the AutoPlay when it is running, and resumes it when it is paused.",
+        },
+        new()
+        {
+            Name = "Refresh",
+            Type = "Task",
+            Description = "Measures the carousel again and lays its slides out accordingly.",
         }
     ];
 
 
 
     private int number = 1;
+    private int currentPage;
     private BitCarousel carousel = default!;
 
     private async Task GoNext()
@@ -294,386 +706,4 @@ private async Task GoTo()
     {
         await carousel.GoTo(number);
     }
-
-
-
-    private readonly string example1RazorCode = @"
-<style>
-    .number {
-        position: absolute;
-        top: 0.75rem;
-        padding: 0.75rem;
-        font-size: 0.75rem;
-        color: #D7D7D7;
-    }
-
-    .image {
-        width: 100%;
-        height: 100%;
-    }
-</style>
-
-<BitCarousel>
-    <BitCarouselItem>
-        <div class=""numbertext"">1 / 4</div>
-        <img class=""image"" src=""img1.jpg"">
-    </BitCarouselItem>
-    <BitCarouselItem>
-        <div class=""numbertext"">2 / 4</div>
-        <img class=""image"" src=""img2.jpg"" />
-    </BitCarouselItem>
-    <BitCarouselItem>
-        <div class=""numbertext"">3 / 4</div>
-        <img class=""image"" src=""img3.jpg"" />
-    </BitCarouselItem>
-    <BitCarouselItem>
-        <div class=""numbertext"">4 / 4</div>
-        <img class=""image"" src=""img4.jpg"" />
-    </BitCarouselItem>
-</BitCarousel>";
-
-    private readonly string example2RazorCode = @"
-<style>
-    .image {
-        width: 100%;
-        height: 100%;
-    }
-
-    .text-title {
-        position: absolute;
-        bottom: 3.4375rem;
-        width: 100%;
-        font-size: 0.9375rem;
-        text-align: center;
-        color: #FFFFFF;
-    }
-
-    .text-description {
-        position: absolute;
-        bottom: 1.875rem;
-        width: 100%;
-        font-size: 0.6875rem;
-        text-align: center;
-        color: #FFFFFF;
-    }
-</style>
-
-<BitCarousel InfiniteScrolling>
-    <BitCarouselItem>
-        <img class=""image"" src=""img1.jpg"" />
-        <div class=""text-title"">Aurora</div>
-        <div class=""text-description"">This is Aurora and it's fantastic</div>
-    </BitCarouselItem>
-    <BitCarouselItem>
-        <img class=""image"" src=""img2.jpg"" />
-        <div class=""text-title"">Beautiful Mountain</div>
-        <div class=""text-description"">This is a Beautiful Mountain and it's gorgeous</div>
-    </BitCarouselItem>
-    <BitCarouselItem>
-        <img class=""image"" src=""img3.jpg"" />
-        <div class=""text-title"">Forest In The Valley</div>
-        <div class=""text-description"">This is a Forest In The Valley and it's beautiful</div>
-    </BitCarouselItem>
-    <BitCarouselItem>
-        <img class=""image"" src=""img4.jpg"" />
-        <div class=""text-title"">Road Among The Mountains</div>
-        <div class=""text-description"">This is a Road Among The Mountains and it's amazing</div>
-    </BitCarouselItem>
-</BitCarousel>";
-
-    private readonly string example3RazorCode = @"
-<style>
-    .image {
-        width: 100%;
-        height: 100%;
-    }
-
-    .text-title {
-        position: absolute;
-        bottom: 3.4375rem;
-        width: 100%;
-        font-size: 0.9375rem;
-        text-align: center;
-        color: #FFFFFF;
-    }
-
-    .text-description {
-        position: absolute;
-        bottom: 1.875rem;
-        width: 100%;
-        font-size: 0.6875rem;
-        text-align: center;
-        color: #FFFFFF;
-    }
-</style>
-
-<BitCarousel HideDots>
-    <BitCarouselItem>
-        <div class=""numbertext"">1 / 4</div>
-        <img class=""image"" src=""img1.jpg"" />
-        <div class=""text-title"">Aurora</div>
-        <div class=""text-description"">This is Aurora and it's fantastic</div>
-    </BitCarouselItem>
-    <BitCarouselItem>
-        <div class=""numbertext"">2 / 4</div>
-        <img class=""image"" src=""img2.jpg"" />
-        <div class=""text-title"">Beautiful Mountain</div>
-        <div class=""text-description"">This is a Beautiful Mountain and it's gorgeous</div>
-    </BitCarouselItem>
-    <BitCarouselItem>
-        <div class=""numbertext"">3 / 4</div>
-        <img class=""image"" src=""img3.jpg"" />
-        <div class=""text-title"">Forest In The Valley</div>
-        <div class=""text-description"">This is a Forest In The Valley and it's beautiful</div>
-    </BitCarouselItem>
-    <BitCarouselItem>
-        <div class=""numbertext"">4 / 4</div>
-        <img class=""image"" src=""img4.jpg"" />
-        <div class=""text-title"">Road Among The Mountains</div>
-        <div class=""text-description"">This is a Road Among The Mountains and it's amazing</div>
-    </BitCarouselItem>
-</BitCarousel>";
-
-    private readonly string example4RazorCode = @"
-<style>
-    .image {
-        width: 100%;
-        height: 100%;
-    }
-
-    .text-title {
-        position: absolute;
-        bottom: 3.4375rem;
-        width: 100%;
-        font-size: 0.9375rem;
-        text-align: center;
-        color: #FFFFFF;
-    }
-
-    .text-description {
-        position: absolute;
-        bottom: 1.875rem;
-        width: 100%;
-        font-size: 0.6875rem;
-        text-align: center;
-        color: #FFFFFF;
-    }
-</style>
-
-<BitCarousel HideNextPrev @ref=""carousel"">
-    <BitCarouselItem>
-        <div class=""numbertext"">1 / 4</div>
-        <img class=""image"" src=""img1.jpg"" />
-        <div class=""text-title"">Aurora</div>
-        <div class=""text-description"">This is Aurora and it's fantastic</div>
-    </BitCarouselItem>
-    <BitCarouselItem>
-        <div class=""numbertext"">2 / 4</div>
-        <img class=""image"" src=""img2.jpg"" />
-        <div class=""text-title"">Beautiful Mountain</div>
-        <div class=""text-description"">This is a Beautiful Mountain and it's gorgeous</div>
-    </BitCarouselItem>
-    <BitCarouselItem>
-        <div class=""numbertext"">3 / 4</div>
-        <img class=""image"" src=""img3.jpg"" />
-        <div class=""text-title"">Forest In The Valley</div>
-        <div class=""text-description"">This is a Forest In The Valley and it's beautiful</div>
-    </BitCarouselItem>
-    <BitCarouselItem>
-        <div class=""numbertext"">4 / 4</div>
-        <img class=""image"" src=""img4.jpg"" />
-        <div class=""text-title"">Road Among The Mountains</div>
-        <div class=""text-description"">This is a Road Among The Mountains and it's amazing</div>
-    </BitCarouselItem>
-</BitCarousel>
-
-<BitButton OnClick=""GoPrev"">&lt; Prev</BitButton>
-<BitButton OnClick=""GoNext"">Next &gt;</BitButton>
-
-<BitButton OnClick=""GoTo"">GoTo</BitButton>
-<BitNumberField @bind-Value=""number"" Min=""1"" Max=""4"" Mode=""BitSpinButtonMode.Compact"" />";
-    private readonly string example4CsharpCode = @"
-private int number = 1;
-private BitCarousel carousel;
-
-private async Task GoNext()
-{
-    await carousel.GoNext();
-}
-
-private async Task GoPrev()
-{
-    await carousel.GoPrev();
-}
-
-private async Task GoTo()
-{
-    await carousel.GoTo(number);
-}";
-
-    private readonly string example5RazorCode = @"
-<style>
-    .image {
-        width: 100%;
-        height: 100%;
-    }
-
-    .text-title {
-        position: absolute;
-        bottom: 3.4375rem;
-        width: 100%;
-        font-size: 0.9375rem;
-        text-align: center;
-        color: #FFFFFF;
-    }
-
-    .text-description {
-        position: absolute;
-        bottom: 1.875rem;
-        width: 100%;
-        font-size: 0.6875rem;
-        text-align: center;
-        color: #FFFFFF;
-    }
-</style>
-
-<BitCarousel HideNextPrev InfiniteScrolling AutoPlay AutoPlayInterval=""2500"">
-    <BitCarouselItem>
-        <div class=""numbertext"">1 / 4</div>
-        <img class=""image"" src=""img1.jpg"" />
-        <div class=""text-title"">Aurora</div>
-        <div class=""text-description"">This is Aurora and it's fantastic</div>
-    </BitCarouselItem>
-    <BitCarouselItem>
-        <div class=""numbertext"">2 / 4</div>
-        <img class=""image"" src=""img2.jpg"" />
-        <div class=""text-title"">Beautiful Mountain</div>
-        <div class=""text-description"">This is a Beautiful Mountain and it's gorgeous</div>
-    </BitCarouselItem>
-    <BitCarouselItem>
-        <div class=""numbertext"">3 / 4</div>
-        <img class=""image"" src=""img3.jpg"" />
-        <div class=""text-title"">Forest In The Valley</div>
-        <div class=""text-description"">This is a Forest In The Valley and it's beautiful</div>
-    </BitCarouselItem>
-    <BitCarouselItem>
-        <div class=""numbertext"">4 / 4</div>
-        <img class=""image"" src=""img4.jpg"" />
-        <div class=""text-title"">Road Among The Mountains</div>
-        <div class=""text-description"">This is a Road Among The Mountains and it's amazing</div>
-    </BitCarouselItem>
-</BitCarousel>";
-
-    private readonly string example6RazorCode = @"
-<style>
-    .item {
-        text-align: center;
-        color: black;
-        border: 1px solid blue;
-        background-color: lightblue;
-    }
-
-    .item div {
-        transform: translate(0, 80%);
-    }
-</style>
-
-<div>
-    <BitCarousel Style=""height: 100px"" VisibleItemsCount=""3"" ScrollItemsCount=""3"">
-        <BitCarouselItem Class=""item""><div>1</div></BitCarouselItem>
-        <BitCarouselItem Class=""item""><div>2</div></BitCarouselItem>
-        <BitCarouselItem Class=""item""><div>3</div></BitCarouselItem>
-        <BitCarouselItem Class=""item""><div>4</div></BitCarouselItem>
-        <BitCarouselItem Class=""item""><div>5</div></BitCarouselItem>
-        <BitCarouselItem Class=""item""><div>6</div></BitCarouselItem>
-        <BitCarouselItem Class=""item""><div>7</div></BitCarouselItem>
-        <BitCarouselItem Class=""item""><div>8</div></BitCarouselItem>
-        <BitCarouselItem Class=""item""><div>9</div></BitCarouselItem>
-    </BitCarousel>
-</div>";
-
-    private readonly string example7RazorCode = @"
-<link rel=""stylesheet"" href=""https://cdnjs.cloudflare.com/ajax/libs/font-awesome/7.0.1/css/all.min.css"" />
-
-<div>FontAwesome (circle-arrow icons):</div>
-<BitCarousel InfiniteScrolling
-             GoLeftIcon=""@BitIconInfo.Fa(""solid circle-arrow-right"")""
-             GoRightIcon=""@BitIconInfo.Fa(""solid circle-arrow-left"")"">
-    <BitCarouselItem>
-        <img class=""image"" src=""_content/Bit.BlazorUI.Demo.Client.Core/images/carousel/img1.jpg"" />
-        <div class=""text-title"">Aurora</div>
-        <div class=""text-description"">This is Aurora and it's fantastic</div>
-    </BitCarouselItem>
-    <BitCarouselItem>
-        <img class=""image"" src=""_content/Bit.BlazorUI.Demo.Client.Core/images/carousel/img2.jpg"" />
-        <div class=""text-title"">Beautiful Mountain</div>
-        <div class=""text-description"">This is a Beautiful Mountain and it's gorgeous</div>
-    </BitCarouselItem>
-    <BitCarouselItem>
-        <img class=""image"" src=""_content/Bit.BlazorUI.Demo.Client.Core/images/carousel/img3.jpg"" />
-        <div class=""text-title"">Forest In The Valley</div>
-        <div class=""text-description"">This is a Forest In The Valley and it's beautiful</div>
-    </BitCarouselItem>
-    <BitCarouselItem>
-        <img class=""image"" src=""_content/Bit.BlazorUI.Demo.Client.Core/images/carousel/img4.jpg"" />
-        <div class=""text-title"">Road Among The Mountains</div>
-        <div class=""text-description"">This is a Road Among The Mountains and it's amazing</div>
-    </BitCarouselItem>
-</BitCarousel>
-
-<link rel=""stylesheet"" href=""https://cdn.jsdelivr.net/npm/bootstrap-icons@1.11.3/font/bootstrap-icons.min.css"" />
-
-<div>Bootstrap Icons (arrow-left-circle / arrow-right-circle):</div>
-<BitCarousel InfiniteScrolling
-             GoLeftIcon=""@BitIconInfo.Bi(""arrow-right-circle"")""
-             GoRightIcon=""@BitIconInfo.Bi(""arrow-left-circle"")"">
-    <BitCarouselItem>
-        <img class=""image"" src=""_content/Bit.BlazorUI.Demo.Client.Core/images/carousel/img1.jpg"" />
-        <div class=""text-title"">Aurora</div>
-        <div class=""text-description"">This is Aurora and it's fantastic</div>
-    </BitCarouselItem>
-    <BitCarouselItem>
-        <img class=""image"" src=""_content/Bit.BlazorUI.Demo.Client.Core/images/carousel/img2.jpg"" />
-        <div class=""text-title"">Beautiful Mountain</div>
-        <div class=""text-description"">This is a Beautiful Mountain and it's gorgeous</div>
-    </BitCarouselItem>
-    <BitCarouselItem>
-        <img class=""image"" src=""_content/Bit.BlazorUI.Demo.Client.Core/images/carousel/img3.jpg"" />
-        <div class=""text-title"">Forest In The Valley</div>
-        <div class=""text-description"">This is a Forest In The Valley and it's beautiful</div>
-    </BitCarouselItem>
-    <BitCarouselItem>
-        <img class=""image"" src=""_content/Bit.BlazorUI.Demo.Client.Core/images/carousel/img4.jpg"" />
-        <div class=""text-title"">Road Among The Mountains</div>
-        <div class=""text-description"">This is a Road Among The Mountains and it's amazing</div>
-    </BitCarouselItem>
-</BitCarousel>";
-
-    private readonly string example8RazorCode = @"
-<style>
-    .item {
-        text-align: center;
-        color: black;
-        border: 1px solid blue;
-        background-color: lightblue;
-    }
-
-    .item div {
-        transform: translate(0, 80%);
-    }
-</style>
-
-<div>
-    <BitCarousel Style=""height: 100px"" Dir=""BitDir.Rtl"" VisibleItemsCount=""3"" ScrollItemsCount=""1"" InfiniteScrolling>
-        <BitCarouselItem Class=""item""><div>یک</div></BitCarouselItem>
-        <BitCarouselItem Class=""item""><div>دو</div></BitCarouselItem>
-        <BitCarouselItem Class=""item""><div>سه</div></BitCarouselItem>
-        <BitCarouselItem Class=""item""><div>چهار</div></BitCarouselItem>
-        <BitCarouselItem Class=""item""><div>پنج</div></BitCarouselItem>
-        <BitCarouselItem Class=""item""><div>شیش</div></BitCarouselItem>
-        <BitCarouselItem Class=""item""><div>هفت</div></BitCarouselItem>
-        <BitCarouselItem Class=""item""><div>هشت</div></BitCarouselItem>
-        <BitCarouselItem Class=""item""><div>نه</div></BitCarouselItem>
-    </BitCarousel>
-</div>";
 }
diff --git a/src/BlazorUI/Demo/Client/Bit.BlazorUI.Demo.Client.Core/Pages/Components/Lists/Carousel/BitCarouselDemo.razor.samples.cs b/src/BlazorUI/Demo/Client/Bit.BlazorUI.Demo.Client.Core/Pages/Components/Lists/Carousel/BitCarouselDemo.razor.samples.cs
new file mode 100644
index 00000000000..0bb9fb63b7f
--- /dev/null
+++ b/src/BlazorUI/Demo/Client/Bit.BlazorUI.Demo.Client.Core/Pages/Components/Lists/Carousel/BitCarouselDemo.razor.samples.cs
@@ -0,0 +1,617 @@
+namespace Bit.BlazorUI.Demo.Client.Core.Pages.Components.Lists.Carousel;
+
+public partial class BitCarouselDemo
+{
+    private readonly string example1RazorCode = @"
+<style>
+    .number {
+        position: absolute;
+        top: 0.75rem;
+        padding: 0.75rem;
+        font-size: 0.75rem;
+        color: #D7D7D7;
+    }
+
+    .image {
+        width: 100%;
+        height: 100%;
+    }
+</style>
+
+<BitCarousel AriaLabel=""Landscape photos"">
+    <BitCarouselItem>
+        <div class=""number"">1 / 4</div>
+        <img class=""image"" alt=""Aurora"" src=""img1.jpg"">
+    </BitCarouselItem>
+    <BitCarouselItem>
+        <div class=""number"">2 / 4</div>
+        <img class=""image"" alt=""Beautiful mountain"" src=""img2.jpg"" />
+    </BitCarouselItem>
+    <BitCarouselItem>
+        <div class=""number"">3 / 4</div>
+        <img class=""image"" alt=""Forest in the valley"" src=""img3.jpg"" />
+    </BitCarouselItem>
+    <BitCarouselItem>
+        <div class=""number"">4 / 4</div>
+        <img class=""image"" alt=""Road among the mountains"" src=""img4.jpg"" />
+    </BitCarouselItem>
+</BitCarousel>";
+
+    private readonly string example2RazorCode = @"
+<style>
+    .image {
+        width: 100%;
+        height: 100%;
+    }
+
+    .text-title {
+        position: absolute;
+        bottom: 3.4375rem;
+        width: 100%;
+        font-size: 0.9375rem;
+        text-align: center;
+        color: #FFFFFF;
+    }
+
+    .text-description {
+        position: absolute;
+        bottom: 1.875rem;
+        width: 100%;
+        font-size: 0.6875rem;
+        text-align: center;
+        color: #FFFFFF;
+    }
+</style>
+
+<BitCarousel InfiniteScrolling>
+    <BitCarouselItem>
+        <img class=""image"" alt=""Aurora"" src=""img1.jpg"" />
+        <div class=""text-title"">Aurora</div>
+        <div class=""text-description"">This is Aurora and it's fantastic</div>
+    </BitCarouselItem>
+    <BitCarouselItem>
+        <img class=""image"" alt=""Beautiful mountain"" src=""img2.jpg"" />
+        <div class=""text-title"">Beautiful Mountain</div>
+        <div class=""text-description"">This is a Beautiful Mountain and it's gorgeous</div>
+    </BitCarouselItem>
+    <BitCarouselItem>
+        <img class=""image"" alt=""Forest in the valley"" src=""img3.jpg"" />
+        <div class=""text-title"">Forest In The Valley</div>
+        <div class=""text-description"">This is a Forest In The Valley and it's beautiful</div>
+    </BitCarouselItem>
+    <BitCarouselItem>
+        <img class=""image"" alt=""Road among the mountains"" src=""img4.jpg"" />
+        <div class=""text-title"">Road Among The Mountains</div>
+        <div class=""text-description"">This is a Road Among The Mountains and it's amazing</div>
+    </BitCarouselItem>
+</BitCarousel>";
+
+    private readonly string example3RazorCode = @"
+<BitCarousel HideDots>
+    <BitCarouselItem>
+        <div class=""number"">1 / 4</div>
+        <img class=""image"" alt=""Aurora"" src=""img1.jpg"" />
+        <div class=""text-title"">Aurora</div>
+        <div class=""text-description"">This is Aurora and it's fantastic</div>
+    </BitCarouselItem>
+    <BitCarouselItem>
+        <div class=""number"">2 / 4</div>
+        <img class=""image"" alt=""Beautiful mountain"" src=""img2.jpg"" />
+        <div class=""text-title"">Beautiful Mountain</div>
+        <div class=""text-description"">This is a Beautiful Mountain and it's gorgeous</div>
+    </BitCarouselItem>
+    <BitCarouselItem>
+        <div class=""number"">3 / 4</div>
+        <img class=""image"" alt=""Forest in the valley"" src=""img3.jpg"" />
+        <div class=""text-title"">Forest In The Valley</div>
+        <div class=""text-description"">This is a Forest In The Valley and it's beautiful</div>
+    </BitCarouselItem>
+    <BitCarouselItem>
+        <div class=""number"">4 / 4</div>
+        <img class=""image"" alt=""Road among the mountains"" src=""img4.jpg"" />
+        <div class=""text-title"">Road Among The Mountains</div>
+        <div class=""text-description"">This is a Road Among The Mountains and it's amazing</div>
+    </BitCarouselItem>
+</BitCarousel>";
+
+    private readonly string example4RazorCode = @"
+<BitCarousel HideNextPrev @ref=""carousel"" OnChange=""v => currentPage = v"">
+    <BitCarouselItem>
+        <div class=""number"">1 / 4</div>
+        <img class=""image"" alt=""Aurora"" src=""img1.jpg"" />
+        <div class=""text-title"">Aurora</div>
+        <div class=""text-description"">This is Aurora and it's fantastic</div>
+    </BitCarouselItem>
+    <BitCarouselItem>
+        <div class=""number"">2 / 4</div>
+        <img class=""image"" alt=""Beautiful mountain"" src=""img2.jpg"" />
+        <div class=""text-title"">Beautiful Mountain</div>
+        <div class=""text-description"">This is a Beautiful Mountain and it's gorgeous</div>
+    </BitCarouselItem>
+    <BitCarouselItem>
+        <div class=""number"">3 / 4</div>
+        <img class=""image"" alt=""Forest in the valley"" src=""img3.jpg"" />
+        <div class=""text-title"">Forest In The Valley</div>
+        <div class=""text-description"">This is a Forest In The Valley and it's beautiful</div>
+    </BitCarouselItem>
+    <BitCarouselItem>
+        <div class=""number"">4 / 4</div>
+        <img class=""image"" alt=""Road among the mountains"" src=""img4.jpg"" />
+        <div class=""text-title"">Road Among The Mountains</div>
+        <div class=""text-description"">This is a Road Among The Mountains and it's amazing</div>
+    </BitCarouselItem>
+</BitCarousel>
+
+<BitButton OnClick=""GoPrev"">&lt; Prev</BitButton>
+<BitButton OnClick=""GoNext"">Next &gt;</BitButton>
+
+<BitButton OnClick=""GoTo"">GoTo</BitButton>
+<BitNumberField @bind-Value=""number"" Min=""1"" Max=""4"" Mode=""BitSpinButtonMode.Compact"" />
+
+<div>Current page: @currentPage</div>";
+    private readonly string example4CsharpCode = @"
+private int number = 1;
+private int currentPage;
+private BitCarousel carousel = default!;
+
+private async Task GoNext()
+{
+    await carousel.GoNext();
+}
+
+private async Task GoPrev()
+{
+    await carousel.GoPrev();
+}
+
+private async Task GoTo()
+{
+    await carousel.GoTo(number);
+}";
+
+    private readonly string example5RazorCode = @"
+<BitCarousel HideNextPrev InfiniteScrolling AutoPlay AutoPlayInterval=""2500"">
+    <BitCarouselItem>
+        <div class=""number"">1 / 4</div>
+        <img class=""image"" alt=""Aurora"" src=""img1.jpg"" />
+        <div class=""text-title"">Aurora</div>
+        <div class=""text-description"">This is Aurora and it's fantastic</div>
+    </BitCarouselItem>
+    <BitCarouselItem>
+        <div class=""number"">2 / 4</div>
+        <img class=""image"" alt=""Beautiful mountain"" src=""img2.jpg"" />
+        <div class=""text-title"">Beautiful Mountain</div>
+        <div class=""text-description"">This is a Beautiful Mountain and it's gorgeous</div>
+    </BitCarouselItem>
+    <BitCarouselItem>
+        <div class=""number"">3 / 4</div>
+        <img class=""image"" alt=""Forest in the valley"" src=""img3.jpg"" />
+        <div class=""text-title"">Forest In The Valley</div>
+        <div class=""text-description"">This is a Forest In The Valley and it's beautiful</div>
+    </BitCarouselItem>
+    <BitCarouselItem>
+        <div class=""number"">4 / 4</div>
+        <img class=""image"" alt=""Road among the mountains"" src=""img4.jpg"" />
+        <div class=""text-title"">Road Among The Mountains</div>
+        <div class=""text-description"">This is a Road Among The Mountains and it's amazing</div>
+    </BitCarouselItem>
+</BitCarousel>
+
+<BitCarousel InfiniteScrolling AutoPlay AutoPlayInterval=""2000"" ShowPlayPause StopOnInteraction>
+    <BitCarouselItem>
+        <div class=""number"">1 / 4</div>
+        <img class=""image"" alt=""Aurora"" src=""img1.jpg"" />
+    </BitCarouselItem>
+    <BitCarouselItem>
+        <div class=""number"">2 / 4</div>
+        <img class=""image"" alt=""Beautiful mountain"" src=""img2.jpg"" />
+    </BitCarouselItem>
+    <BitCarouselItem>
+        <div class=""number"">3 / 4</div>
+        <img class=""image"" alt=""Forest in the valley"" src=""img3.jpg"" />
+    </BitCarouselItem>
+    <BitCarouselItem>
+        <div class=""number"">4 / 4</div>
+        <img class=""image"" alt=""Road among the mountains"" src=""img4.jpg"" />
+    </BitCarouselItem>
+</BitCarousel>
+
+<BitCarousel AutoPlay AutoPlayReverse InfiniteScrolling HideNextPrev Style=""height: 100px"">
+    <BitCarouselItem Class=""item""><div>1</div></BitCarouselItem>
+    <BitCarouselItem Class=""item""><div>2</div></BitCarouselItem>
+    <BitCarouselItem Class=""item""><div>3</div></BitCarouselItem>
+    <BitCarouselItem Class=""item""><div>4</div></BitCarouselItem>
+</BitCarousel>
+
+<BitCarousel AutoPlay StopOnLastSlide HideNextPrev Style=""height: 100px"">
+    <BitCarouselItem Class=""item""><div>1</div></BitCarouselItem>
+    <BitCarouselItem Class=""item""><div>2</div></BitCarouselItem>
+    <BitCarouselItem Class=""item""><div>3</div></BitCarouselItem>
+    <BitCarouselItem Class=""item""><div>4</div></BitCarouselItem>
+</BitCarousel>";
+
+    private readonly string example6RazorCode = @"
+<style>
+    .item {
+        text-align: center;
+        color: black;
+        border: 1px solid blue;
+        background-color: lightblue;
+    }
+
+    .item div {
+        transform: translate(0, 80%);
+    }
+</style>
+
+<BitCarousel Style=""height: 100px"" VisibleItemsCount=""3"" ScrollItemsCount=""3"">
+    <BitCarouselItem Class=""item""><div>1</div></BitCarouselItem>
+    <BitCarouselItem Class=""item""><div>2</div></BitCarouselItem>
+    <BitCarouselItem Class=""item""><div>3</div></BitCarouselItem>
+    <BitCarouselItem Class=""item""><div>4</div></BitCarouselItem>
+    <BitCarouselItem Class=""item""><div>5</div></BitCarouselItem>
+    <BitCarouselItem Class=""item""><div>6</div></BitCarouselItem>
+    <BitCarouselItem Class=""item""><div>7</div></BitCarouselItem>
+    <BitCarouselItem Class=""item""><div>8</div></BitCarouselItem>
+    <BitCarouselItem Class=""item""><div>9</div></BitCarouselItem>
+</BitCarousel>
+
+<BitCarousel Style=""height: 100px"" VisibleItemsCount=""3"" ScrollItemsCount=""1"">
+    <BitCarouselItem Class=""item""><div>1</div></BitCarouselItem>
+    <BitCarouselItem Class=""item""><div>2</div></BitCarouselItem>
+    <BitCarouselItem Class=""item""><div>3</div></BitCarouselItem>
+    <BitCarouselItem Class=""item""><div>4</div></BitCarouselItem>
+    <BitCarouselItem Class=""item""><div>5</div></BitCarouselItem>
+    <BitCarouselItem Class=""item""><div>6</div></BitCarouselItem>
+    <BitCarouselItem Class=""item""><div>7</div></BitCarouselItem>
+    <BitCarouselItem Class=""item""><div>8</div></BitCarouselItem>
+    <BitCarouselItem Class=""item""><div>9</div></BitCarouselItem>
+</BitCarousel>";
+
+    private readonly string example7RazorCode = @"
+<style>
+    .gap-item {
+        height: 100%;
+        box-sizing: border-box;
+    }
+</style>
+
+<BitCarousel Style=""height: 100px"" VisibleItemsCount=""3"" ScrollItemsCount=""1"" Gap=""1rem"" InfiniteScrolling>
+    <BitCarouselItem><div class=""item gap-item"">1</div></BitCarouselItem>
+    <BitCarouselItem><div class=""item gap-item"">2</div></BitCarouselItem>
+    <BitCarouselItem><div class=""item gap-item"">3</div></BitCarouselItem>
+    <BitCarouselItem><div class=""item gap-item"">4</div></BitCarouselItem>
+    <BitCarouselItem><div class=""item gap-item"">5</div></BitCarouselItem>
+    <BitCarouselItem><div class=""item gap-item"">6</div></BitCarouselItem>
+</BitCarousel>";
+
+    private readonly string example8RazorCode = @"
+<BitCarousel Vertical Style=""height: 200px"" InfiniteScrolling>
+    <BitCarouselItem>
+        <div class=""number"">1 / 4</div>
+        <img class=""image"" alt=""Aurora"" src=""img1.jpg"" />
+    </BitCarouselItem>
+    <BitCarouselItem>
+        <div class=""number"">2 / 4</div>
+        <img class=""image"" alt=""Beautiful mountain"" src=""img2.jpg"" />
+    </BitCarouselItem>
+    <BitCarouselItem>
+        <div class=""number"">3 / 4</div>
+        <img class=""image"" alt=""Forest in the valley"" src=""img3.jpg"" />
+    </BitCarouselItem>
+    <BitCarouselItem>
+        <div class=""number"">4 / 4</div>
+        <img class=""image"" alt=""Road among the mountains"" src=""img4.jpg"" />
+    </BitCarouselItem>
+</BitCarousel>";
+
+    private readonly string example9RazorCode = @"
+<BitCarousel Fade InfiniteScrolling>
+    <BitCarouselItem>
+        <div class=""number"">1 / 4</div>
+        <img class=""image"" alt=""Aurora"" src=""img1.jpg"" />
+    </BitCarouselItem>
+    <BitCarouselItem>
+        <div class=""number"">2 / 4</div>
+        <img class=""image"" alt=""Beautiful mountain"" src=""img2.jpg"" />
+    </BitCarouselItem>
+    <BitCarouselItem>
+        <div class=""number"">3 / 4</div>
+        <img class=""image"" alt=""Forest in the valley"" src=""img3.jpg"" />
+    </BitCarouselItem>
+    <BitCarouselItem>
+        <div class=""number"">4 / 4</div>
+        <img class=""image"" alt=""Road among the mountains"" src=""img4.jpg"" />
+    </BitCarouselItem>
+</BitCarousel>";
+
+    private readonly string example10RazorCode = @"
+<BitCarousel Wheel NoDrag InfiniteScrolling Style=""height: 100px"" VisibleItemsCount=""3"" ScrollItemsCount=""1"">
+    <BitCarouselItem Class=""item""><div>1</div></BitCarouselItem>
+    <BitCarouselItem Class=""item""><div>2</div></BitCarouselItem>
+    <BitCarouselItem Class=""item""><div>3</div></BitCarouselItem>
+    <BitCarouselItem Class=""item""><div>4</div></BitCarouselItem>
+    <BitCarouselItem Class=""item""><div>5</div></BitCarouselItem>
+    <BitCarouselItem Class=""item""><div>6</div></BitCarouselItem>
+</BitCarousel>";
+
+    private readonly string example11RazorCode = @"
+<style>
+    .item {
+        text-align: center;
+        color: black;
+        border: 1px solid blue;
+        background-color: lightblue;
+    }
+
+    .item div {
+        transform: translate(0, 80%);
+    }
+</style>
+
+<BitCarousel Style=""height: 100px"" AnimationDuration=""1.5"" InfiniteScrolling>
+    <BitCarouselItem Class=""item""><div>1</div></BitCarouselItem>
+    <BitCarouselItem Class=""item""><div>2</div></BitCarouselItem>
+    <BitCarouselItem Class=""item""><div>3</div></BitCarouselItem>
+    <BitCarouselItem Class=""item""><div>4</div></BitCarouselItem>
+</BitCarousel>
+
+<BitCarousel Style=""height: 100px"" AnimationDuration=""0"" InfiniteScrolling>
+    <BitCarouselItem Class=""item""><div>1</div></BitCarouselItem>
+    <BitCarouselItem Class=""item""><div>2</div></BitCarouselItem>
+    <BitCarouselItem Class=""item""><div>3</div></BitCarouselItem>
+    <BitCarouselItem Class=""item""><div>4</div></BitCarouselItem>
+</BitCarousel>";
+
+    private readonly string example12RazorCode = @"
+<BitCarousel Style=""height: 100px"" DefaultPage=""3"">
+    <BitCarouselItem Class=""item""><div>1</div></BitCarouselItem>
+    <BitCarouselItem Class=""item""><div>2</div></BitCarouselItem>
+    <BitCarouselItem Class=""item""><div>3</div></BitCarouselItem>
+    <BitCarouselItem Class=""item""><div>4</div></BitCarouselItem>
+    <BitCarouselItem Class=""item""><div>5</div></BitCarouselItem>
+</BitCarousel>";
+
+    private readonly string example13RazorCode = @"
+<BitCarousel Style=""height: 100px""
+             VisibleItemsCount=""4""
+             ScrollItemsCount=""4""
+             InfiniteScrolling
+             ResponsiveOptions=""@([new() { Breakpoint = 640, VisibleItemsCount = 1, ScrollItemsCount = 1 },
+                                   new() { Breakpoint = 960, VisibleItemsCount = 2, ScrollItemsCount = 2 },
+                                   new() { Breakpoint = 1280, VisibleItemsCount = 3, ScrollItemsCount = 3 }])"">
+    <BitCarouselItem Class=""item""><div>1</div></BitCarouselItem>
+    <BitCarouselItem Class=""item""><div>2</div></BitCarouselItem>
+    <BitCarouselItem Class=""item""><div>3</div></BitCarouselItem>
+    <BitCarouselItem Class=""item""><div>4</div></BitCarouselItem>
+    <BitCarouselItem Class=""item""><div>5</div></BitCarouselItem>
+    <BitCarouselItem Class=""item""><div>6</div></BitCarouselItem>
+    <BitCarouselItem Class=""item""><div>7</div></BitCarouselItem>
+    <BitCarouselItem Class=""item""><div>8</div></BitCarouselItem>
+</BitCarousel>";
+
+    private readonly string example14RazorCode = @"
+<style>
+    .thumb-dot {
+        width: 3rem;
+        height: 2rem;
+        padding: 0;
+        overflow: hidden;
+        border-radius: 0.25rem;
+        opacity: 0.5;
+    }
+
+    .thumb-dot-current {
+        opacity: 1;
+        outline: 2px solid var(--bit-clr-pri);
+    }
+
+    .thumb {
+        width: 100%;
+        height: 100%;
+        object-fit: cover;
+    }
+</style>
+
+<BitCarousel Style=""height: 100px"" InfiniteScrolling>
+    <DotTemplate Context=""index""><span>@(index + 1)</span></DotTemplate>
+    <ChildContent>
+        <BitCarouselItem Class=""item""><div>1</div></BitCarouselItem>
+        <BitCarouselItem Class=""item""><div>2</div></BitCarouselItem>
+        <BitCarouselItem Class=""item""><div>3</div></BitCarouselItem>
+        <BitCarouselItem Class=""item""><div>4</div></BitCarouselItem>
+    </ChildContent>
+</BitCarousel>
+
+<BitCarousel InfiniteScrolling
+             Classes=""@(new() { Dots = ""thumb-dot"", CurrentDot = ""thumb-dot-current"" })"">
+    <DotTemplate Context=""index"">
+        <img class=""thumb"" alt="""" src=""@($""img{index + 1}.jpg"")"" />
+    </DotTemplate>
+    <ChildContent>
+        <BitCarouselItem>
+            <img class=""image"" alt=""Aurora"" src=""img1.jpg"" />
+        </BitCarouselItem>
+        <BitCarouselItem>
+            <img class=""image"" alt=""Beautiful mountain"" src=""img2.jpg"" />
+        </BitCarouselItem>
+        <BitCarouselItem>
+            <img class=""image"" alt=""Forest in the valley"" src=""img3.jpg"" />
+        </BitCarouselItem>
+        <BitCarouselItem>
+            <img class=""image"" alt=""Road among the mountains"" src=""img4.jpg"" />
+        </BitCarouselItem>
+    </ChildContent>
+</BitCarousel>";
+
+    private readonly string example15RazorCode = @"
+<BitCarousel AutoPlay
+             ShowPlayPause
+             InfiniteScrolling
+             AriaLabel=""Landscape photos""
+             ItemAriaLabelFormat=""Photo {0} of {1}""
+             DotAriaLabel=""Photo""
+             DotsAriaLabel=""Choose a photo to display""
+             GoLeftAriaLabel=""Next photo""
+             GoRightAriaLabel=""Previous photo""
+             PlayButtonAriaLabel=""Start the photo slide show""
+             PauseButtonAriaLabel=""Stop the photo slide show"">
+    <BitCarouselItem AriaLabel=""Aurora over a frozen lake"">
+        <img class=""image"" alt=""Aurora"" src=""img1.jpg"" />
+    </BitCarouselItem>
+    <BitCarouselItem>
+        <img class=""image"" alt=""Beautiful mountain"" src=""img2.jpg"" />
+    </BitCarouselItem>
+    <BitCarouselItem>
+        <img class=""image"" alt=""Forest in the valley"" src=""img3.jpg"" />
+    </BitCarouselItem>
+</BitCarousel>";
+
+    private readonly string example16RazorCode = @"
+<BitCarousel Color=""BitColor.Primary"" Style=""height: 72px"" InfiniteScrolling>
+    <BitCarouselItem Class=""item""><div>1</div></BitCarouselItem>
+    <BitCarouselItem Class=""item""><div>2</div></BitCarouselItem>
+    <BitCarouselItem Class=""item""><div>3</div></BitCarouselItem>
+</BitCarousel>
+
+<BitCarousel Color=""BitColor.Success"" Style=""height: 72px"" InfiniteScrolling>
+    <BitCarouselItem Class=""item""><div>1</div></BitCarouselItem>
+    <BitCarouselItem Class=""item""><div>2</div></BitCarouselItem>
+    <BitCarouselItem Class=""item""><div>3</div></BitCarouselItem>
+</BitCarousel>
+
+<BitCarousel Color=""BitColor.Warning"" Style=""height: 72px"" InfiniteScrolling>
+    <BitCarouselItem Class=""item""><div>1</div></BitCarouselItem>
+    <BitCarouselItem Class=""item""><div>2</div></BitCarouselItem>
+    <BitCarouselItem Class=""item""><div>3</div></BitCarouselItem>
+</BitCarousel>
+
+<BitCarousel Color=""BitColor.Error"" Style=""height: 72px"" InfiniteScrolling>
+    <BitCarouselItem Class=""item""><div>1</div></BitCarouselItem>
+    <BitCarouselItem Class=""item""><div>2</div></BitCarouselItem>
+    <BitCarouselItem Class=""item""><div>3</div></BitCarouselItem>
+</BitCarousel>";
+
+    private readonly string example17RazorCode = @"
+<link rel=""stylesheet"" href=""https://cdnjs.cloudflare.com/ajax/libs/font-awesome/7.0.1/css/all.min.css"" />
+
+<div>FontAwesome (circle-arrow icons):</div>
+<BitCarousel InfiniteScrolling
+             GoLeftIcon=""@BitIconInfo.Fa(""solid circle-arrow-right"")""
+             GoRightIcon=""@BitIconInfo.Fa(""solid circle-arrow-left"")"">
+    <BitCarouselItem>
+        <img class=""image"" alt=""Aurora"" src=""_content/Bit.BlazorUI.Demo.Client.Core/images/carousel/img1.jpg"" />
+        <div class=""text-title"">Aurora</div>
+        <div class=""text-description"">This is Aurora and it's fantastic</div>
+    </BitCarouselItem>
+    <BitCarouselItem>
+        <img class=""image"" alt=""Beautiful mountain"" src=""_content/Bit.BlazorUI.Demo.Client.Core/images/carousel/img2.jpg"" />
+        <div class=""text-title"">Beautiful Mountain</div>
+        <div class=""text-description"">This is a Beautiful Mountain and it's gorgeous</div>
+    </BitCarouselItem>
+    <BitCarouselItem>
+        <img class=""image"" alt=""Forest in the valley"" src=""_content/Bit.BlazorUI.Demo.Client.Core/images/carousel/img3.jpg"" />
+        <div class=""text-title"">Forest In The Valley</div>
+        <div class=""text-description"">This is a Forest In The Valley and it's beautiful</div>
+    </BitCarouselItem>
+    <BitCarouselItem>
+        <img class=""image"" alt=""Road among the mountains"" src=""_content/Bit.BlazorUI.Demo.Client.Core/images/carousel/img4.jpg"" />
+        <div class=""text-title"">Road Among The Mountains</div>
+        <div class=""text-description"">This is a Road Among The Mountains and it's amazing</div>
+    </BitCarouselItem>
+</BitCarousel>
+
+<link rel=""stylesheet"" href=""https://cdn.jsdelivr.net/npm/bootstrap-icons@1.11.3/font/bootstrap-icons.min.css"" />
+
+<div>Bootstrap Icons (arrow-left-circle / arrow-right-circle):</div>
+<BitCarousel InfiniteScrolling
+             GoLeftIcon=""@BitIconInfo.Bi(""arrow-right-circle"")""
+             GoRightIcon=""@BitIconInfo.Bi(""arrow-left-circle"")"">
+    <BitCarouselItem>
+        <img class=""image"" alt=""Aurora"" src=""_content/Bit.BlazorUI.Demo.Client.Core/images/carousel/img1.jpg"" />
+        <div class=""text-title"">Aurora</div>
+        <div class=""text-description"">This is Aurora and it's fantastic</div>
+    </BitCarouselItem>
+    <BitCarouselItem>
+        <img class=""image"" alt=""Beautiful mountain"" src=""_content/Bit.BlazorUI.Demo.Client.Core/images/carousel/img2.jpg"" />
+        <div class=""text-title"">Beautiful Mountain</div>
+        <div class=""text-description"">This is a Beautiful Mountain and it's gorgeous</div>
+    </BitCarouselItem>
+    <BitCarouselItem>
+        <img class=""image"" alt=""Forest in the valley"" src=""_content/Bit.BlazorUI.Demo.Client.Core/images/carousel/img3.jpg"" />
+        <div class=""text-title"">Forest In The Valley</div>
+        <div class=""text-description"">This is a Forest In The Valley and it's beautiful</div>
+    </BitCarouselItem>
+    <BitCarouselItem>
+        <img class=""image"" alt=""Road among the mountains"" src=""_content/Bit.BlazorUI.Demo.Client.Core/images/carousel/img4.jpg"" />
+        <div class=""text-title"">Road Among The Mountains</div>
+        <div class=""text-description"">This is a Road Among The Mountains and it's amazing</div>
+    </BitCarouselItem>
+</BitCarousel>";
+
+    private readonly string example18RazorCode = @"
+<BitCarousel Size=""BitSize.Small"" Style=""height: 72px"" InfiniteScrolling>
+    <BitCarouselItem Class=""item""><div>1</div></BitCarouselItem>
+    <BitCarouselItem Class=""item""><div>2</div></BitCarouselItem>
+    <BitCarouselItem Class=""item""><div>3</div></BitCarouselItem>
+</BitCarousel>
+
+<BitCarousel Size=""BitSize.Medium"" Style=""height: 72px"" InfiniteScrolling>
+    <BitCarouselItem Class=""item""><div>1</div></BitCarouselItem>
+    <BitCarouselItem Class=""item""><div>2</div></BitCarouselItem>
+    <BitCarouselItem Class=""item""><div>3</div></BitCarouselItem>
+</BitCarousel>
+
+<BitCarousel Size=""BitSize.Large"" Style=""height: 72px"" InfiniteScrolling>
+    <BitCarouselItem Class=""item""><div>1</div></BitCarouselItem>
+    <BitCarouselItem Class=""item""><div>2</div></BitCarouselItem>
+    <BitCarouselItem Class=""item""><div>3</div></BitCarouselItem>
+</BitCarousel>";
+
+    private readonly string example19RazorCode = @"
+<style>
+    .custom-item {
+        color: white;
+        display: grid;
+        place-items: center;
+        background: linear-gradient(135deg, #5843be, #9787e5);
+    }
+</style>
+
+<BitCarousel Style=""height: 100px; border-radius: 0.5rem; overflow: hidden""
+             InfiniteScrolling
+             Styles=""@(new() { Buttons = ""color: white; background-color: rgba(0,0,0,0.35); width: 2.5rem;"",
+                               CurrentDot = ""background-color: mediumpurple;"" })""
+             Classes=""@(new() { Item = ""custom-item"" })"">
+    <BitCarouselItem><div>1</div></BitCarouselItem>
+    <BitCarouselItem><div>2</div></BitCarouselItem>
+    <BitCarouselItem><div>3</div></BitCarouselItem>
+    <BitCarouselItem><div>4</div></BitCarouselItem>
+</BitCarousel>";
+
+    private readonly string example20RazorCode = @"
+<style>
+    .item {
+        text-align: center;
+        color: black;
+        border: 1px solid blue;
+        background-color: lightblue;
+    }
+
+    .item div {
+        transform: translate(0, 80%);
+    }
+</style>
+
+<BitCarousel Style=""height: 100px"" Dir=""BitDir.Rtl"" VisibleItemsCount=""3"" ScrollItemsCount=""1"" InfiniteScrolling>
+    <BitCarouselItem Class=""item""><div>یک</div></BitCarouselItem>
+    <BitCarouselItem Class=""item""><div>دو</div></BitCarouselItem>
+    <BitCarouselItem Class=""item""><div>سه</div></BitCarouselItem>
+    <BitCarouselItem Class=""item""><div>چهار</div></BitCarouselItem>
+    <BitCarouselItem Class=""item""><div>پنج</div></BitCarouselItem>
+    <BitCarouselItem Class=""item""><div>شیش</div></BitCarouselItem>
+    <BitCarouselItem Class=""item""><div>هفت</div></BitCarouselItem>
+    <BitCarouselItem Class=""item""><div>هشت</div></BitCarouselItem>
+    <BitCarouselItem Class=""item""><div>نه</div></BitCarouselItem>
+</BitCarousel>";
+}
diff --git a/src/BlazorUI/Demo/Client/Bit.BlazorUI.Demo.Client.Core/Pages/Components/Lists/Carousel/BitCarouselDemo.razor.scss b/src/BlazorUI/Demo/Client/Bit.BlazorUI.Demo.Client.Core/Pages/Components/Lists/Carousel/BitCarouselDemo.razor.scss
index 83eb74a5f39..36bdc51da02 100644
--- a/src/BlazorUI/Demo/Client/Bit.BlazorUI.Demo.Client.Core/Pages/Components/Lists/Carousel/BitCarouselDemo.razor.scss
+++ b/src/BlazorUI/Demo/Client/Bit.BlazorUI.Demo.Client.Core/Pages/Components/Lists/Carousel/BitCarouselDemo.razor.scss
@@ -58,3 +58,41 @@
         transform: translate(0, 80%);
     }
 }
+
+::deep .gap-item {
+    height: 100%;
+    box-sizing: border-box;
+}
+
+.colors-container {
+    gap: 1rem;
+    display: grid;
+    grid-template-columns: repeat(auto-fill, minmax(rem2(220px), 1fr));
+}
+
+::deep .thumb-dot {
+    width: rem2(48px);
+    height: rem2(32px);
+    padding: 0;
+    opacity: 0.5;
+    overflow: hidden;
+    border-radius: rem2(4px);
+}
+
+::deep .thumb-dot-current {
+    opacity: 1;
+    outline: rem2(2px) solid $bit-color-primary;
+}
+
+::deep .thumb {
+    width: 100%;
+    height: 100%;
+    object-fit: cover;
+}
+
+::deep .custom-item {
+    color: white;
+    display: grid;
+    place-items: center;
+    background: linear-gradient(135deg, #5843be, #9787e5);
+}
diff --git a/src/BlazorUI/Tests/Bit.BlazorUI.Tests/Components/Lists/Carousel/BitCarouselTest.razor b/src/BlazorUI/Tests/Bit.BlazorUI.Tests/Components/Lists/Carousel/BitCarouselTest.razor
index e251127551d..f3a42cfb9b3 100644
--- a/src/BlazorUI/Tests/Bit.BlazorUI.Tests/Components/Lists/Carousel/BitCarouselTest.razor
+++ b/src/BlazorUI/Tests/Bit.BlazorUI.Tests/Components/Lists/Carousel/BitCarouselTest.razor
@@ -1,10 +1,89 @@
-<BitCarousel HideDots="HideDots" HideNextPrev="HideNextPrev">
-    <BitCarouselItem><div class='item'>1</div></BitCarouselItem>
-    <BitCarouselItem><div class='item'>2</div></BitCarouselItem>
-    <BitCarouselItem><div class='item'>3</div></BitCarouselItem>
+<BitCarousel @ref="Carousel"
+              Dir="Dir"
+              Gap="@Gap"
+              Fade="Fade"
+              Wheel="Wheel"
+              Size="Size"
+              Color="Color"
+              NoDrag="NoDrag"
+              Accent="Accent"
+              Styles="Styles"
+              Classes="Classes"
+              AutoPlay="AutoPlay"
+              Vertical="Vertical"
+              HideDots="HideDots"
+              OnChange="OnChange"
+              IsEnabled="IsEnabled"
+              AriaLabel="@AriaLabel"
+              NoKeyboard="NoKeyboard"
+              DefaultPage="DefaultPage"
+              DotTemplate="DotTemplate"
+              HideNextPrev="HideNextPrev"
+              ShowPlayPause="ShowPlayPause"
+              PauseOnHover="PauseOnHover"
+              PauseOnFocus="PauseOnFocus"
+              DotAriaLabel="@DotAriaLabel"
+              DragThreshold="DragThreshold"
+              DotsAriaLabel="@DotsAriaLabel"
+              GoLeftAriaLabel="@GoLeftAriaLabel"
+              GoRightAriaLabel="@GoRightAriaLabel"
+              StopOnLastSlide="StopOnLastSlide"
+              AutoPlayReverse="AutoPlayReverse"
+              ScrollItemsCount="ScrollItemsCount"
+              AutoPlayInterval="AutoPlayInterval"
+              AnimationDuration="AnimationDuration"
+              ResponsiveOptions="ResponsiveOptions"
+              VisibleItemsCount="VisibleItemsCount"
+              InfiniteScrolling="InfiniteScrolling"
+              StopOnInteraction="StopOnInteraction"
+              ItemAriaLabelFormat="@ItemAriaLabelFormat">
+    @for (int i = 1; i <= ItemsCount; i++)
+    {
+        var index = i;
+        <BitCarouselItem><div class='item'>@index</div></BitCarouselItem>
+    }
 </BitCarousel>
 
 @code {
+    public BitCarousel Carousel { get; set; } = default!;
+
+    [Parameter] public BitDir? Dir { get; set; }
+    [Parameter] public string? Gap { get; set; }
+    [Parameter] public bool Fade { get; set; }
+    [Parameter] public bool Wheel { get; set; }
+    [Parameter] public bool NoDrag { get; set; }
+    [Parameter] public bool AutoPlay { get; set; }
+    [Parameter] public bool Vertical { get; set; }
     [Parameter] public bool HideDots { get; set; }
+    [Parameter] public BitSize? Size { get; set; }
+    [Parameter] public BitColor? Color { get; set; }
+    [Parameter] public bool IsEnabled { get; set; } = true;
+    [Parameter] public bool NoKeyboard { get; set; }
+    [Parameter] public int ItemsCount { get; set; } = 3;
+    [Parameter] public int DefaultPage { get; set; } = 1;
     [Parameter] public bool HideNextPrev { get; set; }
+    [Parameter] public bool ShowPlayPause { get; set; }
+    [Parameter] public bool PauseOnHover { get; set; } = true;
+    [Parameter] public bool PauseOnFocus { get; set; } = true;
+    [Parameter] public bool InfiniteScrolling { get; set; }
+    [Parameter] public bool StopOnLastSlide { get; set; }
+    [Parameter] public bool AutoPlayReverse { get; set; }
+    [Parameter] public bool StopOnInteraction { get; set; }
+    [Parameter] public int DragThreshold { get; set; } = 20;
+    [Parameter] public int ScrollItemsCount { get; set; } = 1;
+    [Parameter] public double AutoPlayInterval { get; set; } = 2000;
+    [Parameter] public double AnimationDuration { get; set; } = 0.5;
+    [Parameter] public int VisibleItemsCount { get; set; } = 1;
+    [Parameter] public BitColorKind? Accent { get; set; }
+    [Parameter] public string? AriaLabel { get; set; }
+    [Parameter] public string DotAriaLabel { get; set; } = "Slide";
+    [Parameter] public string DotsAriaLabel { get; set; } = "Choose slide to display";
+    [Parameter] public string? GoLeftAriaLabel { get; set; }
+    [Parameter] public string? GoRightAriaLabel { get; set; }
+    [Parameter] public string? ItemAriaLabelFormat { get; set; }
+    [Parameter] public RenderFragment<int>? DotTemplate { get; set; }
+    [Parameter] public IEnumerable<BitCarouselResponsiveOption>? ResponsiveOptions { get; set; }
+    [Parameter] public BitCarouselClassStyles? Styles { get; set; }
+    [Parameter] public BitCarouselClassStyles? Classes { get; set; }
+    [Parameter] public EventCallback<int> OnChange { get; set; }
 }
diff --git a/src/BlazorUI/Tests/Bit.BlazorUI.Tests/Components/Lists/Carousel/BitCarouselTests.cs b/src/BlazorUI/Tests/Bit.BlazorUI.Tests/Components/Lists/Carousel/BitCarouselTests.cs
index 2b0f99cccdd..e25f67c09f7 100644
--- a/src/BlazorUI/Tests/Bit.BlazorUI.Tests/Components/Lists/Carousel/BitCarouselTests.cs
+++ b/src/BlazorUI/Tests/Bit.BlazorUI.Tests/Components/Lists/Carousel/BitCarouselTests.cs
@@ -1,6 +1,9 @@
-using Bit.BlazorUI.Tests.Components.Lists.BasicList;
+using System;
+using System.Collections.Generic;
+using System.Linq;
+using System.Threading.Tasks;
 using Bunit;
-using Microsoft.AspNetCore.Components.Web.Virtualization;
+using Microsoft.AspNetCore.Components.Web;
 using Microsoft.Extensions.DependencyInjection;
 using Microsoft.VisualStudio.TestTools.UnitTesting;
 
@@ -27,15 +30,87 @@ public void BitCarouselShouldRenderItemsAndControls()
         var container = component.Find(".bit-csl-cnt");
         Assert.IsNotNull(container);
 
-        // next/prev buttons should exist by default
-        var leftBtn = component.Find(".bit-csl-lbt");
-        var rightBtn = component.Find(".bit-csl-rbt");
+        // next/prev buttons should exist by default and be real buttons
+        var leftBtn = component.Find("button.bit-csl-lbt");
+        var rightBtn = component.Find("button.bit-csl-rbt");
         Assert.IsNotNull(leftBtn);
         Assert.IsNotNull(rightBtn);
 
-        // dots container exists (may be empty before dimensions are computed)
-        var dotsContainer = component.FindAll(".bit-csl-dcn");
-        Assert.AreEqual(1, dotsContainer.Count);
+        // the dots appear once the carousel has been laid out and knows its pages count
+        component.WaitForAssertion(() => Assert.AreEqual(3, component.FindAll(".bit-csl-dot").Count));
+    }
+
+    [TestMethod]
+    public void BitCarouselShouldRenderAccessibilityAttributes()
+    {
+        var component = RenderComponent<BitCarouselTest>();
+
+        var root = component.Find(".bit-csl");
+        Assert.AreEqual("region", root.GetAttribute("role"));
+        Assert.AreEqual("carousel", root.GetAttribute("aria-roledescription"));
+        Assert.AreEqual("0", root.GetAttribute("tabindex"));
+
+        var items = component.FindAll(".bit-crsi");
+        foreach (var (item, index) in items.Select((item, index) => (item, index)))
+        {
+            Assert.AreEqual("group", item.GetAttribute("role"));
+            Assert.AreEqual("slide", item.GetAttribute("aria-roledescription"));
+            Assert.AreEqual($"{index + 1} of 3", item.GetAttribute("aria-label"));
+        }
+
+        component.WaitForAssertion(() =>
+        {
+            var dotsGroup = component.Find(".bit-csl-dts");
+            Assert.AreEqual("group", dotsGroup.GetAttribute("role"));
+            Assert.AreEqual("Choose slide to display", dotsGroup.GetAttribute("aria-label"));
+
+            var dots = component.FindAll("button.bit-csl-dot");
+            Assert.AreEqual(3, dots.Count);
+            Assert.AreEqual("Slide 1", dots[0].GetAttribute("aria-label"));
+            Assert.AreEqual("true", dots[0].GetAttribute("aria-current"));
+            Assert.IsNull(dots[1].GetAttribute("aria-current"));
+        });
+    }
+
+    [TestMethod]
+    public void BitCarouselShouldRespectCustomAriaLabels()
+    {
+        var component = RenderComponent<BitCarouselTest>(parameters =>
+        {
+            parameters.Add(p => p.DotAriaLabel, "Page");
+            parameters.Add(p => p.GoLeftAriaLabel, "Go left");
+            parameters.Add(p => p.GoRightAriaLabel, "Go right");
+        });
+
+        Assert.AreEqual("Go left", component.Find(".bit-csl-lbt").GetAttribute("aria-label"));
+        Assert.AreEqual("Go right", component.Find(".bit-csl-rbt").GetAttribute("aria-label"));
+
+        component.WaitForAssertion(() =>
+        {
+            var dots = component.FindAll(".bit-csl-dot");
+            Assert.AreEqual("Page 2", dots[1].GetAttribute("aria-label"));
+        });
+    }
+
+    [TestMethod]
+    public void BitCarouselShouldRenderDefaultNavigationAriaLabels()
+    {
+        var component = RenderComponent<BitCarouselTest>();
+
+        Assert.AreEqual("Next slide", component.Find(".bit-csl-lbt").GetAttribute("aria-label"));
+        Assert.AreEqual("Previous slide", component.Find(".bit-csl-rbt").GetAttribute("aria-label"));
+    }
+
+    [TestMethod]
+    public void BitCarouselShouldFlipNavigationAriaLabelsInRtl()
+    {
+        var component = RenderComponent<BitCarouselTest>(parameters =>
+        {
+            parameters.Add(p => p.Dir, BitDir.Rtl);
+        });
+
+        Assert.AreEqual("Previous slide", component.Find(".bit-csl-lbt").GetAttribute("aria-label"));
+        Assert.AreEqual("Next slide", component.Find(".bit-csl-rbt").GetAttribute("aria-label"));
     }
 
     [TestMethod]
@@ -50,6 +125,18 @@ public void BitCarouselShouldHideDotsWhenHideDotsTrue()
         Assert.AreEqual(0, dots.Count);
     }
 
+    [TestMethod]
+    public void BitCarouselShouldHideDotsWhenSinglePage()
+    {
+        var component = RenderComponent<BitCarouselTest>(parameters =>
+        {
+            parameters.Add(p => p.ItemsCount, 3);
+            parameters.Add(p => p.VisibleItemsCount, 3);
+        });
+
+        component.WaitForAssertion(() => Assert.AreEqual(0, component.FindAll(".bit-csl-dcn").Count));
+    }
+
     [TestMethod]
     public void BitCarouselShouldHideNextPrevWhenHideNextPrevTrue()
     {
@@ -80,4 +167,1614 @@ public void BitCarouselShouldRespectAccent(BitColorKind accent, string expectedC
         var root = component.Find(".bit-csl");
         Assert.IsTrue(root.ClassList.Contains(expectedClass));
     }
+
+    [TestMethod]
+    [DataRow(BitColor.Primary, "bit-csl-pri")]
+    [DataRow(BitColor.Secondary, "bit-csl-sec")]
+    [DataRow(BitColor.Tertiary, "bit-csl-ter")]
+    [DataRow(BitColor.Info, "bit-csl-inf")]
+    [DataRow(BitColor.Success, "bit-csl-suc")]
+    [DataRow(BitColor.Warning, "bit-csl-wrn")]
+    [DataRow(BitColor.SevereWarning, "bit-csl-swr")]
+    [DataRow(BitColor.Error, "bit-csl-err")]
+    [DataRow(BitColor.PrimaryBackground, "bit-csl-pbg")]
+    [DataRow(BitColor.SecondaryBackground, "bit-csl-sbg")]
+    [DataRow(BitColor.TertiaryBackground, "bit-csl-tbg")]
+    [DataRow(BitColor.PrimaryForeground, "bit-csl-pfg")]
+    [DataRow(BitColor.SecondaryForeground, "bit-csl-sfg")]
+    [DataRow(BitColor.TertiaryForeground, "bit-csl-tfg")]
+    [DataRow(BitColor.PrimaryBorder, "bit-csl-pbr")]
+    [DataRow(BitColor.SecondaryBorder, "bit-csl-sbr")]
+    [DataRow(BitColor.TertiaryBorder, "bit-csl-tbr")]
+    public void BitCarouselShouldRespectColor(BitColor color, string expectedClass)
+    {
+        var component = RenderComponent<BitCarousel>(parameters =>
+        {
+            parameters.Add(p => p.Color, color);
+        });
+
+        var root = component.Find(".bit-csl");
+        Assert.IsTrue(root.ClassList.Contains(expectedClass));
+    }
+
+    [TestMethod]
+    [DataRow(BitSize.Small, "bit-csl-sm")]
+    [DataRow(BitSize.Medium, "bit-csl-md")]
+    [DataRow(BitSize.Large, "bit-csl-lg")]
+    public void BitCarouselShouldRespectSize(BitSize size, string expectedClass)
+    {
+        var component = RenderComponent<BitCarousel>(parameters =>
+        {
+            parameters.Add(p => p.Size, size);
+        });
+
+        var root = component.Find(".bit-csl");
+        Assert.IsTrue(root.ClassList.Contains(expectedClass));
+    }
+
+    [TestMethod]
+    public void BitCarouselShouldRespectVertical()
+    {
+        var component = RenderComponent<BitCarouselTest>(parameters =>
+        {
+            parameters.Add(p => p.Vertical, true);
+        });
+
+        var root = component.Find(".bit-csl");
+        Assert.IsTrue(root.ClassList.Contains("bit-csl-vrt"));
+    }
+
+    [TestMethod]
+    public void BitCarouselShouldRespectGap()
+    {
+        var component = RenderComponent<BitCarouselTest>(parameters =>
+        {
+            parameters.Add(p => p.Gap, "1rem");
+        });
+
+        var root = component.Find(".bit-csl");
+        StringAssert.Contains(root.GetAttribute("style"), "--bit-csl-gap:1rem");
+    }
+
+    [TestMethod]
+    public void BitCarouselShouldRespectNoKeyboard()
+    {
+        var component = RenderComponent<BitCarouselTest>(parameters =>
+        {
+            parameters.Add(p => p.NoKeyboard, true);
+        });
+
+        var root = component.Find(".bit-csl");
+        Assert.IsFalse(root.HasAttribute("tabindex"));
+    }
+
+    [TestMethod]
+    public void BitCarouselShouldRespectNoDrag()
+    {
+        var component = RenderComponent<BitCarouselTest>(parameters =>
+        {
+            parameters.Add(p => p.NoDrag, true);
+        });
+
+        var container = component.Find(".bit-csl-cnt");
+        Assert.IsTrue(container.ClassList.Contains("bit-csl-ndr"));
+    }
+
+    [TestMethod]
+    public void BitCarouselShouldRespectIsEnabledFalse()
+    {
+        var component = RenderComponent<BitCarouselTest>(parameters =>
+        {
+            parameters.Add(p => p.IsEnabled, false);
+        });
+
+        var root = component.Find(".bit-csl");
+        Assert.IsTrue(root.ClassList.Contains("bit-dis"));
+        Assert.IsFalse(root.HasAttribute("tabindex"));
+
+        Assert.IsTrue(component.Find(".bit-csl-lbt").HasAttribute("disabled"));
+        Assert.IsTrue(component.Find(".bit-csl-rbt").HasAttribute("disabled"));
+    }
+
+    [TestMethod]
+    public void BitCarouselShouldRenderPlayPauseButtonAndToggle()
+    {
+        var component = RenderComponent<BitCarouselTest>(parameters =>
+        {
+            parameters.Add(p => p.AutoPlay, true);
+            parameters.Add(p => p.ShowPlayPause, true);
+        });
+
+        component.WaitForAssertion(() => Assert.AreEqual(1, component.FindAll(".bit-csl-ppb").Count));
+
+        var button = component.Find(".bit-csl-ppb");
+        Assert.AreEqual("Stop automatic slide show", button.GetAttribute("aria-label"));
+
+        button.Click();
+
+        component.WaitForAssertion(() =>
+        {
+            Assert.AreEqual("Start automatic slide show", component.Find(".bit-csl-ppb").GetAttribute("aria-label"));
+        });
+
+        Assert.IsTrue(component.Instance.Carousel.IsPaused);
+
+        component.Find(".bit-csl-ppb").Click();
+
+        component.WaitForAssertion(() =>
+        {
+            Assert.AreEqual("Stop automatic slide show", component.Find(".bit-csl-ppb").GetAttribute("aria-label"));
+        });
+
+        Assert.IsFalse(component.Instance.Carousel.IsPaused);
+    }
+
+    [TestMethod]
+    public void BitCarouselShouldNotRenderPlayPauseButtonWithoutAutoPlay()
+    {
+        var component = RenderComponent<BitCarouselTest>(parameters =>
+        {
+            parameters.Add(p => p.ShowPlayPause, true);
+        });
+
+        component.WaitForAssertion(() => Assert.AreEqual(3, component.FindAll(".bit-csl-dot").Count));
+
+        Assert.AreEqual(0, component.FindAll(".bit-csl-ppb").Count);
+    }
+
+    [TestMethod]
+    public async Task BitCarouselShouldNavigateWithPublicApi()
+    {
+        var changedPage = -1;
+
+        var component = RenderComponent<BitCarouselTest>(parameters =>
+        {
+            parameters.Add(p => p.OnChange, (int page) => changedPage = page);
+        });
+
+        component.WaitForAssertion(() => Assert.AreEqual(3, component.FindAll(".bit-csl-dot").Count));
+
+        var carousel = component.Instance.Carousel;
+
+        Assert.AreEqual(0, carousel.CurrentPage);
+        Assert.AreEqual(3, carousel.ItemsCount);
+        Assert.AreEqual(3, carousel.PagesCount);
+
+        await component.InvokeAsync(carousel.GoNext);
+
+        component.WaitForAssertion(() =>
+        {
+            Assert.AreEqual(1, carousel.CurrentPage);
+            Assert.AreEqual(1, changedPage);
+        });
+
+        await component.InvokeAsync(carousel.GoPrev);
+
+        component.WaitForAssertion(() =>
+        {
+            Assert.AreEqual(0, carousel.CurrentPage);
+            Assert.AreEqual(0, changedPage);
+        });
+
+        await component.InvokeAsync(() => carousel.GoTo(3));
+
+        component.WaitForAssertion(() =>
+        {
+            Assert.AreEqual(2, carousel.CurrentPage);
+            Assert.AreEqual(2, changedPage);
+        });
+    }
+
+    [TestMethod]
+    public async Task BitCarouselShouldNotNavigatePastEndsWithoutInfiniteScrolling()
+    {
+        var component = RenderComponent<BitCarouselTest>();
+
+        component.WaitForAssertion(() => Assert.AreEqual(3, component.FindAll(".bit-csl-dot").Count));
+
+        var carousel = component.Instance.Carousel;
+
+        await component.InvokeAsync(carousel.GoPrev);
+
+        Assert.AreEqual(0, carousel.CurrentPage);
+
+        await component.InvokeAsync(carousel.GoNext);
+        await component.InvokeAsync(carousel.GoNext);
+        await component.InvokeAsync(carousel.GoNext);
+        await component.InvokeAsync(carousel.GoNext);
+
+        component.WaitForAssertion(() => Assert.AreEqual(2, carousel.CurrentPage));
+    }
+
+    [TestMethod]
+    public async Task BitCarouselShouldWrapAroundWithInfiniteScrolling()
+    {
+        var component = RenderComponent<BitCarouselTest>(parameters =>
+        {
+            parameters.Add(p => p.InfiniteScrolling, true);
+        });
+
+        component.WaitForAssertion(() => Assert.AreEqual(3, component.FindAll(".bit-csl-dot").Count));
+
+        var carousel = component.Instance.Carousel;
+
+        await component.InvokeAsync(carousel.GoPrev);
+
+        component.WaitForAssertion(() => Assert.AreEqual(2, carousel.CurrentPage));
+
+        await component.InvokeAsync(carousel.GoNext);
+
+        component.WaitForAssertion(() => Assert.AreEqual(0, carousel.CurrentPage));
+    }
+
+    [TestMethod]
+    public void BitCarouselShouldNavigateWithDots()
+    {
+        var component = RenderComponent<BitCarouselTest>();
+
+        component.WaitForAssertion(() => Assert.AreEqual(3, component.FindAll(".bit-csl-dot").Count));
+
+        component.FindAll(".bit-csl-dot")[2].Click();
+
+        component.WaitForAssertion(() =>
+        {
+            Assert.AreEqual(2, component.Instance.Carousel.CurrentPage);
+
+            var dots = component.FindAll(".bit-csl-dot");
+            Assert.IsFalse(dots[0].ClassList.Contains("bit-csl-cud"));
+            Assert.IsTrue(dots[2].ClassList.Contains("bit-csl-cud"));
+        });
+    }
+
+    [TestMethod]
+    public void BitCarouselShouldMarkOffscreenItemsHidden()
+    {
+        var component = RenderComponent<BitCarouselTest>();
+
+        component.WaitForAssertion(() =>
+        {
+            var items = component.FindAll(".bit-crsi");
+
+            Assert.IsNull(items[0].GetAttribute("aria-hidden"));
+            Assert.AreEqual("true", items[1].GetAttribute("aria-hidden"));
+            Assert.AreEqual("true", items[2].GetAttribute("aria-hidden"));
+        });
+    }
+
+    [TestMethod]
+    public void BitCarouselShouldRespectDefaultPage()
+    {
+        var component = RenderComponent<BitCarouselTest>(parameters =>
+        {
+            parameters.Add(p => p.DefaultPage, 2);
+        });
+
+        component.WaitForAssertion(() => Assert.AreEqual(1, component.Instance.Carousel.CurrentPage));
+    }
+
+    [TestMethod]
+    public void BitCarouselShouldRespectClassesAndStyles()
+    {
+        var component = RenderComponent<BitCarouselTest>(parameters =>
+        {
+            parameters.Add(p => p.Classes, new BitCarouselClassStyles
+            {
+                Root = "custom-root",
+                Container = "custom-container",
+                Item = "custom-item",
+                Dots = "custom-dot",
+                CurrentDot = "custom-current-dot"
+            });
+            parameters.Add(p => p.Styles, new BitCarouselClassStyles
+            {
+                Root = "margin: 1px;",
+                Container = "padding: 1px;"
+            });
+        });
+
+        var root = component.Find(".bit-csl");
+        Assert.IsTrue(root.ClassList.Contains("custom-root"));
+        StringAssert.Contains(root.GetAttribute("style"), "margin: 1px;");
+
+        var container = component.Find(".bit-csl-cnt");
+        Assert.IsTrue(container.ClassList.Contains("custom-container"));
+        StringAssert.Contains(container.GetAttribute("style"), "padding: 1px;");
+
+        var item = component.Find(".bit-crsi");
+        Assert.IsTrue(item.ClassList.Contains("custom-item"));
+
+        component.WaitForAssertion(() =>
+        {
+            var dots = component.FindAll(".bit-csl-dot");
+            Assert.IsTrue(dots[0].ClassList.Contains("custom-dot"));
+            Assert.IsTrue(dots[0].ClassList.Contains("custom-current-dot"));
+            Assert.IsFalse(dots[1].ClassList.Contains("custom-current-dot"));
+        });
+    }
+
+    [TestMethod]
+    public void BitCarouselShouldRespectRtl()
+    {
+        var component = RenderComponent<BitCarouselTest>(parameters =>
+        {
+            parameters.Add(p => p.Dir, BitDir.Rtl);
+        });
+
+        var root = component.Find(".bit-csl");
+        Assert.AreEqual("rtl", root.GetAttribute("dir"));
+        Assert.IsTrue(root.ClassList.Contains("bit-rtl"));
+
+        var container = component.Find(".bit-csl-cnt");
+        StringAssert.Contains(container.GetAttribute("style"), "direction:rtl");
+    }
+
+    [TestMethod]
+    public async Task BitCarouselShouldStopAutoPlayOnInteraction()
+    {
+        var component = RenderComponent<BitCarouselTest>(parameters =>
+        {
+            parameters.Add(p => p.AutoPlay, true);
+            parameters.Add(p => p.StopOnInteraction, true);
+            parameters.Add(p => p.InfiniteScrolling, true);
+        });
+
+        component.WaitForAssertion(() => Assert.AreEqual(3, component.FindAll(".bit-csl-dot").Count));
+
+        var leftButton = component.Find(".bit-csl-lbt");
+        await leftButton.ClickAsync(new Microsoft.AspNetCore.Components.Web.MouseEventArgs());
+
+        component.WaitForAssertion(() => Assert.IsTrue(component.Instance.Carousel.IsPaused));
+    }
+
+    [TestMethod]
+    public void BitCarouselShouldClampVisibleAndScrollCounts()
+    {
+        var component = RenderComponent<BitCarouselTest>(parameters =>
+        {
+            parameters.Add(p => p.ItemsCount, 2);
+            parameters.Add(p => p.VisibleItemsCount, 5);
+            parameters.Add(p => p.ScrollItemsCount, 9);
+        });
+
+        // 2 items shown at once (clamped from 5) leaves a single page.
+        component.WaitForAssertion(() => Assert.AreEqual(1, component.Instance.Carousel.PagesCount));
+    }
+
+    [TestMethod]
+    public void BitCarouselShouldNavigateWithKeyboard()
+    {
+        var component = RenderComponent<BitCarouselTest>();
+
+        component.WaitForAssertion(() => Assert.AreEqual(3, component.FindAll(".bit-csl-dot").Count));
+
+        var root = component.Find(".bit-csl");
+        var carousel = component.Instance.Carousel;
+
+        root.KeyDown(new Microsoft.AspNetCore.Components.Web.KeyboardEventArgs { Key = "ArrowRight" });
+        component.WaitForAssertion(() => Assert.AreEqual(1, carousel.CurrentPage));
+
+        root.KeyDown(new Microsoft.AspNetCore.Components.Web.KeyboardEventArgs { Key = "ArrowLeft" });
+        component.WaitForAssertion(() => Assert.AreEqual(0, carousel.CurrentPage));
+
+        root.KeyDown(new Microsoft.AspNetCore.Components.Web.KeyboardEventArgs { Key = "End" });
+        component.WaitForAssertion(() => Assert.AreEqual(2, carousel.CurrentPage));
+
+        root.KeyDown(new Microsoft.AspNetCore.Components.Web.KeyboardEventArgs { Key = "Home" });
+        component.WaitForAssertion(() => Assert.AreEqual(0, carousel.CurrentPage));
+    }
+
+    [TestMethod]
+    public void BitCarouselShouldFlipKeyboardNavigationInRtl()
+    {
+        var component = RenderComponent<BitCarouselTest>(parameters =>
+        {
+            parameters.Add(p => p.Dir, BitDir.Rtl);
+        });
+
+        component.WaitForAssertion(() => Assert.AreEqual(3, component.FindAll(".bit-csl-dot").Count));
+
+        var root = component.Find(".bit-csl");
+        var carousel = component.Instance.Carousel;
+
+        // In a right-to-left carousel the next slide sits on the left, so ArrowLeft moves forwards.
+        root.KeyDown(new Microsoft.AspNetCore.Components.Web.KeyboardEventArgs { Key = "ArrowLeft" });
+        component.WaitForAssertion(() => Assert.AreEqual(1, carousel.CurrentPage));
+
+        root.KeyDown(new Microsoft.AspNetCore.Components.Web.KeyboardEventArgs { Key = "ArrowRight" });
+        component.WaitForAssertion(() => Assert.AreEqual(0, carousel.CurrentPage));
+    }
+
+    [TestMethod]
+    public void BitCarouselShouldNavigateWithKeyboardVertically()
+    {
+        var component = RenderComponent<BitCarouselTest>(parameters =>
+        {
+            parameters.Add(p => p.Vertical, true);
+        });
+
+        component.WaitForAssertion(() => Assert.AreEqual(3, component.FindAll(".bit-csl-dot").Count));
+
+        var root = component.Find(".bit-csl");
+        var carousel = component.Instance.Carousel;
+
+        root.KeyDown(new Microsoft.AspNetCore.Components.Web.KeyboardEventArgs { Key = "ArrowDown" });
+        component.WaitForAssertion(() => Assert.AreEqual(1, carousel.CurrentPage));
+
+        root.KeyDown(new Microsoft.AspNetCore.Components.Web.KeyboardEventArgs { Key = "ArrowUp" });
+        component.WaitForAssertion(() => Assert.AreEqual(0, carousel.CurrentPage));
+    }
+
+    [TestMethod]
+    public void BitCarouselShouldIgnoreModifiedNavigationKeys()
+    {
+        var component = RenderComponent<BitCarouselTest>();
+
+        component.WaitForAssertion(() => Assert.AreEqual(3, component.FindAll(".bit-csl-dot").Count));
+
+        var root = component.Find(".bit-csl");
+        var carousel = component.Instance.Carousel;
+
+        root.KeyDown(new Microsoft.AspNetCore.Components.Web.KeyboardEventArgs { Key = "ArrowRight", CtrlKey = true });
+
+        Assert.AreEqual(0, carousel.CurrentPage);
+    }
+
+    [TestMethod]
+    public void BitCarouselShouldNavigateWithWheel()
+    {
+        var component = RenderComponent<BitCarouselTest>(parameters =>
+        {
+            parameters.Add(p => p.Wheel, true);
+        });
+
+        component.WaitForAssertion(() => Assert.AreEqual(3, component.FindAll(".bit-csl-dot").Count));
+
+        var container = component.Find(".bit-csl-cnt");
+        var carousel = component.Instance.Carousel;
+
+        container.Wheel(new Microsoft.AspNetCore.Components.Web.WheelEventArgs { DeltaY = 100 });
+
+        component.WaitForAssertion(() => Assert.AreEqual(1, carousel.CurrentPage));
+    }
+
+    [TestMethod]
+    public void BitCarouselShouldIgnoreWheelWhenWheelNotEnabled()
+    {
+        var component = RenderComponent<BitCarouselTest>();
+
+        component.WaitForAssertion(() => Assert.AreEqual(3, component.FindAll(".bit-csl-dot").Count));
+
+        var container = component.Find(".bit-csl-cnt");
+
+        container.Wheel(new Microsoft.AspNetCore.Components.Web.WheelEventArgs { DeltaY = 100 });
+
+        Assert.AreEqual(0, component.Instance.Carousel.CurrentPage);
+    }
+
+    [TestMethod]
+    public void BitCarouselShouldClampDefaultPageToLastPage()
+    {
+        var component = RenderComponent<BitCarouselTest>(parameters =>
+        {
+            parameters.Add(p => p.DefaultPage, 99);
+        });
+
+        component.WaitForAssertion(() => Assert.AreEqual(2, component.Instance.Carousel.CurrentPage));
+    }
+
+    [TestMethod]
+    public async Task BitCarouselShouldKeepLastPageFullWithUnevenItems()
+    {
+        var component = RenderComponent<BitCarouselTest>(parameters =>
+        {
+            parameters.Add(p => p.ItemsCount, 5);
+            parameters.Add(p => p.VisibleItemsCount, 2);
+            parameters.Add(p => p.ScrollItemsCount, 2);
+        });
+
+        component.WaitForAssertion(() => Assert.AreEqual(3, component.Instance.Carousel.PagesCount));
+
+        var carousel = component.Instance.Carousel;
+
+        await component.InvokeAsync(carousel.GoNext);
+        component.WaitForAssertion(() => Assert.AreEqual(1, carousel.CurrentPage));
+
+        // The last move only advances by one item (instead of two), so the last page holds the last
+        // two items instead of the last item and a blank space.
+        await component.InvokeAsync(carousel.GoNext);
+        component.WaitForAssertion(() => Assert.AreEqual(2, carousel.CurrentPage));
+
+        await component.InvokeAsync(carousel.GoNext);
+        component.WaitForAssertion(() => Assert.AreEqual(2, carousel.CurrentPage));
+    }
+
+    [TestMethod]
+    public async Task BitCarouselShouldWrapPartialLastPageWithInfiniteScrolling()
+    {
+        var component = RenderComponent<BitCarouselTest>(parameters =>
+        {
+            parameters.Add(p => p.ItemsCount, 5);
+            parameters.Add(p => p.VisibleItemsCount, 2);
+            parameters.Add(p => p.InfiniteScrolling, true);
+        });
+
+        // An infinite carousel that moves by one item has a page (and a dot) per item.
+        component.WaitForAssertion(() => Assert.AreEqual(5, component.Instance.Carousel.PagesCount));
+
+        var carousel = component.Instance.Carousel;
+
+        // The last page starts on the last item, so its second slot borrows the first item of the carousel.
+        await component.InvokeAsync(() => carousel.GoTo(5));
+
+        component.WaitForAssertion(() =>
+        {
+            Assert.AreEqual(4, carousel.CurrentPage);
+
+            var items = component.FindAll(".bit-crsi");
+            Assert.IsNull(items[4].GetAttribute("aria-hidden"));
+            Assert.IsNull(items[0].GetAttribute("aria-hidden"));
+        });
+
+        await component.InvokeAsync(() => carousel.GoTo(1));
+
+        component.WaitForAssertion(() => Assert.AreEqual(0, carousel.CurrentPage));
+    }
+
+    [TestMethod]
+    public void BitCarouselShouldAutoPlayAdvancePages()
+    {
+        var component = RenderComponent<BitCarouselTest>(parameters =>
+        {
+            parameters.Add(p => p.AutoPlay, true);
+            parameters.Add(p => p.AutoPlayInterval, 50d);
+        });
+
+        var carousel = component.Instance.Carousel;
+
+        component.WaitForAssertion(() => Assert.IsTrue(carousel.CurrentPage > 0), TimeSpan.FromSeconds(5));
+    }
+
+    [TestMethod]
+    public void BitCarouselShouldAutoPlayBackwardsWithAutoPlayReverse()
+    {
+        var component = RenderComponent<BitCarouselTest>(parameters =>
+        {
+            parameters.Add(p => p.AutoPlay, true);
+            parameters.Add(p => p.AutoPlayReverse, true);
+            parameters.Add(p => p.AutoPlayInterval, 50d);
+            parameters.Add(p => p.InfiniteScrolling, true);
+        });
+
+        var carousel = component.Instance.Carousel;
+
+        // Playing backwards from the first page of an infinite carousel wraps around to the last one.
+        component.WaitForAssertion(() => Assert.AreEqual(2, carousel.CurrentPage), TimeSpan.FromSeconds(5));
+    }
+
+    [TestMethod]
+    public void BitCarouselShouldStopAutoPlayOnLastSlide()
+    {
+        var component = RenderComponent<BitCarouselTest>(parameters =>
+        {
+            parameters.Add(p => p.AutoPlay, true);
+            parameters.Add(p => p.StopOnLastSlide, true);
+            parameters.Add(p => p.AutoPlayInterval, 50d);
+        });
+
+        var carousel = component.Instance.Carousel;
+
+        component.WaitForAssertion(() => Assert.AreEqual(2, carousel.CurrentPage), TimeSpan.FromSeconds(5));
+
+        component.WaitForAssertion(() => Assert.IsTrue(carousel.IsPaused), TimeSpan.FromSeconds(5));
+
+        Assert.IsFalse(carousel.IsPlaying);
+        Assert.AreEqual(2, carousel.CurrentPage);
+    }
+
+    [TestMethod]
+    public async Task BitCarouselShouldNotAutoPlayWhilePaused()
+    {
+        var component = RenderComponent<BitCarouselTest>(parameters =>
+        {
+            parameters.Add(p => p.AutoPlay, true);
+            parameters.Add(p => p.AutoPlayInterval, 50d);
+        });
+
+        var carousel = component.Instance.Carousel;
+
+        await component.InvokeAsync(carousel.Pause);
+
+        Assert.IsFalse(carousel.IsPlaying);
+
+        // A few intervals worth of quiet proves the timer is not ticking behind the paused state.
+        await Task.Delay(250);
+
+        Assert.AreEqual(0, carousel.CurrentPage);
+    }
+
+    [TestMethod]
+    public async Task BitCarouselShouldSurviveOnChangeThrowingDuringAutoPlay()
+    {
+        // The timer elapses on a thread pool thread, so an exception the navigation lets through used
+        // to escape the async void handler and take the whole process (this test host included) down.
+        var component = RenderComponent<BitCarouselTest>(parameters =>
+        {
+            parameters.Add(p => p.AutoPlay, true);
+            parameters.Add(p => p.AutoPlayInterval, 50d);
+            parameters.Add(p => p.InfiniteScrolling, true);
+            parameters.Add(p => p.OnChange, (int _) => throw new InvalidOperationException("boom"));
+        });
+
+        var carousel = component.Instance.Carousel;
+
+        // The instance is polled directly (instead of through WaitForAssertion) because the thrown
+        // exception ends up at the renderer, which rethrows it from the render-tree helpers.
+        for (var i = 0; i < 100 && carousel.CurrentPage == 0; i++)
+        {
+            await Task.Delay(50);
+        }
+
+        Assert.IsTrue(carousel.CurrentPage > 0);
+
+        // The test (and the test host) surviving a few more failing ticks is the actual assertion here.
+        await Task.Delay(250);
+    }
+
+    [TestMethod]
+    public async Task BitCarouselShouldHandleEmptyCarouselSafely()
+    {
+        var component = RenderComponent<BitCarouselTest>(parameters =>
+        {
+            parameters.Add(p => p.ItemsCount, 0);
+            parameters.Add(p => p.AutoPlay, true);
+            parameters.Add(p => p.AutoPlayInterval, 50d);
+        });
+
+        var carousel = component.Instance.Carousel;
+
+        Assert.AreEqual(0, carousel.ItemsCount);
+        Assert.AreEqual(0, carousel.PagesCount);
+        Assert.IsFalse(carousel.IsPlaying);
+
+        await component.InvokeAsync(carousel.GoNext);
+        await component.InvokeAsync(carousel.GoPrev);
+        await component.InvokeAsync(() => carousel.GoTo(2));
+
+        // A few intervals worth of quiet proves the timer never starts against an empty carousel.
+        await Task.Delay(250);
+
+        Assert.AreEqual(0, carousel.CurrentPage);
+    }
+
+    [TestMethod]
+    public async Task BitCarouselShouldDropNavigationStartedMidMove()
+    {
+        var component = RenderComponent<BitCarouselTest>();
+
+        component.WaitForAssertion(() => Assert.AreEqual(3, component.FindAll(".bit-csl-dot").Count));
+
+        var carousel = component.Instance.Carousel;
+
+        // The second move starts while the first one is still animating, so it is dropped rather than
+        // applied on top of the half-applied state of the first one.
+        await component.InvokeAsync(() => Task.WhenAll(carousel.GoNext(), carousel.GoNext()));
+
+        component.WaitForAssertion(() => Assert.AreEqual(1, carousel.CurrentPage));
+
+        Assert.AreEqual(1, carousel.CurrentPage);
+    }
+
+    [TestMethod]
+    public async Task BitCarouselShouldClampStateWhenItemsRemoved()
+    {
+        var component = RenderComponent<BitCarouselTest>(parameters =>
+        {
+            parameters.Add(p => p.AutoPlay, true);
+            parameters.Add(p => p.AutoPlayInterval, 50d);
+        });
+
+        component.WaitForAssertion(() => Assert.AreEqual(3, component.FindAll(".bit-csl-dot").Count));
+
+        var carousel = component.Instance.Carousel;
+
+        await component.InvokeAsync(() => carousel.GoTo(3));
+
+        component.WaitForAssertion(() => Assert.AreEqual(2, carousel.CurrentPage));
+
+        component.Render(parameters => parameters.Add(p => p.ItemsCount, 1));
+
+        component.WaitForAssertion(() =>
+        {
+            Assert.AreEqual(1, carousel.ItemsCount);
+            Assert.AreEqual(1, carousel.PagesCount);
+            Assert.AreEqual(0, carousel.CurrentPage);
+        });
+
+        // A single page has nowhere to rotate to, so losing the items also stops the auto play.
+        Assert.IsFalse(carousel.IsPlaying);
+    }
+
+    [TestMethod]
+    public async Task BitCarouselShouldKeepWrappedPageAcrossRefreshWithInfiniteScrolling()
+    {
+        var component = RenderComponent<BitCarouselTest>(parameters =>
+        {
+            parameters.Add(p => p.ItemsCount, 5);
+            parameters.Add(p => p.VisibleItemsCount, 2);
+            parameters.Add(p => p.InfiniteScrolling, true);
+        });
+
+        component.WaitForAssertion(() => Assert.AreEqual(5, component.Instance.Carousel.PagesCount));
+
+        var carousel = component.Instance.Carousel;
+
+        // The last page holds the last item and the first one it borrowed from the other end.
+        await component.InvokeAsync(() => carousel.GoTo(5));
+
+        component.WaitForAssertion(() =>
+        {
+            var items = component.FindAll(".bit-crsi");
+            Assert.IsNull(items[4].GetAttribute("aria-hidden"));
+            Assert.IsNull(items[0].GetAttribute("aria-hidden"));
+        });
+
+        await component.InvokeAsync(carousel.Refresh);
+
+        // A re-layout keeps the borrowed slide on the page instead of cutting it off.
+        component.WaitForAssertion(() =>
+        {
+            Assert.AreEqual(4, carousel.CurrentPage);
+
+            var items = component.FindAll(".bit-crsi");
+            Assert.IsNull(items[4].GetAttribute("aria-hidden"));
+            Assert.IsNull(items[0].GetAttribute("aria-hidden"));
+            Assert.AreEqual("true", items[2].GetAttribute("aria-hidden"));
+        });
+    }
+
+    [TestMethod]
+    [DataRow(0d)]
+    [DataRow(-100d)]
+    [DataRow(double.MaxValue)]
+    public void BitCarouselShouldSurviveUnusableAutoPlayInterval(double interval)
+    {
+        var component = RenderComponent<BitCarouselTest>(parameters =>
+        {
+            parameters.Add(p => p.AutoPlay, true);
+            parameters.Add(p => p.AutoPlayInterval, interval);
+        });
+
+        var carousel = component.Instance.Carousel;
+
+        // The unusable interval is replaced instead of being handed to the timer (which throws on it),
+        // so the auto play still comes up.
+        component.WaitForAssertion(() => Assert.IsTrue(carousel.IsPlaying), TimeSpan.FromSeconds(5));
+    }
+
+    [TestMethod]
+    public async Task BitCarouselShouldAlignLastPageToLastItemOnGoTo()
+    {
+        var component = RenderComponent<BitCarouselTest>(parameters =>
+        {
+            parameters.Add(p => p.ItemsCount, 5);
+            parameters.Add(p => p.VisibleItemsCount, 2);
+            parameters.Add(p => p.ScrollItemsCount, 2);
+        });
+
+        component.WaitForAssertion(() => Assert.AreEqual(3, component.Instance.Carousel.PagesCount));
+
+        var carousel = component.Instance.Carousel;
+
+        await component.InvokeAsync(() => carousel.GoTo(3));
+
+        component.WaitForAssertion(() => Assert.AreEqual(2, carousel.CurrentPage));
+
+        await component.InvokeAsync(() => carousel.GoTo(1));
+
+        component.WaitForAssertion(() => Assert.AreEqual(0, carousel.CurrentPage));
+    }
+
+    [TestMethod]
+    public void BitCarouselShouldPageByTheScrollCount()
+    {
+        var component = RenderComponent<BitCarouselTest>(parameters =>
+        {
+            parameters.Add(p => p.ItemsCount, 9);
+            parameters.Add(p => p.VisibleItemsCount, 3);
+            parameters.Add(p => p.ScrollItemsCount, 1);
+        });
+
+        // A carousel that shows three slides and moves them one at a time stops in seven places, so it
+        // gets a dot per place instead of one per screenful (which the dots could never keep up with).
+        component.WaitForAssertion(() =>
+        {
+            Assert.AreEqual(7, component.Instance.Carousel.PagesCount);
+            Assert.AreEqual(7, component.FindAll(".bit-csl-dot").Count);
+        });
+    }
+
+    [TestMethod]
+    public void BitCarouselShouldPageByTheScreenfulWhenScrollCountMatchesVisibleCount()
+    {
+        var component = RenderComponent<BitCarouselTest>(parameters =>
+        {
+            parameters.Add(p => p.ItemsCount, 9);
+            parameters.Add(p => p.VisibleItemsCount, 3);
+            parameters.Add(p => p.ScrollItemsCount, 3);
+        });
+
+        component.WaitForAssertion(() =>
+        {
+            Assert.AreEqual(3, component.Instance.Carousel.PagesCount);
+            Assert.AreEqual(3, component.FindAll(".bit-csl-dot").Count);
+        });
+    }
+
+    [TestMethod]
+    public async Task BitCarouselShouldTrackTheCurrentPageOnEveryScrollStep()
+    {
+        var changedPages = new List<int>();
+
+        var component = RenderComponent<BitCarouselTest>(parameters =>
+        {
+            parameters.Add(p => p.ItemsCount, 9);
+            parameters.Add(p => p.VisibleItemsCount, 3);
+            parameters.Add(p => p.ScrollItemsCount, 1);
+            parameters.Add(p => p.OnChange, (int page) => changedPages.Add(page));
+        });
+
+        component.WaitForAssertion(() => Assert.AreEqual(7, component.Instance.Carousel.PagesCount));
+
+        var carousel = component.Instance.Carousel;
+
+        await component.InvokeAsync(carousel.GoNext);
+        component.WaitForAssertion(() => Assert.AreEqual(1, carousel.CurrentPage));
+
+        await component.InvokeAsync(carousel.GoNext);
+        component.WaitForAssertion(() => Assert.AreEqual(2, carousel.CurrentPage));
+
+        await component.InvokeAsync(carousel.GoPrev);
+        component.WaitForAssertion(() => Assert.AreEqual(1, carousel.CurrentPage));
+
+        CollectionAssert.AreEqual(new[] { 1, 2, 1 }, changedPages);
+
+        component.WaitForAssertion(() =>
+        {
+            var dots = component.FindAll(".bit-csl-dot");
+            Assert.IsTrue(dots[1].ClassList.Contains("bit-csl-cud"));
+            Assert.AreEqual("true", dots[1].GetAttribute("aria-current"));
+        });
+    }
+
+    [TestMethod]
+    public async Task BitCarouselShouldKeepSharedSlidesWhenJumpingToAnAdjacentPage()
+    {
+        var component = RenderComponent<BitCarouselTest>(parameters =>
+        {
+            parameters.Add(p => p.ItemsCount, 9);
+            parameters.Add(p => p.VisibleItemsCount, 3);
+            parameters.Add(p => p.ScrollItemsCount, 1);
+        });
+
+        component.WaitForAssertion(() => Assert.AreEqual(7, component.Instance.Carousel.PagesCount));
+
+        var carousel = component.Instance.Carousel;
+
+        // Page 2 shows the slides 2, 3 and 4, two of which page 1 was already showing.
+        await component.InvokeAsync(() => carousel.GoTo(2));
+
+        component.WaitForAssertion(() =>
+        {
+            Assert.AreEqual(1, carousel.CurrentPage);
+
+            var items = component.FindAll(".bit-crsi");
+            Assert.AreEqual("true", items[0].GetAttribute("aria-hidden"));
+            Assert.IsNull(items[1].GetAttribute("aria-hidden"));
+            Assert.IsNull(items[2].GetAttribute("aria-hidden"));
+            Assert.IsNull(items[3].GetAttribute("aria-hidden"));
+            Assert.AreEqual("true", items[4].GetAttribute("aria-hidden"));
+        });
+    }
+
+    [TestMethod]
+    public async Task BitCarouselShouldTakeTheShorterWayAroundAnInfiniteLoop()
+    {
+        var component = RenderComponent<BitCarouselTest>(parameters =>
+        {
+            parameters.Add(p => p.ItemsCount, 5);
+            parameters.Add(p => p.InfiniteScrolling, true);
+        });
+
+        component.WaitForAssertion(() => Assert.AreEqual(5, component.Instance.Carousel.PagesCount));
+
+        var carousel = component.Instance.Carousel;
+
+        // The last page is one step back from the first one, so that is the way the carousel goes.
+        await component.InvokeAsync(() => carousel.GoTo(5));
+
+        component.WaitForAssertion(() => Assert.AreEqual(4, carousel.CurrentPage));
+
+        await component.InvokeAsync(() => carousel.GoTo(1));
+
+        component.WaitForAssertion(() => Assert.AreEqual(0, carousel.CurrentPage));
+    }
+
+    [TestMethod]
+    public async Task BitCarouselShouldStepBackOntoThePageGridFromAClampedLastPage()
+    {
+        var component = RenderComponent<BitCarouselTest>(parameters =>
+        {
+            parameters.Add(p => p.ItemsCount, 5);
+            parameters.Add(p => p.VisibleItemsCount, 2);
+            parameters.Add(p => p.ScrollItemsCount, 2);
+        });
+
+        component.WaitForAssertion(() => Assert.AreEqual(3, component.Instance.Carousel.PagesCount));
+
+        var carousel = component.Instance.Carousel;
+
+        await component.InvokeAsync(() => carousel.GoTo(3));
+
+        component.WaitForAssertion(() => Assert.AreEqual(2, carousel.CurrentPage));
+
+        // The last page was pulled back by one item to stay full, so the step off it is one item short.
+        await component.InvokeAsync(carousel.GoPrev);
+
+        component.WaitForAssertion(() =>
+        {
+            Assert.AreEqual(1, carousel.CurrentPage);
+
+            var items = component.FindAll(".bit-crsi");
+            Assert.IsNull(items[2].GetAttribute("aria-hidden"));
+            Assert.IsNull(items[3].GetAttribute("aria-hidden"));
+            Assert.AreEqual("true", items[4].GetAttribute("aria-hidden"));
+        });
+    }
+
+    [TestMethod]
+    public void BitCarouselShouldRenderAriaControlsOnEveryControl()
+    {
+        var component = RenderComponent<BitCarouselTest>(parameters =>
+        {
+            parameters.Add(p => p.AutoPlay, true);
+            parameters.Add(p => p.ShowPlayPause, true);
+        });
+
+        var container = component.Find(".bit-csl-cnt");
+        var containerId = container.GetAttribute("id");
+
+        Assert.IsFalse(string.IsNullOrEmpty(containerId));
+
+        Assert.AreEqual(containerId, component.Find(".bit-csl-lbt").GetAttribute("aria-controls"));
+        Assert.AreEqual(containerId, component.Find(".bit-csl-rbt").GetAttribute("aria-controls"));
+
+        component.WaitForAssertion(() =>
+        {
+            Assert.AreEqual(containerId, component.Find(".bit-csl-ppb").GetAttribute("aria-controls"));
+
+            foreach (var dot in component.FindAll(".bit-csl-dot"))
+            {
+                Assert.AreEqual(containerId, dot.GetAttribute("aria-controls"));
+            }
+        });
+    }
+
+    [TestMethod]
+    public void BitCarouselShouldPutThePlayPauseButtonBeforeTheSlides()
+    {
+        var component = RenderComponent<BitCarouselTest>(parameters =>
+        {
+            parameters.Add(p => p.AutoPlay, true);
+            parameters.Add(p => p.ShowPlayPause, true);
+        });
+
+        // The carousel pattern of the ARIA authoring practices asks for the rotation control to be the
+        // first focusable element of the carousel, so the motion can be stopped before anything else.
+        component.WaitForAssertion(() =>
+        {
+            var root = component.Find(".bit-csl");
+            var focusables = root.QuerySelectorAll("button");
+
+            Assert.IsTrue(focusables.Length > 1);
+            Assert.IsTrue(focusables[0].ClassList.Contains("bit-csl-ppb"));
+        });
+    }
+
+    [TestMethod]
+    public void BitCarouselShouldToggleTheLiveRegionWithTheAutoPlay()
+    {
+        var component = RenderComponent<BitCarouselTest>();
+
+        // A carousel that does not move on its own announces the slide the reader navigated to.
+        Assert.AreEqual("polite", component.Find(".bit-csl-cnt").GetAttribute("aria-live"));
+
+        var playing = RenderComponent<BitCarouselTest>(parameters =>
+        {
+            parameters.Add(p => p.AutoPlay, true);
+            parameters.Add(p => p.AutoPlayInterval, 5000d);
+        });
+
+        // A rotating one would talk over everything else, so it stays quiet until it is paused.
+        playing.WaitForAssertion(() => Assert.AreEqual("off", playing.Find(".bit-csl-cnt").GetAttribute("aria-live")));
+
+        playing.InvokeAsync(playing.Instance.Carousel.Pause);
+
+        playing.WaitForAssertion(() => Assert.AreEqual("polite", playing.Find(".bit-csl-cnt").GetAttribute("aria-live")));
+    }
+
+    [TestMethod]
+    public void BitCarouselShouldRespectItemAriaLabelFormat()
+    {
+        var component = RenderComponent<BitCarouselTest>(parameters =>
+        {
+            parameters.Add(p => p.ItemAriaLabelFormat, "Slide {0} from {1}");
+        });
+
+        var items = component.FindAll(".bit-crsi");
+
+        Assert.AreEqual("Slide 1 from 3", items[0].GetAttribute("aria-label"));
+        Assert.AreEqual("Slide 3 from 3", items[2].GetAttribute("aria-label"));
+    }
+
+    [TestMethod]
+    public void BitCarouselShouldRefreshItemAriaLabelsWhenItemsChange()
+    {
+        var component = RenderComponent<BitCarouselTest>();
+
+        component.WaitForAssertion(() =>
+        {
+            Assert.AreEqual("1 of 3", component.FindAll(".bit-crsi")[0].GetAttribute("aria-label"));
+        });
+
+        component.Render(parameters => parameters.Add(p => p.ItemsCount, 5));
+
+        // The label of a slide counts the slides around it, so the ones that were already there are
+        // brought up to date instead of being left claiming a count the carousel no longer has.
+        component.WaitForAssertion(() =>
+        {
+            var items = component.FindAll(".bit-crsi");
+
+            Assert.AreEqual(5, items.Count);
+            Assert.AreEqual("1 of 5", items[0].GetAttribute("aria-label"));
+            Assert.AreEqual("5 of 5", items[4].GetAttribute("aria-label"));
+        });
+    }
+
+    [TestMethod]
+    public void BitCarouselShouldMarkTheCurrentItems()
+    {
+        var component = RenderComponent<BitCarouselTest>(parameters =>
+        {
+            parameters.Add(p => p.ItemsCount, 4);
+            parameters.Add(p => p.VisibleItemsCount, 2);
+            parameters.Add(p => p.Classes, new BitCarouselClassStyles { CurrentItem = "custom-current-item" });
+            parameters.Add(p => p.Styles, new BitCarouselClassStyles { CurrentItem = "outline: 1px solid red;" });
+        });
+
+        component.WaitForAssertion(() =>
+        {
+            var items = component.FindAll(".bit-crsi");
+
+            Assert.IsTrue(items[0].ClassList.Contains("bit-crsi-cur"));
+            Assert.IsTrue(items[0].ClassList.Contains("custom-current-item"));
+            StringAssert.Contains(items[0].GetAttribute("style"), "outline: 1px solid red;");
+
+            Assert.IsTrue(items[1].ClassList.Contains("bit-crsi-cur"));
+
+            Assert.IsFalse(items[2].ClassList.Contains("bit-crsi-cur"));
+            Assert.IsFalse(items[2].ClassList.Contains("custom-current-item"));
+        });
+    }
+
+    [TestMethod]
+    public void BitCarouselShouldRenderDotTemplate()
+    {
+        var component = RenderComponent<BitCarouselTest>(parameters =>
+        {
+            parameters.Add(p => p.DotTemplate, (int index) => (builder) =>
+            {
+                builder.AddContent(0, $"P{index + 1}");
+            });
+        });
+
+        component.WaitForAssertion(() =>
+        {
+            var dots = component.FindAll(".bit-csl-dot");
+
+            Assert.AreEqual(3, dots.Count);
+            Assert.AreEqual("P1", dots[0].TextContent);
+            Assert.AreEqual("P3", dots[2].TextContent);
+            Assert.IsTrue(dots[0].ClassList.Contains("bit-csl-dtt"));
+
+            // The accessible name of a dot stays the one the carousel gives it, whatever it shows.
+            Assert.AreEqual("Slide 1", dots[0].GetAttribute("aria-label"));
+        });
+    }
+
+    [TestMethod]
+    public void BitCarouselShouldNotMarkPlainDotsAsTemplated()
+    {
+        var component = RenderComponent<BitCarouselTest>();
+
+        component.WaitForAssertion(() =>
+        {
+            Assert.IsFalse(component.FindAll(".bit-csl-dot")[0].ClassList.Contains("bit-csl-dtt"));
+        });
+    }
+
+    [TestMethod]
+    public async Task BitCarouselShouldRespectResponsiveOptions()
+    {
+        var component = RenderComponent<BitCarouselTest>(parameters =>
+        {
+            parameters.Add(p => p.ItemsCount, 6);
+            parameters.Add(p => p.VisibleItemsCount, 3);
+            parameters.Add(p => p.ScrollItemsCount, 3);
+            parameters.Add(p => p.ResponsiveOptions,
+            [
+                new BitCarouselResponsiveOption { Breakpoint = 600, VisibleItemsCount = 1, ScrollItemsCount = 1 },
+                new BitCarouselResponsiveOption { Breakpoint = 900, VisibleItemsCount = 2, ScrollItemsCount = 2 },
+            ]);
+        });
+
+        var carousel = component.Instance.Carousel;
+
+        // Nothing has been measured yet, so the counts of the carousel itself are the ones that apply.
+        component.WaitForAssertion(() => Assert.AreEqual(2, carousel.PagesCount));
+
+        await component.InvokeAsync(() => carousel._OnResize(new ContentRect { Width = 800 }));
+
+        // The narrowest option the carousel still fits in wins: two slides at a time over six items.
+        component.WaitForAssertion(() => Assert.AreEqual(3, carousel.PagesCount));
+
+        await component.InvokeAsync(() => carousel._OnResize(new ContentRect { Width = 500 }));
+
+        component.WaitForAssertion(() => Assert.AreEqual(6, carousel.PagesCount));
+
+        await component.InvokeAsync(() => carousel._OnResize(new ContentRect { Width = 1200 }));
+
+        // A carousel wider than every breakpoint is back to the counts of its own parameters.
+        component.WaitForAssertion(() => Assert.AreEqual(2, carousel.PagesCount));
+    }
+
+    [TestMethod]
+    public async Task BitCarouselShouldNavigateWithDrag()
+    {
+        var component = RenderComponent<BitCarouselTest>();
+
+        component.WaitForAssertion(() => Assert.AreEqual(3, component.FindAll(".bit-csl-dot").Count));
+
+        var container = component.Find(".bit-csl-cnt");
+        var carousel = component.Instance.Carousel;
+
+        await container.PointerDownAsync(new PointerEventArgs { ClientX = 200, ClientY = 100 });
+        await container.PointerMoveAsync(new PointerEventArgs { ClientX = 100, ClientY = 100 });
+
+        component.WaitForAssertion(() => Assert.AreEqual(1, carousel.CurrentPage));
+
+        await container.PointerDownAsync(new PointerEventArgs { ClientX = 100, ClientY = 100 });
+        await container.PointerMoveAsync(new PointerEventArgs { ClientX = 200, ClientY = 100 });
+
+        component.WaitForAssertion(() => Assert.AreEqual(0, carousel.CurrentPage));
+    }
+
+    [TestMethod]
+    public async Task BitCarouselShouldIgnoreDragsShorterThanTheThreshold()
+    {
+        var component = RenderComponent<BitCarouselTest>(parameters =>
+        {
+            parameters.Add(p => p.DragThreshold, 100);
+        });
+
+        component.WaitForAssertion(() => Assert.AreEqual(3, component.FindAll(".bit-csl-dot").Count));
+
+        var container = component.Find(".bit-csl-cnt");
+
+        await container.PointerDownAsync(new PointerEventArgs { ClientX = 200, ClientY = 100 });
+        await container.PointerMoveAsync(new PointerEventArgs { ClientX = 150, ClientY = 100 });
+
+        Assert.AreEqual(0, component.Instance.Carousel.CurrentPage);
+    }
+
+    [TestMethod]
+    public async Task BitCarouselShouldIgnoreDragsAcrossItsAxis()
+    {
+        var component = RenderComponent<BitCarouselTest>();
+
+        component.WaitForAssertion(() => Assert.AreEqual(3, component.FindAll(".bit-csl-dot").Count));
+
+        var container = component.Find(".bit-csl-cnt");
+
+        // A drag that travels further up and down than sideways is a scroll of the page that happens to
+        // pass over the carousel, so it is left alone.
+        await container.PointerDownAsync(new PointerEventArgs { ClientX = 200, ClientY = 100 });
+        await container.PointerMoveAsync(new PointerEventArgs { ClientX = 160, ClientY = 300 });
+
+        Assert.AreEqual(0, component.Instance.Carousel.CurrentPage);
+    }
+
+    [TestMethod]
+    public async Task BitCarouselShouldIgnoreDragWhenNoDrag()
+    {
+        var component = RenderComponent<BitCarouselTest>(parameters =>
+        {
+            parameters.Add(p => p.NoDrag, true);
+        });
+
+        component.WaitForAssertion(() => Assert.AreEqual(3, component.FindAll(".bit-csl-dot").Count));
+
+        var container = component.Find(".bit-csl-cnt");
+
+        await container.PointerDownAsync(new PointerEventArgs { ClientX = 200, ClientY = 100 });
+        await container.PointerMoveAsync(new PointerEventArgs { ClientX = 100, ClientY = 100 });
+
+        Assert.AreEqual(0, component.Instance.Carousel.CurrentPage);
+    }
+
+    [TestMethod]
+    public async Task BitCarouselShouldNavigateWhileFading()
+    {
+        var component = RenderComponent<BitCarouselTest>(parameters =>
+        {
+            parameters.Add(p => p.Fade, true);
+            parameters.Add(p => p.VisibleItemsCount, 3);
+            parameters.Add(p => p.ScrollItemsCount, 3);
+        });
+
+        // A fading carousel shows exactly one slide at a time, whatever it was asked for.
+        component.WaitForAssertion(() => Assert.AreEqual(3, component.Instance.Carousel.PagesCount));
+
+        var carousel = component.Instance.Carousel;
+
+        await component.InvokeAsync(carousel.GoNext);
+
+        component.WaitForAssertion(() =>
+        {
+            Assert.AreEqual(1, carousel.CurrentPage);
+
+            var items = component.FindAll(".bit-crsi");
+            StringAssert.Contains(items[1].GetAttribute("style"), "opacity:1");
+            StringAssert.Contains(items[0].GetAttribute("style"), "opacity:0");
+        });
+    }
+
+    [TestMethod]
+    public void BitCarouselShouldRespectAnimationDuration()
+    {
+        var component = RenderComponent<BitCarouselTest>(parameters =>
+        {
+            parameters.Add(p => p.AnimationDuration, 1.25);
+        });
+
+        StringAssert.Contains(component.Find(".bit-csl").GetAttribute("style"), "--bit-csl-dur-full:1.25s");
+    }
+
+    [TestMethod]
+    public async Task BitCarouselShouldNavigateWithoutAnimation()
+    {
+        var component = RenderComponent<BitCarouselTest>(parameters =>
+        {
+            parameters.Add(p => p.AnimationDuration, 0);
+        });
+
+        component.WaitForAssertion(() => Assert.AreEqual(3, component.FindAll(".bit-csl-dot").Count));
+
+        var carousel = component.Instance.Carousel;
+
+        await component.InvokeAsync(carousel.GoNext);
+
+        Assert.AreEqual(1, carousel.CurrentPage);
+    }
+
+    [TestMethod]
+    public async Task BitCarouselShouldNotPauseOnHoverWhenPauseOnHoverIsOff()
+    {
+        var component = RenderComponent<BitCarouselTest>(parameters =>
+        {
+            parameters.Add(p => p.AutoPlay, true);
+            parameters.Add(p => p.AutoPlayInterval, 5000d);
+            parameters.Add(p => p.PauseOnHover, false);
+        });
+
+        var carousel = component.Instance.Carousel;
+
+        component.WaitForAssertion(() => Assert.IsTrue(carousel.IsPlaying));
+
+        await component.Find(".bit-csl").MouseEnterAsync(new MouseEventArgs());
+
+        Assert.IsTrue(carousel.IsPlaying);
+    }
+
+    [TestMethod]
+    public async Task BitCarouselShouldPauseOnHoverAndResumeOnLeave()
+    {
+        var component = RenderComponent<BitCarouselTest>(parameters =>
+        {
+            parameters.Add(p => p.AutoPlay, true);
+            parameters.Add(p => p.AutoPlayInterval, 5000d);
+        });
+
+        var carousel = component.Instance.Carousel;
+
+        component.WaitForAssertion(() => Assert.IsTrue(carousel.IsPlaying));
+
+        await component.Find(".bit-csl").MouseEnterAsync(new MouseEventArgs());
+
+        component.WaitForAssertion(() => Assert.IsFalse(carousel.IsPlaying));
+
+        // Hovering only holds the rotation, it never counts as taking the carousel over.
+        Assert.IsFalse(carousel.IsPaused);
+
+        await component.Find(".bit-csl").MouseLeaveAsync(new MouseEventArgs());
+
+        component.WaitForAssertion(() => Assert.IsTrue(carousel.IsPlaying));
+    }
+
+    [TestMethod]
+    public async Task BitCarouselShouldPauseOnFocusAndResumeOnBlur()
+    {
+        var component = RenderComponent<BitCarouselTest>(parameters =>
+        {
+            parameters.Add(p => p.AutoPlay, true);
+            parameters.Add(p => p.AutoPlayInterval, 5000d);
+        });
+
+        var carousel = component.Instance.Carousel;
+
+        component.WaitForAssertion(() => Assert.IsTrue(carousel.IsPlaying));
+
+        await component.Find(".bit-csl").FocusInAsync(new FocusEventArgs());
+
+        component.WaitForAssertion(() => Assert.IsFalse(carousel.IsPlaying));
+
+        await component.Find(".bit-csl").FocusOutAsync(new FocusEventArgs());
+
+        component.WaitForAssertion(() => Assert.IsTrue(carousel.IsPlaying));
+    }
+
+    [TestMethod]
+    public async Task BitCarouselShouldNotPauseOnFocusWhenPauseOnFocusIsOff()
+    {
+        var component = RenderComponent<BitCarouselTest>(parameters =>
+        {
+            parameters.Add(p => p.AutoPlay, true);
+            parameters.Add(p => p.AutoPlayInterval, 5000d);
+            parameters.Add(p => p.PauseOnFocus, false);
+        });
+
+        var carousel = component.Instance.Carousel;
+
+        component.WaitForAssertion(() => Assert.IsTrue(carousel.IsPlaying));
+
+        await component.Find(".bit-csl").FocusInAsync(new FocusEventArgs());
+
+        Assert.IsTrue(carousel.IsPlaying);
+    }
+
+    [TestMethod]
+    public async Task BitCarouselShouldTogglePlayFromCode()
+    {
+        var component = RenderComponent<BitCarouselTest>(parameters =>
+        {
+            parameters.Add(p => p.AutoPlay, true);
+            parameters.Add(p => p.AutoPlayInterval, 5000d);
+        });
+
+        var carousel = component.Instance.Carousel;
+
+        component.WaitForAssertion(() => Assert.IsTrue(carousel.IsPlaying));
+
+        await component.InvokeAsync(carousel.TogglePlay);
+
+        Assert.IsTrue(carousel.IsPaused);
+        Assert.IsFalse(carousel.IsPlaying);
+
+        await component.InvokeAsync(carousel.TogglePlay);
+
+        Assert.IsFalse(carousel.IsPaused);
+        Assert.IsTrue(carousel.IsPlaying);
+    }
+
+    [TestMethod]
+    public async Task BitCarouselShouldResumeAfterStopOnInteraction()
+    {
+        var component = RenderComponent<BitCarouselTest>(parameters =>
+        {
+            parameters.Add(p => p.AutoPlay, true);
+            parameters.Add(p => p.AutoPlayInterval, 5000d);
+            parameters.Add(p => p.InfiniteScrolling, true);
+            parameters.Add(p => p.StopOnInteraction, true);
+        });
+
+        component.WaitForAssertion(() => Assert.AreEqual(3, component.FindAll(".bit-csl-dot").Count));
+
+        var carousel = component.Instance.Carousel;
+
+        await component.Find(".bit-csl-lbt").ClickAsync(new MouseEventArgs());
+
+        component.WaitForAssertion(() => Assert.IsTrue(carousel.IsPaused));
+
+        // A carousel that was taken over only starts moving again when it is explicitly told to.
+        await component.InvokeAsync(carousel.Resume);
+
+        Assert.IsFalse(carousel.IsPaused);
+        Assert.IsTrue(carousel.IsPlaying);
+    }
+
+    [TestMethod]
+    public void BitCarouselShouldNavigateWithHorizontalWheel()
+    {
+        var component = RenderComponent<BitCarouselTest>(parameters =>
+        {
+            parameters.Add(p => p.Wheel, true);
+        });
+
+        component.WaitForAssertion(() => Assert.AreEqual(3, component.FindAll(".bit-csl-dot").Count));
+
+        var container = component.Find(".bit-csl-cnt");
+        var carousel = component.Instance.Carousel;
+
+        container.Wheel(new WheelEventArgs { DeltaX = 100 });
+
+        component.WaitForAssertion(() => Assert.AreEqual(1, carousel.CurrentPage));
+    }
+
+    [TestMethod]
+    public void BitCarouselShouldNavigateForwardsWithTheWheelInRtl()
+    {
+        var component = RenderComponent<BitCarouselTest>(parameters =>
+        {
+            parameters.Add(p => p.Wheel, true);
+            parameters.Add(p => p.Dir, BitDir.Rtl);
+        });
+
+        component.WaitForAssertion(() => Assert.AreEqual(3, component.FindAll(".bit-csl-dot").Count));
+
+        var container = component.Find(".bit-csl-cnt");
+        var carousel = component.Instance.Carousel;
+
+        // A wheel is not a grab of the slides (a drag is, and that one follows the layout), so scrolling
+        // away from the reader moves the carousel forwards whichever way its slides are laid out.
+        container.Wheel(new WheelEventArgs { DeltaY = 100 });
+
+        component.WaitForAssertion(() => Assert.AreEqual(1, carousel.CurrentPage));
+
+        // A single flick of a trackpad fires a long tail of events, so the carousel keeps a quiet period
+        // between the moves. The other direction is checked on a carousel of its own because of it.
+        var backwards = RenderComponent<BitCarouselTest>(parameters =>
+        {
+            parameters.Add(p => p.Wheel, true);
+            parameters.Add(p => p.Dir, BitDir.Rtl);
+            parameters.Add(p => p.InfiniteScrolling, true);
+        });
+
+        backwards.WaitForAssertion(() => Assert.AreEqual(3, backwards.FindAll(".bit-csl-dot").Count));
+
+        backwards.Find(".bit-csl-cnt").Wheel(new WheelEventArgs { DeltaY = -100 });
+
+        backwards.WaitForAssertion(() => Assert.AreEqual(2, backwards.Instance.Carousel.CurrentPage));
+    }
+
+    [TestMethod]
+    public async Task BitCarouselShouldFollowTheLayoutWhenDraggedInRtl()
+    {
+        var component = RenderComponent<BitCarouselTest>(parameters =>
+        {
+            parameters.Add(p => p.Dir, BitDir.Rtl);
+        });
+
+        component.WaitForAssertion(() => Assert.AreEqual(3, component.FindAll(".bit-csl-dot").Count));
+
+        var container = component.Find(".bit-csl-cnt");
+        var carousel = component.Instance.Carousel;
+
+        // The next slide of a right-to-left carousel sits on its left, so it is pulled in to the right.
+        await container.PointerDownAsync(new PointerEventArgs { ClientX = 100, ClientY = 100 });
+        await container.PointerMoveAsync(new PointerEventArgs { ClientX = 200, ClientY = 100 });
+
+        component.WaitForAssertion(() => Assert.AreEqual(1, carousel.CurrentPage));
+    }
+
+    [TestMethod]
+    public void BitCarouselShouldHideNextPrevButtonsAtTheEnds()
+    {
+        var component = RenderComponent<BitCarouselTest>();
+
+        component.WaitForAssertion(() => Assert.AreEqual(3, component.FindAll(".bit-csl-dot").Count));
+
+        // The first page cannot go back, so the button that would is out of the way.
+        component.WaitForAssertion(() =>
+        {
+            StringAssert.Contains(component.Find(".bit-csl-rbt").GetAttribute("style"), "display:none");
+            Assert.IsFalse(component.Find(".bit-csl-lbt").GetAttribute("style")!.Contains("display:none"));
+        });
+
+        component.FindAll(".bit-csl-dot")[2].Click();
+
+        component.WaitForAssertion(() =>
+        {
+            StringAssert.Contains(component.Find(".bit-csl-lbt").GetAttribute("style"), "display:none");
+            Assert.IsFalse(component.Find(".bit-csl-rbt").GetAttribute("style")!.Contains("display:none"));
+        });
+    }
+
+    [TestMethod]
+    public void BitCarouselShouldKeepBothNextPrevButtonsWithInfiniteScrolling()
+    {
+        var component = RenderComponent<BitCarouselTest>(parameters =>
+        {
+            parameters.Add(p => p.InfiniteScrolling, true);
+        });
+
+        component.WaitForAssertion(() =>
+        {
+            Assert.IsFalse(component.Find(".bit-csl-lbt").GetAttribute("style")!.Contains("display:none"));
+            Assert.IsFalse(component.Find(".bit-csl-rbt").GetAttribute("style")!.Contains("display:none"));
+        });
+    }
+
+    [TestMethod]
+    public void BitCarouselShouldRespectAriaLabel()
+    {
+        var component = RenderComponent<BitCarouselTest>(parameters =>
+        {
+            parameters.Add(p => p.AriaLabel, "Our latest work");
+            parameters.Add(p => p.DotsAriaLabel, "Pick a project");
+        });
+
+        Assert.AreEqual("Our latest work", component.Find(".bit-csl").GetAttribute("aria-label"));
+
+        component.WaitForAssertion(() =>
+        {
+            Assert.AreEqual("Pick a project", component.Find(".bit-csl-dts").GetAttribute("aria-label"));
+        });
+    }
+
+    [TestMethod]
+    public async Task BitCarouselShouldNotNavigateWhenDisabled()
+    {
+        var component = RenderComponent<BitCarouselTest>(parameters =>
+        {
+            parameters.Add(p => p.IsEnabled, false);
+        });
+
+        var carousel = component.Instance.Carousel;
+
+        await component.InvokeAsync(carousel.GoNext);
+        await component.InvokeAsync(() => carousel.GoTo(3));
+
+        Assert.AreEqual(0, carousel.CurrentPage);
+
+        component.Find(".bit-csl").KeyDown(new KeyboardEventArgs { Key = "ArrowRight" });
+
+        Assert.AreEqual(0, carousel.CurrentPage);
+    }
+
+    [TestMethod]
+    public void BitCarouselShouldNotAutoPlayWhenDisabled()
+    {
+        var component = RenderComponent<BitCarouselTest>(parameters =>
+        {
+            parameters.Add(p => p.IsEnabled, false);
+            parameters.Add(p => p.AutoPlay, true);
+            parameters.Add(p => p.AutoPlayInterval, 50d);
+        });
+
+        Assert.IsFalse(component.Instance.Carousel.IsPlaying);
+    }
+
+    [TestMethod]
+    public void BitCarouselShouldNotNavigateWithKeyboardWhenNoKeyboard()
+    {
+        var component = RenderComponent<BitCarouselTest>(parameters =>
+        {
+            parameters.Add(p => p.NoKeyboard, true);
+        });
+
+        component.WaitForAssertion(() => Assert.AreEqual(3, component.FindAll(".bit-csl-dot").Count));
+
+        component.Find(".bit-csl").KeyDown(new KeyboardEventArgs { Key = "ArrowRight" });
+
+        Assert.AreEqual(0, component.Instance.Carousel.CurrentPage);
+    }
 }