The carousel is a slideshow for cycling through a series of content, built with CSS 3D transforms and JavaScript. Carousels use a series of images, text, or custom markup. They also include support for previous/next controls and indicators.
Carousels allow multiple pieces of content to occupy a single, coveted space. Good navigation and content can help make the carousel an effective UI component.
Carousels should follow these guidelines:
Include 5 or fewer frames within the carousel, as it’s unlikely users will engage with more than that.
Indicate how many frames are present and where the user is within the progression, to help people feel in control.
Use icons and links that are understandable and recognizable.
Ensure that navigation controls appear inside the carousel, not below it or separated by a fold.
Make links and buttons large enough to decipher and click.
Add captions to your slides easily with the .carousel-caption element within any .carousel-item. They can be easily hidden on smaller viewports, as shown below, with optional display utilities. We hide them initially with .d-none and bring them back on medium-sized devices with .d-md-block.
Item 1 title
Lorem ipsum dolor sit amet, consectetur adipiscing elit.
Item 2 title
Nulla vitae elit libero, a pharetra augue mollis interdum.
Item 3 title
Praesent commodo cursus magna, vel scelerisque nisl consectetur.
