Get up to 80 % extra points for free! More info:

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 v Bootstrap
carousel.html

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 the carousel value inside, the carousel will start switching right away the page is loaded. The default value is false.
  • data-interval - The time in milliseconds until the carousel will switch to the next slide. If you set the false value, the slides won't loop automatically. The default value is 5000, indicating 5 seconds.
  • data-keyboard - Whether the slides can be switched by keyboard. The default value is true.
  • data-pause - The default value of this attribute is hover 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 the false 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 is true.

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 cycling
  • number - 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 called
  • slid.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 slide
  • from - The index of the current slide
  • to - 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:

Progress bars in Bootstrap
progress_bars.html

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.

Progress bars in Bootstrap
progress_bars_mo­re_bars.html

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:

Progress bars in Bootstrap
progress_bars_a­nimation.html

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.


 

Previous article
Bootstrap - Cards
All articles in this section
Bootstrap
Skip article
(not recommended)
Bootstrap - Collapse and Accordion
Article has been written for you by David Capka Hartinger
Avatar
User rating:
2 votes
The author is a programmer, who likes web technologies and being the lead/chief article writer at ICT.social. He shares his knowledge with the community and is always looking to improve. He believes that anyone can do what they set their mind to.
Unicorn university David learned IT at the Unicorn University - a prestigious college providing education on IT and economics.
Activities