Lesson 12 - Bootstrap - Carousels and Progress
In the previous lesson, Bootstrap - Cards, we focused on cards. In today's tutorial about the Bootstrap CSS framework we're going to cover 2 more components - Carousels and Progress.
Carousels
Carousels are components used for switching between contents. You have surely came across them at some websites, we use them widely even here at ICT.social. Sometimes, these components are also called sliders, slideshows, cycles and such. The most popular usage is probably to present photos or screenshots where the carousel occupies space for just a single image and the other images will switch. As you probably suspect already, Bootstrap allows us to put any HTML content inside Carousels.
Carousels typically show "back", respectively "forward" arrows and a slide indicator in the bottom part. The slides can switch between each other after some time interval which is the default behavior, or we can let the user switch between them manually. If the browser supports Page Visibility API, slides don't automatically switch when the browser is currently inactive (e.g. minimized).
Example
Let's showcase everything we can put inside one Carousel. You can then delete any parts of the code you don't find useful.
<div id="carousel-example" class="carousel slide" data-ride="carousel"> <ol class="carousel-indicators"> <li data-target="#carousel-example" data-slide-to="0" class="active"></li> <li data-target="#carousel-example" data-slide-to="1"></li> <li data-target="#carousel-example" data-slide-to="2"></li> </ol> <div class="carousel-inner"> <div class="carousel-item active"> <img class="d-block w-100" src="https://www.ict.social/images/1/css/bootstrap/background_woods.jpeg" alt="Woods"> <div class="carousel-caption d-none d-md-block"> <h3>Woods</h3> <p>Do you know you can rest from information technology by going to woods? :) Bear Mountain State Park is very pretty.</p> </div> </div> <div class="carousel-item"> <img class="d-block w-100" src="https://www.ict.social/images/1/css/bootstrap/background_desert.jpeg" alt="Desert"> <div class="carousel-caption d-none d-md-block"> <h3>Desert</h3> <p>Wind in desert ambushes, in sand hunting a hat. Made it hide in bushes, the tattered black hat.</p> </div> </div> <div class="carousel-item"> <img class="d-block w-100" src="https://www.ict.social/images/1/css/bootstrap/background_lake.jpeg" alt="Lake"> <div class="carousel-caption d-none d-md-block"> <h3>Lake</h3> <p>Lakes are very common in poetry, probably for the feelings based upon the calm large surface of the water.</p> </div> </div> </div> <a class="carousel-control-prev" href="#carousel-example" role="button" data-slide="prev"> <span class="carousel-control-prev-icon" aria-hidden="true"></span> <span class="sr-only">Previous</span> </a> <a class="carousel-control-next" href="#carousel-example" role="button" data-slide="next"> <span class="carousel-control-next-icon" aria-hidden="true"></span> <span class="sr-only">Next</span> </a> </div>
The result in the browser:
Carousel is a <div>
element with the
.carousel
class. If we want to animate the switching, we add the
.slide
class as well. Notice that the carousel has a unique ID
attribute, it's important for JavaScript. We must have the Bootstrap's
JavaScript loaded for carousels to work properly.
Indicators
If we want the indicators in the bottom part of the slides, we add them as
the <ol>
list with the .carousel-indicators
class. Then, to the individual <li>
elements we assign the
data-target
attribute with the carousel's selector and the
data-slide-to
attribute with the slide number. We number the slides
starting from 0. We also add the .active
class to the indicator of
the active slide. The content of the elements is empty.
Slides
All the slides are wrapped in the <div>
element with the
.carousel-inner
class. We then add each slide as a
<div>
with the .carousel-item
class. The slides
can contain any HTML code, in our case they contain the <img>
elements. Since carousels don't edit their HTML contents in any way by default,
we usually add the .w-100
class to the images so their width is the
same as the carousel's. In the official documentation, the .d-block
class is also assigned to the images, setting the block displaying but carousels
works fine without it as well.
Captions
If we want, we can add a caption to each slide as well. We add them as
<div>
s to the slide's HTML content. We assign the
.carousel.caption
, .d-none
, and
.d-md-block
classes to them. The .d-none
class hides
the captions and the .d-md-block
shows them only on medium size
screens and larger. On mobile phones the captions would unpleasantly cover the
slides otherwise. We typically put the <h3>
heading and the
<p>
paragraph in the <div>
.
Buttons
We insert the arrows switching to the "Previous" and the "Next" slide as
links with the .carousel-control-prev
, respectively
.carousel-control-next
classes. In the href
attribute
we specify the carousel's selector. We define the slide to which the link should
switch using the data-slide
attribute with the prev
,
respectively next
value. This link will wrap a
<span>
with the classes
.carousel-control-prev-icon
, resp.
.carousel-control-next-icon
, causing an icon to show up. Ideally,
we should also add elements with classes for screen readers, carrying the button
description.
Customization
As it's been said before, any carousel part can be removed so you can keep e.g. only the slides without any other controls or captions. Carousels are highly customizable components and we can achieve further customization using data attributes or JavaScript.
Data attributes
We have already explained some of the data attributes. Some other attributes
we use on the <div>
representing the carousel are surely
worth mentioning as well.
data-ride
- If we set thecarousel
value inside, the carousel will start switching right away the page is loaded. The default value isfalse
.data-interval
- The time in milliseconds until the carousel will switch to the next slide. If you set thefalse
value, the slides won't loop automatically. The default value is5000
, indicating 5 seconds.data-keyboard
- Whether the slides can be switched by keyboard. The default value istrue
.data-pause
- The default value of this attribute ishover
causing the loop to pause when the slide is hovered over by the mouse cursor or if the user touches it on a device with a touch screen. It would be unpleasant if the slide switched while the user would be still reading it. In the case of touch screen, the slide will pause for 2 intervals. If we wanted to switch the slides no matter what, we would provide thefalse
value.data-wrap
- Defines whether the carousel should stop after reaching the last slide or if it should switch to the first one again. The default value istrue
.
JavaScript
If you prefer JavaScript over data attributes for some reason, or you just
need an extended control, you can control the whole carousel via JavaScript as a
jQuery plugin. We don't combine this approach with data attributes. We can find
the data attributes described above as properties of the JavaScript component as
well (without the data-
prefix).
We can initialize the carousel e.g. like this:
$('.carousel').carousel({ interval: 2000 })
Methods
We can pass one of the following parameters to the .carousel()
method.
"cycle"
- Cycles the items from left to right"pause"
- Pauses the cyclingnumber
- Switches to the slide with the given index, passes the control flow before switching"prev"
- Switches to the previous slide, passes the control flow before switching"next"
- Switches to the next slide, passes the control flow before switching"dispose
- Removes the carousel
If we call the method while the animation is in progress, the call will be ignored. All calls are asynchronous.
Events
If you wanted to react on the JavaScript events, you are provided with the following 2:
slide.bs.carousel
- Is triggered once the instance method is calledslid.bs.carousel
- Is triggered once the animation is complete
The events have the following properties:
direction
- The direction of the cycling (the"left"
or"right"
values)relatedTarget
- The element which is about to become the active slidefrom
- The index of the current slideto
- The index of the next slide
Handling an event could look like this:
$('#carousel-example').on('slide.bs.carousel', function () { // some reaction... })
Progress
If the user is currently in the middle of a process, it's appropriate to show
them a graphical indicator, widely known as progress bar. Facebook uses such
indicators e.g. to signalize how well our profile is filled out and how much
personal data is still left to be given to this network The Bootstrap framework, oddly
enough, doesn't implement progress bars by styling the
<progress>
element, probably because of insufficient custom
styling support. We create progress bars using <div>
elements
with the .progress-bar
class assigned. It's necessary to set the
size (of the filled area of the indicator) for which we can use utility classes,
e.g. the w-50
class indicating 50%.
The code of a simple progress bar with the value of 50% follows:
<div class="progress"> <div class="progress-bar w-50" role="progressbar" aria-valuenow="50" aria-valuemin="0" aria-valuemax="100"></div> </div>
We can put text inside the <div>
as well, typically what
percentage is done already. If we wanted to set the color, we can use the background color utilities with
the "bg-" prefixes which we're familiar with already. All utility classes are
going to be described further in this online course.
<div class="progress"> <div class="progress-bar w-75 bg-success" role="progressbar" aria-valuenow="75" aria-valuemin="0" aria-valuemax="100">75%</div> </div>
Notice the "aria" attributes with the additional information for screen readers.
The result:
If you needed to set a different height to the progress bar, you can just set
it to the outer element with the .progress
class, the inner element
will adjust automatically.
Nesting
If you ever needed this for some reason, you can put several progress bars inside a progress bar; they'll render next to each other. Theoretically, this can be used to represent a simple graph.
Stripes and animation
If we assign the .progress-bar-striped
class to any progress
bar, stripes will render over it. Thanks to these stripes, we'll be able to
notice an animation which we can add using the
.progress-bar-animated
class.
<div class="progress"> <div class="progress-bar progress-bar-striped progress-bar-animated bg-success w-50" role="progressbar" aria-valuenow="50" aria-valuemin="0" aria-valuemax="100">50% of the Bootstrap course completed</div> </div>
The result:
The animation gives the user a feeling that some effort is currently being made.
In the next lesson, Bootstrap - Collapse and Accordion, we're going to introduce the universal Collapse component and its modification, Accordion.