When we think of a carousel, what usually comes to mind is the amusement park ride you may have ridden as a child – a big platform that rotates with colorful merry-go-round horses that go up and down as the ride progresses.
A Bootstrap Carousel is not the fun fair variety we have come to know as a child, but the concept has similarities. This article reviews how to get started with Bootstrap, goes over what the carousel UI element is, when it would be good to use it, and how to construct one using the Bootstrap framework.
Getting Started
The first thing we need to do to set up a Bootstrap Carousel is to ensure we have the proper dependencies. For this, we need Bootstrap, PopperJS, and jQuery. Take a look at Bootstrap’s Quick Start page for assistance in getting your dependencies added to your project.
It’s your decision in how you handle the dependency requirement, but the easiest, more beginner-friendly way is to use the content delivery network – the CDN – for jQuery, Popper.js, and Bootstrap. Be careful of the order of your <script> tags – order matters here.
You’re now ready to get started!
Using Bootstrap Documentation to Create a Carousel
On the left hand side of the Introduction/Getting Started page, you see a sidebar that links to various things. Take a look for the Components link and click on it. This will navigate you to the first of Bootstrap’s many available components: Alerts. If we take a look at the sidebar again, it now shows the different links to all the different components available to us.
Click on the Carousel component to get started. This will have the information we need.
How it Works
Bootstrap takes advantage of the CSS transform property and some JavaScript to operate the carousel as it moves from one slide to the next. The most basic carousel is a series of images or markup that moves from one to the next after a set amount of time.
Basic Structure
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width">
<title>Bootstrap Navbar</title>
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css" integrity="sha384-ggOyR0iXCbMQv3Xipma34MD+dH/1fQ784/j6cY/iJTQUOhcWr7x9JvoRxT2MZw1T"
crossorigin="anonymous">
<link href="style.css" rel="stylesheet" type="text/css" />
</head>
<body>
<nav class="navbar navbar-expand-lg navbar-light bg-light">
<a class="navbar-brand" href="#"><img width="150" src="https://d30vrbc6r9jj52.cloudfront.net/web-illustrations/layout/ck_logo.png" /></a>
<button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#navbarSupportedContent" aria-controls="navbarSupportedContent" aria-expanded="false" aria-label="Toggle navigation">
<span class="navbar-toggler-icon"></span>
</button>
<div class="collapse navbar-collapse" id="navbarSupportedContent">
<ul class="navbar-nav mr-auto">
<li class="nav-item dropdown">
<a class="nav-link dropdown-toggle smallcaps" href="#" id="navbarDropdown" role="button" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
Bootcamps
</a>
<div class="dropdown-menu" aria-labelledby="navbarDropdown">
<a class="dropdown-item" href="#">Popular Bootcamps</a>
<a class="dropdown-item" href="#">Bootcamp Prep</a>
<div class="dropdown-divider"></div>
<a class="dropdown-item" href="#">Bootcamp Financing</a>
<a class="dropdown-item" href="#">Bootcamp Grads and Alumni</a>
</div>
</li>
<li class="nav-item dropdown">
<a class="nav-link dropdown-toggle smallcaps" href="#" id="navbarDropdown" role="button" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
Coding
</a>
<div class="dropdown-menu" aria-labelledby="navbarDropdown">
<a class="dropdown-item" href="#">Coding Tools</a>
<a class="dropdown-item" href="#">Git</a>
<div class="dropdown-divider"></div>
<a class="dropdown-item" href="#">HTML</a>
<a class="dropdown-item" href="#">CSS</a>
<a class="dropdown-item" href="#">JS</a>
<div class="dropdown-divider"></div>
<a class="dropdown-item" href="#">Python</a>
<a class="dropdown-item" href="#">Ruby</a>
<a class="dropdown-item" href="#">C++</a>
<a class="dropdown-item" href="#">Java</a>
</div>
</li>
<li class="nav-item dropdown">
<a class="nav-link dropdown-toggle smallcaps" href="#" id="navbarDropdown" role="button" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
Career Resources
</a>
<div class="dropdown-menu" aria-labelledby="navbarDropdown">
<a class="dropdown-item smallcaps" href="#">Career Advice</a>
<a class="dropdown-item smallcaps" href="#">Interviews</a>
<div class="dropdown-divider"></div>
<a class="dropdown-item smallcaps" href="#">Tech Cities</a>
<a class="dropdown-item smallcaps" href="#">Tech Salaries</a>
</div>
</li>
<li class="nav-item dropdown">
<a class="nav-link dropdown-toggle smallcaps" href="#" id="navbarDropdown" role="button" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
Tech Fields
</a>
<div class="dropdown-menu" aria-labelledby="navbarDropdown">
<a class="dropdown-item" href="#">Web Design</a>
<a class="dropdown-item" href="#">Web Development</a>
<a class="dropdown-item" href="#">Software Engineering</a>
<a class="dropdown-item" href="#">Data Science</a>
</div>
</li>
<li class="nav-item">
<a class="nav-link smallcaps" href="#">News & Commentary</a>
</li>
</ul>
<form class="form-inline my-2 my-lg-0">
<input class="form-control mr-sm-2" type="search" placeholder="Search" aria-label="Search">
<button class="btn btn-outline-success my-2 my-sm-0" type="submit">Search</button>
</form>
</div>
</nav>
<div id="carouselExampleIndicators" class="carousel slide" data-ride="carousel" data-interval="10000" data-pause="hover">
<div class="carousel-inner">
<div class="carousel-item active">
<img src="https://images.unsplash.com/photo-1489533119213-66a5cd877091?ixlib=rb-1.2.1&ixid=eyJhcHBfaWQiOjEyMDd9&auto=format&fit=crop&w=2581&q=80" class="d-block w-100" alt="...">
</div>
<div class="carousel-item"><img src="https://images.unsplash.com/photo-1499854413229-6d1c92ff39ef?ixlib=rb-1.2.1&ixid=eyJhcHBfaWQiOjEyMDd9&auto=format&fit=crop&w=3404&q=80" class="d-block w-100" alt="...">
</div>
<div class="carousel-item">
<img src="https://images.unsplash.com/photo-1532377541606-76e67ceb59a2?ixlib=rb-1.2.1&ixid=eyJhcHBfaWQiOjEyMDd9&auto=format&fit=crop&w=2250&q=80" class="d-block w-100" alt="...">
</div>
</div>
</div>
<script src="https://code.jquery.com/jquery-3.3.1.slim.min.js" integrity="sha384-q8i/X+965DzO0rT7abK41JStQIAqVgRVzpbzo5smXKp4YfRvH+8abtTE1Pi6jizo" crossorigin="anonymous"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.7/umd/popper.min.js" integrity="sha384-UO2eT0CpHqdSJQ6hJty5KVphtPhzWj9WO1clHTMGa3JDZwrnQq4sF86dIHNDz0W1" crossorigin="anonymous"></script>
<script src="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/js/bootstrap.min.js" integrity="sha384-JjSmVgyd0p3pXB1rRibZUAYoIIy6OrQ6VrjIEaFf/nJGzIxFDsf4x0xIM+B07jRM" crossorigin="anonymous"></script>
<script src="script.js"></script>
</body>
</html>Here are some attributes seen above that you may be new to you and their meanings:
| Attribute | Meaning |
| data-ride=“carousel” | Animates on page load. |
| data-interval=“false | [num in ms]” | If set to false, the carousel does not automatically cycle. Otherwise, it cycles based on the number in milliseconds. |
| data-pause=“hover” | When the user hovers over the carousel, the carousel will pause on the current active image. On mouseleave, the carousel will resume the cycling process. |
| class=“active” | Active is needed to know which image to show. |
| class=“d-block” | display: block; |
| class=“w-100” | width: 100%; |
With Controls
In addition to this basic cycling structure, Bootstrap offers carousel controls for the component. This is where the bulk of the JavaScript comes into play. Bootstrap uses their JavaScript util functions to make the carousel operate when a user clicks on the controls.
In this code snippet below, you’ll see a previous and a next arrow on either side of the image. In addition to operating as it did before (on a timer), the image will change if the user clicks on one of the arrows.
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width">
<title>Bootstrap Navbar</title>
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css" integrity="sha384-ggOyR0iXCbMQv3Xipma34MD+dH/1fQ784/j6cY/iJTQUOhcWr7x9JvoRxT2MZw1T"
crossorigin="anonymous">
<link href="style.css" rel="stylesheet" type="text/css" />
</head>
<body>
<nav class="navbar navbar-expand-lg navbar-light bg-light">
<a class="navbar-brand" href="#"><img width="150" src="https://d30vrbc6r9jj52.cloudfront.net/web-illustrations/layout/ck_logo.png" /></a>
<button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#navbarSupportedContent" aria-controls="navbarSupportedContent" aria-expanded="false" aria-label="Toggle navigation">
<span class="navbar-toggler-icon"></span>
</button>
<div class="collapse navbar-collapse" id="navbarSupportedContent">
<ul class="navbar-nav mr-auto">
<li class="nav-item dropdown">
<a class="nav-link dropdown-toggle smallcaps" href="#" id="navbarDropdown" role="button" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
Bootcamps
</a>
<div class="dropdown-menu" aria-labelledby="navbarDropdown">
<a class="dropdown-item" href="#">Popular Bootcamps</a>
<a class="dropdown-item" href="#">Bootcamp Prep</a>
<div class="dropdown-divider"></div>
<a class="dropdown-item" href="#">Bootcamp Financing</a>
<a class="dropdown-item" href="#">Bootcamp Grads and Alumni</a>
</div>
</li>
<li class="nav-item dropdown">
<a class="nav-link dropdown-toggle smallcaps" href="#" id="navbarDropdown" role="button" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
Coding
</a>
<div class="dropdown-menu" aria-labelledby="navbarDropdown">
<a class="dropdown-item" href="#">Coding Tools</a>
<a class="dropdown-item" href="#">Git</a>
<div class="dropdown-divider"></div>
<a class="dropdown-item" href="#">HTML</a>
<a class="dropdown-item" href="#">CSS</a>
<a class="dropdown-item" href="#">JS</a>
<div class="dropdown-divider"></div>
<a class="dropdown-item" href="#">Python</a>
<a class="dropdown-item" href="#">Ruby</a>
<a class="dropdown-item" href="#">C++</a>
<a class="dropdown-item" href="#">Java</a>
</div>
</li>
<li class="nav-item dropdown">
<a class="nav-link dropdown-toggle smallcaps" href="#" id="navbarDropdown" role="button" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
Career Resources
</a>
<div class="dropdown-menu" aria-labelledby="navbarDropdown">
<a class="dropdown-item smallcaps" href="#">Career Advice</a>
<a class="dropdown-item smallcaps" href="#">Interviews</a>
<div class="dropdown-divider"></div>
<a class="dropdown-item smallcaps" href="#">Tech Cities</a>
<a class="dropdown-item smallcaps" href="#">Tech Salaries</a>
</div>
</li>
<li class="nav-item dropdown">
<a class="nav-link dropdown-toggle smallcaps" href="#" id="navbarDropdown" role="button" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
Tech Fields
</a>
<div class="dropdown-menu" aria-labelledby="navbarDropdown">
<a class="dropdown-item" href="#">Web Design</a>
<a class="dropdown-item" href="#">Web Development</a>
<a class="dropdown-item" href="#">Software Engineering</a>
<a class="dropdown-item" href="#">Data Science</a>
</div>
</li>
<li class="nav-item">
<a class="nav-link smallcaps" href="#">News & Commentary</a>
</li>
</ul>
<form class="form-inline my-2 my-lg-0">
<input class="form-control mr-sm-2" type="search" placeholder="Search" aria-label="Search">
<button class="btn btn-outline-success my-2 my-sm-0" type="submit">Search</button>
</form>
</div>
</nav>
<div id="carouselExampleIndicators" class="carousel slide" data-ride="carousel" data-interval="10000" data-pause="hover">
<div class="carousel-inner">
<div class="carousel-item active">
<img src="https://images.unsplash.com/photo-1489533119213-66a5cd877091?ixlib=rb-1.2.1&ixid=eyJhcHBfaWQiOjEyMDd9&auto=format&fit=crop&w=2581&q=80" class="d-block w-100" alt="...">
</div>
<div class="carousel-item">
<img src="https://images.unsplash.com/photo-1499854413229-6d1c92ff39ef?ixlib=rb-1.2.1&ixid=eyJhcHBfaWQiOjEyMDd9&auto=format&fit=crop&w=3404&q=80" class="d-block w-100" alt="...">
</div>
<div class="carousel-item">
<img src="https://images.unsplash.com/photo-1532377541606-76e67ceb59a2?ixlib=rb-1.2.1&ixid=eyJhcHBfaWQiOjEyMDd9&auto=format&fit=crop&w=2250&q=80" class="d-block w-100" alt="...">
</div>
</div>
<a class="carousel-control-prev" href="#carouselExampleControls" 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="#carouselExampleControls" role="button" data-slide="next">
<span class="carousel-control-next-icon" aria-hidden="true"></span>
<span class="sr-only">Next</span>
</a>
</div>
<script src="https://code.jquery.com/jquery-3.3.1.slim.min.js" integrity="sha384-q8i/X+965DzO0rT7abK41JStQIAqVgRVzpbzo5smXKp4YfRvH+8abtTE1Pi6jizo" crossorigin="anonymous"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.7/umd/popper.min.js" integrity="sha384-UO2eT0CpHqdSJQ6hJty5KVphtPhzWj9WO1clHTMGa3JDZwrnQq4sF86dIHNDz0W1" crossorigin="anonymous"></script>
<script src="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/js/bootstrap.min.js" integrity="sha384-JjSmVgyd0p3pXB1rRibZUAYoIIy6OrQ6VrjIEaFf/nJGzIxFDsf4x0xIM+B07jRM" crossorigin="anonymous"></script>
<script src="script.js"></script>
</body>
</html>The big thing to understand about the way the controls work is that the href needs to match the unique id of the overall div of the carousel.
Next Control:
<a class="carousel-control-next" href="#carouselExampleControls" role="button" data-slide="next">
Outermost Container of Carousel:
<div id="carouselExampleControls" class="carousel slide" data-ride="carousel">
The highlighted areas need to match in order for the links to work.
With Indicators
In addition to using controls to operate the cycling of the carousel, you can indicate which image you’re on by showing how many block elements there are in your carousel. These can be used in tandem with the controls.
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width">
<title>Bootstrap Navbar</title>
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css" integrity="sha384-ggOyR0iXCbMQv3Xipma34MD+dH/1fQ784/j6cY/iJTQUOhcWr7x9JvoRxT2MZw1T"
crossorigin="anonymous">
<link href="style.css" rel="stylesheet" type="text/css" />
</head>
<body>
<nav class="navbar navbar-expand-lg navbar-light bg-light">
<a class="navbar-brand" href="#"><img width="150" src="https://d30vrbc6r9jj52.cloudfront.net/web-illustrations/layout/ck_logo.png" /></a>
<button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#navbarSupportedContent" aria-controls="navbarSupportedContent" aria-expanded="false" aria-label="Toggle navigation">
<span class="navbar-toggler-icon"></span>
</button>
<div class="collapse navbar-collapse" id="navbarSupportedContent">
<ul class="navbar-nav mr-auto">
<li class="nav-item dropdown">
<a class="nav-link dropdown-toggle smallcaps" href="#" id="navbarDropdown" role="button" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
Bootcamps
</a>
<div class="dropdown-menu" aria-labelledby="navbarDropdown">
<a class="dropdown-item" href="#">Popular Bootcamps</a>
<a class="dropdown-item" href="#">Bootcamp Prep</a>
<div class="dropdown-divider"></div>
<a class="dropdown-item" href="#">Bootcamp Financing</a>
<a class="dropdown-item" href="#">Bootcamp Grads and Alumni</a>
</div>
</li>
<li class="nav-item dropdown">lid
<a class="nav-link dropdown-toggle smallcaps" href="#" id="navbarDropdown" role="button" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
Coding
</a>
<div class="dropdown-menu" aria-labelledby="navbarDropdown">
<a class="dropdown-item" href="#">Coding Tools</a>
<a class="dropdown-item" href="#">Git</a>
<div class="dropdown-divider"></div>
<a class="dropdown-item" href="#">HTML</a>
<a class="dropdown-item" href="#">CSS</a>
<a class="dropdown-item" href="#">JS</a>
<div class="dropdown-divider"></div>
<a class="dropdown-item" href="#">Python</a>
<a class="dropdown-item" href="#">Ruby</a>
<a class="dropdown-item" href="#">C++</a>
<a class="dropdown-item" href="#">Java</a>
</div>
</li>
<li class="nav-item dropdown">
<a class="nav-link dropdown-toggle smallcaps" href="#" id="navbarDropdown" role="button" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
Career Resources
</a>
<div class="dropdown-menu" aria-labelledby="navbarDropdown">
<a class="dropdown-item smallcaps" href="#">Career Advice</a>
<a class="dropdown-item smallcaps" href="#">Interviews</a>
<div class="dropdown-divider"></div>
<a class="dropdown-item smallcaps" href="#">Tech Cities</a>
<a class="dropdown-item smallcaps" href="#">Tech Salaries</a>
</div>
</li>
<li class="nav-item dropdown">
<a class="nav-link dropdown-toggle smallcaps" href="#" id="navbarDropdown" role="button" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
Tech Fields
</a>
<div class="dropdown-menu" aria-labelledby="navbarDropdown">
<a class="dropdown-item" href="#">Web Design</a>
<a class="dropdown-item" href="#">Web Development</a>
<a class="dropdown-item" href="#">Software Engineering</a>
<a class="dropdown-item" href="#">Data Science</a>
</div>
</li>
<li class="nav-item">
<a class="nav-link smallcaps" href="#">News & Commentary</a>
</li>
</ul>
<form class="form-inline my-2 my-lg-0">
<input class="form-control mr-sm-2" type="search" placeholder="Search" aria-label="Search">
<button class="btn btn-outline-success my-2 my-sm-0" type="submit">Search</button>
</form>
</div>
</nav>
<div id="carouselExampleIndicators" class="carousel slide" data-ride="carousel" data-interval="10000" data-pause="hover">
<ol class="carousel-indicators">
<li data-target="#carouselExampleIndicators" data-slide-to="0" class="active"></li>
<li data-target="#carouselExampleIndicators" data-slide-to="1"></li>
<li data-target="#carouselExampleIndicators" data-slide-to="2"></li>
</ol>
<div class="carousel-inner">
<div class="carousel-item active">
<img src="https://images.unsplash.com/photo-1489533119213-66a5cd877091?ixlib=rb-1.2.1&ixid=eyJhcHBfaWQiOjEyMDd9&auto=format&fit=crop&w=2581&q=80" class="d-block w-100" alt="...">
</div>
<div class="carousel-item">
<img src="https://images.unsplash.com/photo-1499854413229-6d1c92ff39ef?ixlib=rb-1.2.1&ixid=eyJhcHBfaWQiOjEyMDd9&auto=format&fit=crop&w=3404&q=80" class="d-block w-100" alt="...">
</div>
<div class="carousel-item">
<img src="https://images.unsplash.com/photo-1532377541606-76e67ceb59a2?ixlib=rb-1.2.1&ixid=eyJhcHBfaWQiOjEyMDd9&auto=format&fit=crop&w=2250&q=80" class="d-block w-100" alt="...">
</div>
</div>
<a class="carousel-control-prev" href="#carouselExampleIndicators" 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="#carouselExampleIndicators" role="button" data-slide="next"><span class="carousel-control-next-icon" aria-hidden="true"></span>
<span class="sr-only">Next</span>
</a>
</div>
<script src="https://code.jquery.com/jquery-3.3.1.slim.min.js" integrity="sha384-q8i/X+965DzO0rT7abK41JStQIAqVgRVzpbzo5smXKp4YfRvH+8abtTE1Pi6jizo" crossorigin="anonymous"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.7/umd/popper.min.js" integrity="sha384-UO2eT0CpHqdSJQ6hJty5KVphtPhzWj9WO1clHTMGa3JDZwrnQq4sF86dIHNDz0W1" crossorigin="anonymous"></script>
<script src="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/js/bootstrap.min.js" integrity="sha384-JjSmVgyd0p3pXB1rRibZUAYoIIy6OrQ6VrjIEaFf/nJGzIxFDsf4x0xIM+B07jRM" crossorigin="anonymous"></script>
<script src="script.js"></script>
</body>
</html>The ordered list in the above code snippet is what displays the indicators. The .active class matches the active class in the carousel-items.
Conclusion
This may seem like a LOT of information to digest at first. The main thing to remember is to just follow the documentation. There is no need to necessarily memorize how to do this when the documentation is so well-written and detailed.
It’s definitely a good idea to be aware of how everything works on Bootstrap’s end – take a look at that minified CSS and JS file if you have time to see how they have elements styled and scripted in Bootstrap. Also, be aware of at least what all of the attributes mean in the example code so you can tailor it to your needs and use it in your project.
One final thing: be aware that the carousel component may not be the best to use in terms of accessibility. Be sure to continue to make your page as accessible as possible and not use information in your carousel that cannot also be found somewhere else.
Good luck as you continue your journey into using Bootstrap!
About us: Career Karma is a platform designed to help job seekers find, research, and connect with job training programs to advance their careers. Learn about the CK publication.
