Basic usage

Slide one

<BOBCarousel @bind-ActiveIndex="_basicIndex">
    <BOBCarouselItem>
        <div class="demo-slide demo-slide--blue">Slide one</div>
    </BOBCarouselItem>
    <BOBCarouselItem>
        <div class="demo-slide demo-slide--green">Slide two</div>
    </BOBCarouselItem>
    <BOBCarouselItem>
        <div class="demo-slide demo-slide--purple">Slide three</div>
    </BOBCarouselItem>
</BOBCarousel>

Auto-play

Advances every 3 seconds. Pauses on hover or focus.

Auto 1

<BOBCarousel AutoPlay="true" AutoPlayInterval="@TimeSpan.FromSeconds(3)" Loop="true">
    <BOBCarouselItem>
        <div class="demo-slide demo-slide--blue">Auto 1</div>
    </BOBCarouselItem>
    <BOBCarouselItem>
        <div class="demo-slide demo-slide--green">Auto 2</div>
    </BOBCarouselItem>
    <BOBCarouselItem>
        <div class="demo-slide demo-slide--purple">Auto 3</div>
    </BOBCarouselItem>
</BOBCarousel>

Seamless loop

With Loop=true and Slide transition, a clone of the first slide is rendered after the last (and vice versa). Going from the last to the first looks like a continuous wrap rather than a jump back.

A — try clicking next from the last slide

<BOBCarousel Loop="true" TransitionDurationMs="500">
    <BOBCarouselItem AriaLabel="Wrap A">
        <div class="demo-slide demo-slide--blue">A — try clicking next from the last slide</div>
    </BOBCarouselItem>
    <BOBCarouselItem AriaLabel="Wrap B">
        <div class="demo-slide demo-slide--green">B</div>
    </BOBCarouselItem>
    <BOBCarouselItem AriaLabel="Wrap C">
        <div class="demo-slide demo-slide--purple">C</div>
    </BOBCarouselItem>
</BOBCarousel>

Fade transition

Fade A

<BOBCarousel Transition="BOBCarouselTransition.Fade">
    <BOBCarouselItem>
        <div class="demo-slide demo-slide--blue">Fade A</div>
    </BOBCarouselItem>
    <BOBCarouselItem>
        <div class="demo-slide demo-slide--green">Fade B</div>
    </BOBCarouselItem>
    <BOBCarouselItem>
        <div class="demo-slide demo-slide--purple">Fade C</div>
    </BOBCarouselItem>
</BOBCarousel>

Wheel (3D cylinder)

Slides arranged on a vertical cylinder that rotates around the Y axis. Side slides peek in from behind the active one as the wheel spins. Tune WheelRadiusPx to change how deep the back slides sit.

Wheel 1

<BOBCarousel Transition="BOBCarouselTransition.Wheel" Loop="true" WheelRadiusPx="320">
    <BOBCarouselItem>
        <div class="demo-slide demo-slide--blue">Wheel 1</div>
    </BOBCarouselItem>
    <BOBCarouselItem>
        <div class="demo-slide demo-slide--green">Wheel 2</div>
    </BOBCarouselItem>
    <BOBCarouselItem>
        <div class="demo-slide demo-slide--purple">Wheel 3</div>
    </BOBCarouselItem>
    <BOBCarouselItem>
        <div class="demo-slide demo-slide--orange">Wheel 4</div>
    </BOBCarouselItem>
    <BOBCarouselItem>
        <div class="demo-slide demo-slide--teal">Wheel 5</div>
    </BOBCarouselItem>
    <BOBCarouselItem>
        <div class="demo-slide demo-slide--blue">Wheel 6</div>
    </BOBCarouselItem>
</BOBCarousel>

Wheel 3D (continuous perspective)

Several slides visible at once with a fixed inward tilt. Side slides keep their size — the carousel always feels 3D, with depth at the sides instead of behind the active slide.

3D 1

<BOBCarousel Transition="BOBCarouselTransition.Wheel3D" Loop="true">
    <BOBCarouselItem>
        <div class="demo-slide demo-slide--blue">3D 1</div>
    </BOBCarouselItem>
    <BOBCarouselItem>
        <div class="demo-slide demo-slide--green">3D 2</div>
    </BOBCarouselItem>
    <BOBCarouselItem>
        <div class="demo-slide demo-slide--purple">3D 3</div>
    </BOBCarouselItem>
    <BOBCarouselItem>
        <div class="demo-slide demo-slide--orange">3D 4</div>
    </BOBCarouselItem>
    <BOBCarouselItem>
        <div class="demo-slide demo-slide--teal">3D 5</div>
    </BOBCarouselItem>
    <BOBCarouselItem>
        <div class="demo-slide demo-slide--blue">3D 6</div>
    </BOBCarouselItem>
    <BOBCarouselItem>
        <div class="demo-slide demo-slide--green">3D 7</div>
    </BOBCarouselItem>
