There are times that we want to showcase a group of images but not want to have our users scroll through one picture on top of another. Instead, we could fit our images into a slideshow using Bootstrap’s carousel component.
Bootstrap has many carousel examples but let’s go through a basic example together:
<div id="carouselExampleSlidesOnly" class="carousel slide" data-ride="carousel"> <div class="carousel-inner"> <div class="carousel-item active"> <img class="d-block w-100" src="example_slide_1.png" alt="First slide"> </div> <div class="carousel-item"> <img class="d-block w-100" src="example_slide_2.png" alt="Second slide"> </div> </div> </div>
The example above will render a slideshow that loops through two images, displaying one at a time. In the actual code:
- The parent
<div>element has an
"carouselExampleSlidesOnly", two classes
"slide", and the attribute
idis used later when we want to add controls to click between slides.
- The classes provide the styling and formatting.
data-rideattribute provides the interactivity and slide transitions.
- We also have a nested
<div class="carousel-inner">element that contains other
<div>elements with images.
- Nested inside the 2nd
<div>is yet another
<div>with a class of
"active"(only one image needs the active class, if none have active, no images are shown).
.carousel-itemhas a nested
<img>element which have the usual
<img>elements use two utility classes
"d-block"sets its display as block and the
"w-100"is to take up 100% of the width.
Now, let’s implement a carousel with arrows that control the slideshow.
The HTML skeleton of a carousel is already in index.html but you need to add the appropriate class values to the
<div> elements. The parent
<div> element should also have a
data-ride attribute with the appropriate value.
Look over Bootstrap’s slides only example for reference.
Now that the carousel is in place, let’s add some controls for users to click through the slides.
You have to use Bootstrap’s with controls example to implement this feature. Check out the hint for additional help!