Carousel

One of the most popular components in Bootstrap is the Carousel, which allows you to display much content in a concise area.

Carousel

• carousel

  • data-bs-ride slide carousel-fade

• carousel-inner

  • carousel-item
  • class="d-block w-100" active

Try it

The basic carousel has three parts to it.

A main container with a class of carousel which should have a unique ID assigned. To get the carousel to work, you have to add a data-bs-ride of carousel property. The images will change evert five seconds by default.

There should be a section with the images called carousel-inner. Each image gets a carousel-item class. The image you want to show should have an active class. To make the images fit in their containers, you can add a d-block class and w-100.

Button Controls

carousel-control-{TYP}

• TYP: prev next
  • Tags: data-bs-target="ID" data-bs-slide="{prev|next}"
  • Icon: carousel-control-{prev|next}-icon

Try it

It's pretty common to add buttons to your carousels so you can manually move between images. To do this, you add a couple of buttons with a class of carousel-control and then prev or next.

You have to inclue a data-bs-target with the id of the carousel you're targeting. This finally, gets activated with a data-bs-slide of either prev or next.

Inside these containers, you can include a reference to a pre-built icon with the proper class. Make sure you hide the icons from assistive devices with an aria-hidden property of true.

Notice that the buttons are clickable on the entire left or right side of the carousel area. Honestly, most of the time you'll just be copying this code.

Also, notice where these buttons go. They're at the same level as the carousel-inner class. It's easy to misplace these when pasting them from somewhere else.

Indicator Controls

• carousel-indicators
  • Options: data-bs-target="ID" data-bs-slide-to="#" aria-label="Label"
  • Current: class="active" aria-current="true"

Try it

Although controls are usually coded at the top of carousels, they appear at the bottom and unlike the arrow buttons, they appear inside a container with a class of carousel-indicators.

Inside, a series of buttons...one for each slide and a data-bs-target that points to the carousel's id and a data-bs-slide-to class that points to the ID of the current carousel. In JavaScript, arrays are zero indexed, so here you'd put 0 for the first slide 1 for the second a so on. Each slide gets an aria-label with an identifier for the slide.

In addition, whichever slide you make appear first, you add a class of active, then aria-current of true.

Carousel Options

• carousel-caption

• carousel-dark

Try it

There's a couple of other options you can use when building carousels. You can add a caption to each image by using the carousel-caption container and then adding any type of text. The captions align to the bottom with some spare room.

The other option is to show a dark version of carousel controls and captions instead of the usual white ones. Sometimes that will work better and sometimes not.

Carousel Interactivity

data-bs-{TYP}

• ride(bool|carousel) interval (ms|false) pause(hover)

• wrap keyboard touch

Try it

You can control carousels through data attributes that start with data-bs and then an attribute type. Each of these has defaults.

data-bs-ride - by setting this to true, carousels are set to animate will advance once the user changes the first item through arrows or indicators. If you set this value to false, they will stop playing, or if you set it to carousel, it will auto play the slideshow.

data-bs-interval - How long to wait before changing to another slide. This is expressed in milliseconds and the default is 5000. You can add a delay to either the whole slideshow or to each individual slide.

data-bs-pause - You can ask a carousel to stop cycling if you set this attribute to hover. That can be useful with large carousels that take up the entire viewport.

data-bs-wrap - By default, a true value here will cause the carousels to cycle to the first slide once the last slide is reached. If you set this to off, it creates a hard stop at the beginning and end.

data-bs-keyboard This is a boolean that lets you turn keyboard control off by setting it to false.

data-bs-touch - This boolean can allow let you turn off touch events by setting it to false.