Adding Bootstrap components: Carousel

To exhibit the photographic wares, we need a gallery. To implement the gallery feature, we will integrate Bootstrap’s carousel component. The carousel acts as a slideshow, with a list of nested elements as the slides.

Let’s add a carousel, with three slides, to the Gallery section:

<h3>Gallery</h3>

<img

class=”d-block img-fluid”

src=”images/brazil.png”>

<div class=”carousel-caption”> Brazil

</div>

<img

class=”d-block img-fluid”

src=”images/datsun.png”>

<div class=”carousel-caption”> Datsun 260Z

</div>

<img

class=”d-block img-fluid”

src=”images/skydive.png”>

<div class=”carousel-caption”> Skydive</div>

</div>

</a>

</a>

</ol>

</div>

Take a look at figure 3.10:

Figure 3.10: Using the Bootstrap carousel to display a gallery of images. Note the arrows on both sides of the images; these are the carousel controls that allow users to navigate the

Now, we have a fully functioning, three-slide gallery. Let’s break down what is happening here.

First, we declare the carousel parent tag:

We give the div an id that can be referenced by its nested elements, such as the carousel indicators. We use Bootstrap’s carousel and slide classes. The data-ride=”carousel” attribute indicates that the carousel is to automatically initialize on page load. The data- interval attribute indicates that the slides should change every 4000 ms. There are other options such as data-pause, which will indicate whether or not the carousel should pause on hover. The default value is hover; to prevent pausing, set this option to false. The data-wrap is a Boolean attribute to indicate whether the carousel should be a continuous loop or should end once the last slide has been reached. The default value for data-wrap is true. The data-keyboard is also a Boolean attribute to indicate whether or not the carousel is keyboard-controllable. The default value for data-keyboard is true.

Then, we add the actual slides. The slides are nested within a carousel-inner element, to contain the slides. The slides are also div elements, with the carousel-item class, and the active class to indicate which slide to show on initialization:

<div class=”carousel-caption”> Skydiving </div>

</div>

Within the div, we have an image element to act as the main content for the slide, and it has a sibling carousel-caption element, which is exactly what it sounds like—a caption for the slide. The carousel-caption element can contain nested elements.

Next, we add the right and left arrows for navigating through the slides:

</a>

Note that, optionally, we can include a string in order to make the control for showing the previous image more accessible:

<span class=”icon-prev” aria-hidden=”true”>Previous</span>

</a>

These are simple anchor tags leveraging Bootstrap’s directional and carousel-control classes. The data-slide attribute indicates whether we want to cycle backward or forward through the list of slides. The data-slide can take the value prev for previous, or next. Nested within the anchor tag is a span simply applying the icon-prev and icon-next classes as directional indicators.

Finally, we declare the carousel-indicators:

<li

data-target=”#gallery-carousel”

data-slide-to=”0″

class=”active”>

</li>

</ol>

The indicators are bars layered on the slideshow, indicating which slide is currently active. For example, if the second slide is active, then the second bar will be filled. It is mandatory to indicate which slide is active on initialization by setting class=”active” on that element. The data-slide-to attribute indicates which slide the bar relates to, so if a user clicks on a bar with data-slide-to=”2″, the third slide becomes active, as the count for the slides begins at 0. Some Bootstrap framework ports—for example, Angular Bootstrap, will automatically generate the carousel indicators based on the number of slides the carousel contains, but using vanilla Bootstrap, the list has to be created and maintained manually.

With that, we now have a fully-functioning carousel as our Gallery, requiring very little markup, thanks to the power of Bootstrap.

Source: Jakobus Benjamin, Marah Jason (2018), Mastering Bootstrap 4: Master the latest version of Bootstrap 4 to build highly customized responsive web apps, Packt Publishing; 2nd Revised edition.

Leave a Reply Cancel reply

Login