Carousel

Carousel Component

A slideshow component for cycling through elements with virtually any kind of content.

Inheritance

Carousel : BootstrapComponentBase

Parameters

Name	Type	Description
AutoStart	bool	Specifies whether the carousel should start automatically when loaded.
ImageUrls	string[]	An array of URLs pointing to images to show in the carousel.
Interval	int	The number of milliseconds each slide should be shown. The default is 5000ms.
ShowControls	bool	Specifies whether to show to controls on the carousel that allows the user to navigate to the next or previous slide.
ShowIndicators	bool	Specifies whether to show an indicator for each slide.
TransitionType	CarouselTransitionType	Specifies how to transition from one slide to the other. The default is CarouselTransitionType.Slide.

Properties

Name	Type	Description
SlideCount	int	Returns the number of slides currenty loaded into the carousel.

Events

Name	Argument Type	Description
OnSlide	CarouselSlideEventArgs	Fired when the transition from one slide to another has started, but before it is completed.
OnSlid	CarouselSlideEventArgs	Fired when the transition from one slide to another has completed.

Methods

CycleAsync()

Starts cycling through the slides in the carousel.

Task<int?> GetSlideCountAsync()

Returns the number of slides currently loaded into the carousel.

GoToSlideAsync(int slideNumber)

Moves the carousel to the given slide.

• slideNumber - The zero-based index of the slide to move to.

PauseAsync()

Pauses the cycling of slides. The cycling can still be controlled with the other methods. Start auto cycling again with the CycleAsync() method.

NextAsync()

Moves the carousel to the next slide. If the carousel is on the last slide, it will move to the first.

PreviousAsync()

Moves the carousel to the previous slide. If the carousel is on the first slide, it will move to the last.

Related Components

The following components are typically used with a Carousel component.

• CarouselItem

Examples

Below are a few examples of how to use the Carousel component.

Images Only

If you only want to show a deck of images, you can use the ImageUrls property. The sample below will also prevent the carousel from starting automatically, and it will show the controls and indicators on the images.

<Carousel
    AutoStart="false"
    ShowControls="true"
    ShowIndicators="true"
    ImageUrls='@(new[] { "...", "...", "..." })'
/>

Adding Captions to Images

In addition to only images, you can specify captions that are shown over your images. This sample also uses the CarouselItem component.

<Carousel Interval="2000">
    <CarouselItem
        CaptionHeading="The Image"
        CaptionBody="This is the body text of the caption"
        ImageUrl="..."
    />
    <CarouselItem
        CaptionHeading="Another Image"
        CaptionBody="Here's the second image in the slide deck"
        ImageUrl="..."
    />
</Carousel>

Responding to Events

This code demonstrates how you can respond to the events that the Carousel component exposes. The two event hanlders below just show you how you can do a synchronous or asynchronous event handler. Choose which suits you best.

@code {
    public void DoStuff(CarouselSlideEventArgs e)
    {
        // Do stuff here
    }

    public async Task DoStuffAsync(CarouselSlideEventArgs e)
    {
        // Do stuff here
    }
}

<Carousel
    OnSlide="(e) => { DoStuff(e); }"
    OnSlid="async (e) => { await DoStuffAsync(e); }"
/>

Custom Content

The sample below shows you how you can add just about any content to your carousel. This sample uses the Jumbotron and Card components.

<Carousel>
    <CarouselItem>
        <Jumbotron
            Heading="Custom Carousel Slide"
            Lead="How to use a Jumbotron component as a slide in a Carousel component."
        />
    </CarouselItem>
    <CarouselItem>
        <Card
            Header="Card Slide Item"
            Title="Card in a Carousel"
            Text="Here we have a card inside of a Carousel component."
        />
    </CarouselItem>
</Carousel>