Bootstrap 4 Components
Carousel
Carousel is a slideshow of contents like images, text or custom markup that cycle through, sliding in, pausing and then sliding out one after the other. It includes controls that enable the user to scroll the content backward or forward.
So let’s create a carousel with slides only. With no controls or indicators. The images only slide after one another.
Let’s see how it’s done.
Create an outer container with a <div> element with classes .carousel
and .slide
and give it an id. Now include all the carousel items, in this case, images, inside the container with each having a class .carousel-item
. Now wrap all these carousel items inside another <div> element within the container with class .carousel-inner
.
Add the class .active
to one of the carousel items. This marks the initial slide of the carousel. If this class is not applied carousel will not be visible.
This should create a simple carousel with images sliding out one after the other.
Note: .d-block
and .img-fluid
on carousel images to prevent the browser default image alignment.
Previous/Next
Now, let’s create a carousel with controls in which we can scroll our carousel items back and forth.
Use an <a> element for the “previous” or “next” controls. For “previous” button use classes .carousel-control-prev
and for the “next” button use class .carousel-control-next.
Indicators
Now we can add the indicators for the carousel.
For adding the indicators we need an ordered list <ol> with class .carousel-indicators
and list items with attributes data-target
and data-slide-to
.
Captions
Now let’s add captions to the images. You can add captions to the images using the class .carousel-caption
inside each carousel item.
Note: Captions can be hidden on smaller viewports by adding BootStrap 4 display utility classes.