Carousel indicators in Bootsrap - Cheat Sheet & Quick Revision

Recall & Review

beginner

What are carousel indicators in Bootstrap?

Carousel indicators are small clickable buttons or dots that show which slide is currently active in a Bootstrap carousel. They help users navigate between slides easily.

beginner

How do you link carousel indicators to specific slides in Bootstrap?

Each indicator button uses the data-bs-target attribute to point to the carousel's ID and the data-bs-slide-to attribute to specify the slide number (starting from 0).

intermediate

Why is the aria-current="true" attribute used on a carousel indicator?

It marks the active indicator for screen readers, improving accessibility by telling users which slide is currently shown.

beginner

What role does the <code>active</code> class play in carousel indicators?

The <code>active</code> class highlights the current indicator visually, showing which slide is active in the carousel.

intermediate

How can you make carousel indicators keyboard accessible?

Bootstrap's carousel indicators are buttons by default, so they can be focused and activated using keyboard keys like Tab and Enter, supporting keyboard navigation.

Which attribute connects a carousel indicator to the carousel element?

A data-bs-target

B data-slide

C href

D id

The data-bs-target attribute points to the carousel's ID, linking the indicator to the carousel.

What value does data-bs-slide-to use to indicate the first slide?

A 1

B first

C -1

D 0

Slide numbering starts at 0, so the first slide uses data-bs-slide-to="0".

Which class marks the active carousel indicator?

A active

B selected

C current

D highlight

The active class visually highlights the current indicator.

Why are carousel indicators usually buttons instead of links?

A Links are deprecated in Bootstrap

B Links cannot be styled

C Buttons support keyboard focus and activation better

D Buttons load faster

Buttons are better for accessibility because they support keyboard navigation and activation.

What does the aria-current="true" attribute do on an indicator?

A Disables the indicator

B Marks it as the current slide for screen readers

C Changes its color

D Makes it clickable

aria-current="true" tells assistive technologies which indicator is active.

Explain how carousel indicators work in Bootstrap and how they improve user experience.

Think about how users know which slide is active and how they can jump to another slide.

Describe the accessibility features you should include when creating carousel indicators.

Consider how people using keyboards or screen readers interact with the carousel.