</BOBCarousel>

Coverflow 3D

Side slides recede with a 3D rotation. The active slide stays in front; neighbours rotate, scale and fade.

Cover 1

<BOBCarousel Transition="BOBCarouselTransition.Coverflow" Loop="true">
    <BOBCarouselItem>
        <div class="demo-slide demo-slide--blue">Cover 1</div>
    </BOBCarouselItem>
    <BOBCarouselItem>
        <div class="demo-slide demo-slide--green">Cover 2</div>
    </BOBCarouselItem>
    <BOBCarouselItem>
        <div class="demo-slide demo-slide--purple">Cover 3</div>
    </BOBCarouselItem>
    <BOBCarouselItem>
        <div class="demo-slide demo-slide--orange">Cover 4</div>
    </BOBCarouselItem>
    <BOBCarouselItem>
        <div class="demo-slide demo-slide--teal">Cover 5</div>
    </BOBCarouselItem>
</BOBCarousel>

Indicator icons

Inactive indicators use IndicatorIcon; the active one can override via ActiveIndicatorIcon + ActiveIndicatorIconColor.

<BOBCarousel IndicatorIcon="@BOBIconKeys.UI.Plus"
             IndicatorIconColor="var(--palette-surface-contrast)"
             ActiveIndicatorIcon="@BOBIconKeys.UI.Close"
             ActiveIndicatorIconColor="var(--palette-primary)">
    <BOBCarouselItem>
        <div class="demo-slide demo-slide--blue">A</div>
    </BOBCarouselItem>
    <BOBCarouselItem>
        <div class="demo-slide demo-slide--green">B</div>
    </BOBCarouselItem>
    <BOBCarouselItem>
        <div class="demo-slide demo-slide--purple">C</div>
    </BOBCarouselItem>
</BOBCarousel>

Properties

BOBCarousel

Property	Type	Default	Description
`ChildContent`	`RenderFragment?`		Markup that emits the slides (typically <BOBCarouselItem> children).
`ActiveIndex`	`int`		Index of the currently visible slide.
`ActiveIndexChanged`	`EventCallback<int>`		Raised when changes via user interaction or auto-play.
`AutoPlay`	`bool`		When , the carousel advances automatically every .
`AutoPlayInterval`	`TimeSpan`	`TimeSpan.FromSeconds(5)`	Time between automatic transitions when is enabled. Defaults to 5 seconds.
`Loop`	`bool`		/// When , navigation wraps around at both ends. With /// the carousel renders cloned slides at the /// boundaries so wrap-around feels continuous (no jump back to the start). ///
`ShowArrows`	`bool`	`true`	When (default), the previous/next arrow buttons are visible.
`ShowIndicators`	`bool`	`true`	When (default), the slide indicators row is visible.
`IndicatorIcon`	`IconKey?`		/// Optional icon used for non-active slide indicators. When (default), /// a CSS dot is rendered for inactive slides. ///
`IndicatorIconColor`	`string?`		Color applied to the inactive-indicator icon. Accepts any valid CSS color value.
`ActiveIndicatorIcon`	`IconKey?`		/// Optional icon override for the active slide indicator. When , /// the active indicator uses (or the default dot). ///
`ActiveIndicatorIconColor`	`string?`		Color applied to the active-indicator icon. Falls back to .
`ArrowIconLeft`	`IconKey?`		Icon for the previous-slide arrow. Defaults to .UI.ChevronLeft.
`ArrowIconRight`	`IconKey?`		Icon for the next-slide arrow. Defaults to .UI.ChevronRight.
`Transition`	`BOBCarouselTransition`	`BOBCarouselTransition.Slide`	Visual transition between slides. Defaults to .
`PreviousLabel`	`string`	`"Previous slide"`	Accessible label for the previous-slide arrow. Defaults to "Previous slide".
`NextLabel`	`string`	`"Next slide"`	Accessible label for the next-slide arrow. Defaults to "Next slide".
`SwipeThresholdPx`	`int`	`50`	Pixel distance a horizontal swipe must cover before it triggers slide navigation. Defaults to 50.
`Size`	`BOBSize`	`BOBSize.Medium`	Visual size of the carousel.
`TransitionDurationMs`	`int`	`350`	/// Duration of the slide transition in milliseconds. Drives both the CSS animation and the /// post-animation snap-back used by the looping wrap behaviour. Defaults to 350. ///
`WheelRadiusPx`	`int`	`280`	/// Radius (in pixels) of the cylinder used by . /// Larger values push the side slides further behind the active one. Defaults to 280. ///

BOBCarouselItem

Property	Type	Default	Description
`ChildContent`	`RenderFragment?`		Slide content.
`AriaLabel`	`string?`		Optional accessible label for the slide. Falls back to "Slide N of M" when null.