{"id":23480,"date":"2020-10-01T14:48:02","date_gmt":"2020-10-01T21:48:02","guid":{"rendered":"https:\/\/careerkarma.com\/blog\/?p=23480"},"modified":"2020-12-29T10:59:05","modified_gmt":"2020-12-29T18:59:05","slug":"bootstrap-carousel","status":"publish","type":"post","link":"https:\/\/careerkarma.com\/blog\/bootstrap-carousel\/","title":{"rendered":"Using the Bootstrap Framework to Create a Carousel"},"content":{"rendered":"\n

When we think of a carousel, what usually comes to mind is the amusement park ride you may have ridden as a child \u2013 a big platform that rotates with colorful merry-go-round horses that go up and down as the ride progresses.
<\/p>\n\n\n\n

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. <\/p>\n\n\n\n

Getting Started<\/h2>\n\n\n\n

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\u2019s Quick Start<\/a> page for assistance in getting your dependencies added to your project.
<\/p>\n\n\n\n

It\u2019s your decision in how you handle the dependency requirement, but the easiest, more beginner-friendly way is to use the content delivery network \u2013 the CDN \u2013 for jQuery, Popper.js, and Bootstrap. Be careful of the order of your <script><\/code> tags \u2013 order matters here. 
<\/p>\n\n\n\n

You\u2019re now ready to get started!<\/p>\n\n\n\n

Using Bootstrap Documentation to Create a Carousel<\/h2>\n\n\n\n

On the left hand side of the Introduction\/Getting Started<\/code> page, you see a sidebar that links to various things. Take a look for the Components<\/code> link and click on it. This will navigate you to the first of Bootstrap\u2019s many available components: Alerts<\/code>. If we take a look at the sidebar again, it now shows the different links to all the different components available to us. 
<\/p>\n\n\n\n

Click on the Carousel<\/code> component to get started. This will have the information we need.<\/p>\n\n\n\n

How it Works<\/h3>\n\n\n\n

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.<\/p>\n\n\n\n

Basic Structure<\/h4>\n\n\n\n
<!DOCTYPE html>\n<html>\n \n<head>\n  <meta charset="utf-8">\n  <meta name="viewport" content="width=device-width">\n  <title>Bootstrap Navbar<\/title>\n  <link rel="stylesheet" href="https:\/\/stackpath.bootstrapcdn.com\/bootstrap\/4.3.1\/css\/bootstrap.min.css" integrity="sha384-ggOyR0iXCbMQv3Xipma34MD+dH\/1fQ784\/j6cY\/iJTQUOhcWr7x9JvoRxT2MZw1T"\n   crossorigin="anonymous">\n  <link href="style.css" rel="stylesheet" type="text\/css" \/>\n<\/head>\n \n<body>\n  <nav class="navbar navbar-expand-lg navbar-light bg-light">\n    <a class="navbar-brand" href="#"><img width="150" src="https:\/\/d30vrbc6r9jj52.cloudfront.net\/web-illustrations\/layout\/ck_logo.png" \/><\/a>\n <button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#navbarSupportedContent" aria-controls="navbarSupportedContent" aria-expanded="false" aria-label="Toggle navigation">\n   <span class="navbar-toggler-icon"><\/span>\n <\/button>\n \n <div class="collapse navbar-collapse" id="navbarSupportedContent">\n   <ul class="navbar-nav mr-auto">\n     <li class="nav-item dropdown">\n       <a class="nav-link dropdown-toggle smallcaps" href="#" id="navbarDropdown" role="button" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">\n         Bootcamps\n       <\/a>\n       <div class="dropdown-menu" aria-labelledby="navbarDropdown">\n         <a class="dropdown-item" href="#">Popular Bootcamps<\/a>\n         <a class="dropdown-item" href="#">Bootcamp Prep<\/a>\n         <div class="dropdown-divider"><\/div>\n         <a class="dropdown-item" href="#">Bootcamp Financing<\/a>\n         <a class="dropdown-item" href="#">Bootcamp Grads and Alumni<\/a>\n \n       <\/div>\n     <\/li>\n     <li class="nav-item dropdown">\n       <a class="nav-link dropdown-toggle smallcaps" href="#" id="navbarDropdown" role="button" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">\n         Coding\n       <\/a>\n       <div class="dropdown-menu" aria-labelledby="navbarDropdown">\n         <a class="dropdown-item" href="#">Coding Tools<\/a>\n         <a class="dropdown-item" href="#">Git<\/a>\n         <div class="dropdown-divider"><\/div>\n         <a class="dropdown-item" href="#">HTML<\/a>\n         <a class="dropdown-item" href="#">CSS<\/a>\n         <a class="dropdown-item" href="#">JS<\/a>\n         <div class="dropdown-divider"><\/div>\n         <a class="dropdown-item" href="#">Python<\/a>\n         <a class="dropdown-item" href="#">Ruby<\/a>\n         <a class="dropdown-item" href="#">C++<\/a>\n         <a class="dropdown-item" href="#">Java<\/a>\n       <\/div>\n     <\/li>\n     <li class="nav-item dropdown">\n       <a class="nav-link dropdown-toggle smallcaps" href="#" id="navbarDropdown" role="button" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">\n         Career Resources\n       <\/a>\n       <div class="dropdown-menu" aria-labelledby="navbarDropdown">\n         <a class="dropdown-item smallcaps" href="#">Career Advice<\/a>\n         <a class="dropdown-item smallcaps" href="#">Interviews<\/a>\n         <div class="dropdown-divider"><\/div>\n         <a class="dropdown-item smallcaps" href="#">Tech Cities<\/a>\n         <a class="dropdown-item smallcaps" href="#">Tech Salaries<\/a>\n       <\/div>\n     <\/li>\n     <li class="nav-item dropdown">\n       <a class="nav-link dropdown-toggle smallcaps" href="#" id="navbarDropdown" role="button" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">\n         Tech Fields\n       <\/a>\n       <div class="dropdown-menu" aria-labelledby="navbarDropdown">\n         <a class="dropdown-item" href="#">Web Design<\/a>\n         <a class="dropdown-item" href="#">Web Development<\/a>\n         <a class="dropdown-item" href="#">Software Engineering<\/a>\n         <a class="dropdown-item" href="#">Data Science<\/a>\n       <\/div>\n     <\/li>\n     <li class="nav-item">\n       <a class="nav-link smallcaps" href="#">News & Commentary<\/a>\n     <\/li>\n   <\/ul>\n   <form class="form-inline my-2 my-lg-0">\n     <input class="form-control mr-sm-2" type="search" placeholder="Search" aria-label="Search">\n     <button class="btn btn-outline-success my-2 my-sm-0" type="submit">Search<\/button>\n   <\/form>\n <\/div>\n <\/nav>\n <div id="carouselExampleIndicators" class="carousel slide" data-ride="carousel" data-interval="10000" data-pause="hover">\n   <div class="carousel-inner">\n     <div class="carousel-item active">\n         <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="...">\n     <\/div>\n     <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="...">\n     <\/div>\n     <div class="carousel-item">\n       <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="...">\n     <\/div>\n   <\/div>\n <\/div>\n \n   <script src="https:\/\/code.jquery.com\/jquery-3.3.1.slim.min.js" integrity="sha384-q8i\/X+965DzO0rT7abK41JStQIAqVgRVzpbzo5smXKp4YfRvH+8abtTE1Pi6jizo" crossorigin="anonymous"><\/script>\n   <script src="https:\/\/cdnjs.cloudflare.com\/ajax\/libs\/popper.js\/1.14.7\/umd\/popper.min.js" integrity="sha384-UO2eT0CpHqdSJQ6hJty5KVphtPhzWj9WO1clHTMGa3JDZwrnQq4sF86dIHNDz0W1" crossorigin="anonymous"><\/script>\n   <script src="https:\/\/stackpath.bootstrapcdn.com\/bootstrap\/4.3.1\/js\/bootstrap.min.js" integrity="sha384-JjSmVgyd0p3pXB1rRibZUAYoIIy6OrQ6VrjIEaFf\/nJGzIxFDsf4x0xIM+B07jRM" crossorigin="anonymous"><\/script>\n   <script src="script.js"><\/script>\n <\/body>\n<\/html><\/pre><\/div>\n\n\n\n
Here are some attributes seen above that you may be new to you and their meanings: 
<\/p>\n\n\n\n
Attribute<\/td>Meaning<\/td><\/tr>
data-ride=\u201ccarousel\u201d<\/td>Animates on page load.<\/td><\/tr>
data-interval=\u201cfalse | [num in ms]\u201d<\/td>If set to false, the carousel does not automatically cycle. Otherwise, it cycles based on the number in milliseconds.<\/td><\/tr>
data-pause=\u201chover\u201d<\/td>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. <\/td><\/tr>
class=\u201cactive\u201d<\/td>Active is needed to know which image to show.<\/td><\/tr>
class=\u201cd-block\u201d<\/td>display: block;<\/td><\/tr>
class=\u201cw-100\u201d<\/td>width: 100%;<\/td><\/tr><\/tbody><\/table>\n\n\n\n
With Controls<\/h4>\n\n\n\n
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. 
<\/p>\n\n\n\n
In this code snippet below, you\u2019ll 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. 
<\/p>\n\n\n\n
<!DOCTYPE html>\n<html>\n \n<head>\n  <meta charset="utf-8">\n  <meta name="viewport" content="width=device-width">\n  <title>Bootstrap Navbar<\/title>\n  <link rel="stylesheet" href="https:\/\/stackpath.bootstrapcdn.com\/bootstrap\/4.3.1\/css\/bootstrap.min.css" integrity="sha384-ggOyR0iXCbMQv3Xipma34MD+dH\/1fQ784\/j6cY\/iJTQUOhcWr7x9JvoRxT2MZw1T"\n   crossorigin="anonymous">\n  <link href="style.css" rel="stylesheet" type="text\/css" \/>\n<\/head>\n \n<body>\n  <nav class="navbar navbar-expand-lg navbar-light bg-light">\n    <a class="navbar-brand" href="#"><img width="150" src="https:\/\/d30vrbc6r9jj52.cloudfront.net\/web-illustrations\/layout\/ck_logo.png" \/><\/a>\n <button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#navbarSupportedContent" aria-controls="navbarSupportedContent" aria-expanded="false" aria-label="Toggle navigation">\n   <span class="navbar-toggler-icon"><\/span>\n <\/button>\n \n <div class="collapse navbar-collapse" id="navbarSupportedContent">\n   <ul class="navbar-nav mr-auto">\n     <li class="nav-item dropdown">\n       <a class="nav-link dropdown-toggle smallcaps" href="#" id="navbarDropdown" role="button" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">\n         Bootcamps\n       <\/a>\n       <div class="dropdown-menu" aria-labelledby="navbarDropdown">\n         <a class="dropdown-item" href="#">Popular Bootcamps<\/a>\n         <a class="dropdown-item" href="#">Bootcamp Prep<\/a>\n         <div class="dropdown-divider"><\/div>\n         <a class="dropdown-item" href="#">Bootcamp Financing<\/a>\n         <a class="dropdown-item" href="#">Bootcamp Grads and Alumni<\/a>\n \n       <\/div>\n     <\/li>\n     <li class="nav-item dropdown">\n       <a class="nav-link dropdown-toggle smallcaps" href="#" id="navbarDropdown" role="button" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">\n         Coding\n       <\/a>\n       <div class="dropdown-menu" aria-labelledby="navbarDropdown">\n         <a class="dropdown-item" href="#">Coding Tools<\/a>\n         <a class="dropdown-item" href="#">Git<\/a>\n         <div class="dropdown-divider"><\/div>\n         <a class="dropdown-item" href="#">HTML<\/a>\n         <a class="dropdown-item" href="#">CSS<\/a>\n         <a class="dropdown-item" href="#">JS<\/a>\n         <div class="dropdown-divider"><\/div>\n         <a class="dropdown-item" href="#">Python<\/a>\n         <a class="dropdown-item" href="#">Ruby<\/a>\n         <a class="dropdown-item" href="#">C++<\/a>\n         <a class="dropdown-item" href="#">Java<\/a>\n       <\/div>\n     <\/li>\n     <li class="nav-item dropdown">\n       <a class="nav-link dropdown-toggle smallcaps" href="#" id="navbarDropdown" role="button" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">\n         Career Resources\n       <\/a>\n       <div class="dropdown-menu" aria-labelledby="navbarDropdown">\n         <a class="dropdown-item smallcaps" href="#">Career Advice<\/a>\n         <a class="dropdown-item smallcaps" href="#">Interviews<\/a>\n         <div class="dropdown-divider"><\/div>\n         <a class="dropdown-item smallcaps" href="#">Tech Cities<\/a>\n         <a class="dropdown-item smallcaps" href="#">Tech Salaries<\/a>\n       <\/div>\n     <\/li>\n     <li class="nav-item dropdown">\n       <a class="nav-link dropdown-toggle smallcaps" href="#" id="navbarDropdown" role="button" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">\n         Tech Fields\n       <\/a>\n       <div class="dropdown-menu" aria-labelledby="navbarDropdown">\n         <a class="dropdown-item" href="#">Web Design<\/a>\n         <a class="dropdown-item" href="#">Web Development<\/a>\n         <a class="dropdown-item" href="#">Software Engineering<\/a>\n         <a class="dropdown-item" href="#">Data Science<\/a>\n       <\/div>\n     <\/li>\n     <li class="nav-item">\n       <a class="nav-link smallcaps" href="#">News & Commentary<\/a>\n     <\/li>\n   <\/ul>\n   <form class="form-inline my-2 my-lg-0">\n     <input class="form-control mr-sm-2" type="search" placeholder="Search" aria-label="Search">\n     <button class="btn btn-outline-success my-2 my-sm-0" type="submit">Search<\/button>\n   <\/form>\n <\/div>\n <\/nav>\n <div id="carouselExampleIndicators" class="carousel slide" data-ride="carousel" data-interval="10000" data-pause="hover">\n <div class="carousel-inner">\n   <div class="carousel-item active">\n         <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="...">\n   <\/div>\n   <div class="carousel-item">\n       <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="...">\n   <\/div>\n   <div class="carousel-item">\n       <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="...">\n   <\/div>\n <\/div>\n <a class="carousel-control-prev" href="#carouselExampleControls" role="button" data-slide="prev">\n   <span class="carousel-control-prev-icon" aria-hidden="true"><\/span>\n   <span class="sr-only">Previous<\/span>\n <\/a>\n <a class="carousel-control-next" href="#carouselExampleControls" role="button" data-slide="next">\n   <span class="carousel-control-next-icon" aria-hidden="true"><\/span>\n   <span class="sr-only">Next<\/span>\n <\/a>\n<\/div>\n \n   <script src="https:\/\/code.jquery.com\/jquery-3.3.1.slim.min.js" integrity="sha384-q8i\/X+965DzO0rT7abK41JStQIAqVgRVzpbzo5smXKp4YfRvH+8abtTE1Pi6jizo" crossorigin="anonymous"><\/script>\n   <script src="https:\/\/cdnjs.cloudflare.com\/ajax\/libs\/popper.js\/1.14.7\/umd\/popper.min.js" integrity="sha384-UO2eT0CpHqdSJQ6hJty5KVphtPhzWj9WO1clHTMGa3JDZwrnQq4sF86dIHNDz0W1" crossorigin="anonymous"><\/script>\n   <script src="https:\/\/stackpath.bootstrapcdn.com\/bootstrap\/4.3.1\/js\/bootstrap.min.js" integrity="sha384-JjSmVgyd0p3pXB1rRibZUAYoIIy6OrQ6VrjIEaFf\/nJGzIxFDsf4x0xIM+B07jRM" crossorigin="anonymous"><\/script>\n   <script src="script.js"><\/script>\n <\/body>\n<\/html><\/pre><\/div>\n\n\n\n
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. 
<\/p>\n\n\n\n
Next Control:<\/p>\n\n\n\n
<a class=\"carousel-control-next\" href=\"#carouselExampleControls\" role=\"button\" data-slide=\"next\">
<\/code><\/p>\n\n\n\n
Outermost Container of Carousel:<\/p>\n\n\n\n
 <div id=\"carouselExampleControls\" class=\"carousel slide\" data-ride=\"carousel\">
<\/code><\/p>\n\n\n\n
The highlighted areas need to match in order for the links to work. <\/p>\n\n\n\n
With Indicators<\/h4>\n\n\n\n
In addition to using controls to operate the cycling of the carousel, you can indicate which image you\u2019re on by showing how many block elements there are in your carousel. These can be used in tandem with the controls.
<\/p>\n\n\n\n
<!DOCTYPE html>\n<html>\n \n<head>\n  <meta charset="utf-8">\n  <meta name="viewport" content="width=device-width">\n  <title>Bootstrap Navbar<\/title>\n  <link rel="stylesheet" href="https:\/\/stackpath.bootstrapcdn.com\/bootstrap\/4.3.1\/css\/bootstrap.min.css" integrity="sha384-ggOyR0iXCbMQv3Xipma34MD+dH\/1fQ784\/j6cY\/iJTQUOhcWr7x9JvoRxT2MZw1T"\n   crossorigin="anonymous">\n  <link href="style.css" rel="stylesheet" type="text\/css" \/>\n<\/head>\n \n<body>\n  <nav class="navbar navbar-expand-lg navbar-light bg-light">\n    <a class="navbar-brand" href="#"><img width="150" src="https:\/\/d30vrbc6r9jj52.cloudfront.net\/web-illustrations\/layout\/ck_logo.png" \/><\/a>\n <button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#navbarSupportedContent" aria-controls="navbarSupportedContent" aria-expanded="false" aria-label="Toggle navigation">\n   <span class="navbar-toggler-icon"><\/span>\n <\/button>\n \n <div class="collapse navbar-collapse" id="navbarSupportedContent">\n   <ul class="navbar-nav mr-auto">\n     <li class="nav-item dropdown">\n       <a class="nav-link dropdown-toggle smallcaps" href="#" id="navbarDropdown" role="button" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">\n         Bootcamps\n       <\/a>\n       <div class="dropdown-menu" aria-labelledby="navbarDropdown">\n         <a class="dropdown-item" href="#">Popular Bootcamps<\/a>\n         <a class="dropdown-item" href="#">Bootcamp Prep<\/a>\n         <div class="dropdown-divider"><\/div>\n         <a class="dropdown-item" href="#">Bootcamp Financing<\/a>\n         <a class="dropdown-item" href="#">Bootcamp Grads and Alumni<\/a>\n \n       <\/div>\n     <\/li>\n     <li class="nav-item dropdown">lid\n       <a class="nav-link dropdown-toggle smallcaps" href="#" id="navbarDropdown" role="button" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">\n         Coding\n       <\/a>\n       <div class="dropdown-menu" aria-labelledby="navbarDropdown">\n         <a class="dropdown-item" href="#">Coding Tools<\/a>\n         <a class="dropdown-item" href="#">Git<\/a>\n         <div class="dropdown-divider"><\/div>\n         <a class="dropdown-item" href="#">HTML<\/a>\n         <a class="dropdown-item" href="#">CSS<\/a>\n         <a class="dropdown-item" href="#">JS<\/a>\n         <div class="dropdown-divider"><\/div>\n         <a class="dropdown-item" href="#">Python<\/a>\n         <a class="dropdown-item" href="#">Ruby<\/a>\n         <a class="dropdown-item" href="#">C++<\/a>\n         <a class="dropdown-item" href="#">Java<\/a>\n       <\/div>\n     <\/li>\n     <li class="nav-item dropdown">\n       <a class="nav-link dropdown-toggle smallcaps" href="#" id="navbarDropdown" role="button" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">\n         Career Resources\n       <\/a>\n       <div class="dropdown-menu" aria-labelledby="navbarDropdown">\n         <a class="dropdown-item smallcaps" href="#">Career Advice<\/a>\n         <a class="dropdown-item smallcaps" href="#">Interviews<\/a>\n         <div class="dropdown-divider"><\/div>\n         <a class="dropdown-item smallcaps" href="#">Tech Cities<\/a>\n         <a class="dropdown-item smallcaps" href="#">Tech Salaries<\/a>\n       <\/div>\n     <\/li>\n     <li class="nav-item dropdown">\n       <a class="nav-link dropdown-toggle smallcaps" href="#" id="navbarDropdown" role="button" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">\n         Tech Fields\n       <\/a>\n       <div class="dropdown-menu" aria-labelledby="navbarDropdown">\n         <a class="dropdown-item" href="#">Web Design<\/a>\n         <a class="dropdown-item" href="#">Web Development<\/a>\n         <a class="dropdown-item" href="#">Software Engineering<\/a>\n         <a class="dropdown-item" href="#">Data Science<\/a>\n       <\/div>\n     <\/li>\n     <li class="nav-item">\n       <a class="nav-link smallcaps" href="#">News & Commentary<\/a>\n     <\/li>\n   <\/ul>\n   <form class="form-inline my-2 my-lg-0">\n     <input class="form-control mr-sm-2" type="search" placeholder="Search" aria-label="Search">\n     <button class="btn btn-outline-success my-2 my-sm-0" type="submit">Search<\/button>\n   <\/form>\n <\/div>\n <\/nav>\n <div id="carouselExampleIndicators" class="carousel slide" data-ride="carousel" data-interval="10000" data-pause="hover">\n <ol class="carousel-indicators">\n   <li data-target="#carouselExampleIndicators" data-slide-to="0" class="active"><\/li>\n   <li data-target="#carouselExampleIndicators" data-slide-to="1"><\/li>\n   <li data-target="#carouselExampleIndicators" data-slide-to="2"><\/li>\n <\/ol>\n <div class="carousel-inner">\n   <div class="carousel-item active">\n         <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="...">\n   <\/div>\n   <div class="carousel-item">\n       <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="...">\n   <\/div>\n   <div class="carousel-item">\n       <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="...">\n   <\/div>\n <\/div>\n <a class="carousel-control-prev" href="#carouselExampleIndicators" role="button" data-slide="prev">\n   <span class="carousel-control-prev-icon" aria-hidden="true"><\/span>\n   <span class="sr-only">Previous<\/span>\n <\/a>\n <a class="carousel-control-next" href="#carouselExampleIndicators" role="button" data-slide="next"><span class="carousel-control-next-icon" aria-hidden="true"><\/span>\n   <span class="sr-only">Next<\/span>\n <\/a>\n<\/div>\n \n   <script src="https:\/\/code.jquery.com\/jquery-3.3.1.slim.min.js" integrity="sha384-q8i\/X+965DzO0rT7abK41JStQIAqVgRVzpbzo5smXKp4YfRvH+8abtTE1Pi6jizo" crossorigin="anonymous"><\/script>\n   <script src="https:\/\/cdnjs.cloudflare.com\/ajax\/libs\/popper.js\/1.14.7\/umd\/popper.min.js" integrity="sha384-UO2eT0CpHqdSJQ6hJty5KVphtPhzWj9WO1clHTMGa3JDZwrnQq4sF86dIHNDz0W1" crossorigin="anonymous"><\/script>\n   <script src="https:\/\/stackpath.bootstrapcdn.com\/bootstrap\/4.3.1\/js\/bootstrap.min.js" integrity="sha384-JjSmVgyd0p3pXB1rRibZUAYoIIy6OrQ6VrjIEaFf\/nJGzIxFDsf4x0xIM+B07jRM" crossorigin="anonymous"><\/script>\n   <script src="script.js"><\/script>\n <\/body>\n<\/html><\/pre><\/div>\n\n\n\n
The ordered list in the above code snippet is what displays the indicators. The .active class matches the active class in the carousel-items<\/code>. <\/p>\n\n\n\n
Conclusion<\/h2>\n\n\n\n
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. 
<\/p>\n\n\n\n
It\u2019s definitely a good idea to be aware of how everything works on Bootstrap\u2019s end \u2013 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. 
<\/p>\n\n\n\n
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.
<\/p>\n\n\n\n
Good luck as you continue your journey into using Bootstrap!
<\/p>\n","protected":false},"excerpt":{"rendered":"When we think of a carousel, what usually comes to mind is the amusement park ride you may have ridden as a child \u2013 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…","protected":false},"author":77,"featured_media":23481,"comment_status":"open","ping_status":"open","sticky":false,"template":"","format":"standard","meta":{"_acf_changed":false,"footnotes":""},"categories":[17287],"tags":[],"class_list":{"0":"post-23480","1":"post","2":"type-post","3":"status-publish","4":"format-standard","5":"has-post-thumbnail","7":"category-css"},"acf":{"post_sub_title":"","sprint_id":"","query_class":"CSS","school_sft":"","parent_sft":"","school_privacy_policy":"","has_review":null,"is_sponser_post":"","is_guest_post":""},"yoast_head":"\nUsing the Bootstrap Framework to Create a Carousel | Career Karma<\/title>\n<meta name=\"description\" content=\"Learn how to employ Bootstrap to create a carousel on Career Karma\" \/>\n<meta name=\"robots\" content=\"index, follow, max-snippet:-1, max-image-preview:large, max-video-preview:-1\" \/>\n<link rel=\"canonical\" href=\"https:\/\/careerkarma.com\/blog\/bootstrap-carousel\/\" \/>\n<meta property=\"og:locale\" content=\"en_US\" \/>\n<meta property=\"og:type\" content=\"article\" \/>\n<meta property=\"og:title\" content=\"Using the Bootstrap Framework to Create a Carousel\" \/>\n<meta property=\"og:description\" content=\"Learn how to employ Bootstrap to create a carousel on Career Karma\" \/>\n<meta property=\"og:url\" content=\"https:\/\/careerkarma.com\/blog\/bootstrap-carousel\/\" \/>\n<meta property=\"og:site_name\" content=\"Career Karma\" \/>\n<meta property=\"article:publisher\" content=\"http:\/\/facebook.com\/careerkarmaapp\" \/>\n<meta property=\"article:published_time\" content=\"2020-10-01T21:48:02+00:00\" \/>\n<meta property=\"article:modified_time\" content=\"2020-12-29T18:59:05+00:00\" \/>\n<meta property=\"og:image\" content=\"https:\/\/careerkarma.com\/blog\/wp-content\/uploads\/2020\/10\/carousel.jpg\" \/>\n\t<meta property=\"og:image:width\" content=\"1200\" \/>\n\t<meta property=\"og:image:height\" content=\"675\" \/>\n\t<meta property=\"og:image:type\" content=\"image\/jpeg\" \/>\n<meta name=\"author\" content=\"Christina Kopecky\" \/>\n<meta name=\"twitter:card\" content=\"summary_large_image\" \/>\n<meta name=\"twitter:creator\" content=\"@career_karma\" \/>\n<meta name=\"twitter:site\" content=\"@career_karma\" \/>\n<meta name=\"twitter:label1\" content=\"Written by\" \/>\n\t<meta name=\"twitter:data1\" content=\"Christina Kopecky\" \/>\n\t<meta name=\"twitter:label2\" content=\"Est. reading time\" \/>\n\t<meta name=\"twitter:data2\" content=\"23 minutes\" \/>\n<script type=\"application\/ld+json\" class=\"yoast-schema-graph\">{\"@context\":\"https:\/\/schema.org\",\"@graph\":[{\"@type\":\"Article\",\"@id\":\"https:\/\/careerkarma.com\/blog\/bootstrap-carousel\/#article\",\"isPartOf\":{\"@id\":\"https:\/\/careerkarma.com\/blog\/bootstrap-carousel\/\"},\"author\":{\"name\":\"Christina Kopecky\",\"@id\":\"https:\/\/careerkarma.com\/blog\/#\/schema\/person\/ae0cdc4a5d198690d78482646894074e\"},\"headline\":\"Using the Bootstrap Framework to Create a Carousel\",\"datePublished\":\"2020-10-01T21:48:02+00:00\",\"dateModified\":\"2020-12-29T18:59:05+00:00\",\"mainEntityOfPage\":{\"@id\":\"https:\/\/careerkarma.com\/blog\/bootstrap-carousel\/\"},\"wordCount\":818,\"commentCount\":0,\"image\":{\"@id\":\"https:\/\/careerkarma.com\/blog\/bootstrap-carousel\/#primaryimage\"},\"thumbnailUrl\":\"https:\/\/careerkarma.com\/blog\/wp-content\/uploads\/2020\/10\/carousel.jpg\",\"articleSection\":[\"CSS\"],\"inLanguage\":\"en-US\",\"potentialAction\":[{\"@type\":\"CommentAction\",\"name\":\"Comment\",\"target\":[\"https:\/\/careerkarma.com\/blog\/bootstrap-carousel\/#respond\"]}]},{\"@type\":\"WebPage\",\"@id\":\"https:\/\/careerkarma.com\/blog\/bootstrap-carousel\/\",\"url\":\"https:\/\/careerkarma.com\/blog\/bootstrap-carousel\/\",\"name\":\"Using the Bootstrap Framework to Create a Carousel | Career Karma\",\"isPartOf\":{\"@id\":\"https:\/\/careerkarma.com\/blog\/#website\"},\"primaryImageOfPage\":{\"@id\":\"https:\/\/careerkarma.com\/blog\/bootstrap-carousel\/#primaryimage\"},\"image\":{\"@id\":\"https:\/\/careerkarma.com\/blog\/bootstrap-carousel\/#primaryimage\"},\"thumbnailUrl\":\"https:\/\/careerkarma.com\/blog\/wp-content\/uploads\/2020\/10\/carousel.jpg\",\"datePublished\":\"2020-10-01T21:48:02+00:00\",\"dateModified\":\"2020-12-29T18:59:05+00:00\",\"author\":{\"@id\":\"https:\/\/careerkarma.com\/blog\/#\/schema\/person\/ae0cdc4a5d198690d78482646894074e\"},\"description\":\"Learn how to employ Bootstrap to create a carousel on Career Karma\",\"breadcrumb\":{\"@id\":\"https:\/\/careerkarma.com\/blog\/bootstrap-carousel\/#breadcrumb\"},\"inLanguage\":\"en-US\",\"potentialAction\":[{\"@type\":\"ReadAction\",\"target\":[\"https:\/\/careerkarma.com\/blog\/bootstrap-carousel\/\"]}]},{\"@type\":\"ImageObject\",\"inLanguage\":\"en-US\",\"@id\":\"https:\/\/careerkarma.com\/blog\/bootstrap-carousel\/#primaryimage\",\"url\":\"https:\/\/careerkarma.com\/blog\/wp-content\/uploads\/2020\/10\/carousel.jpg\",\"contentUrl\":\"https:\/\/careerkarma.com\/blog\/wp-content\/uploads\/2020\/10\/carousel.jpg\",\"width\":1200,\"height\":675},{\"@type\":\"BreadcrumbList\",\"@id\":\"https:\/\/careerkarma.com\/blog\/bootstrap-carousel\/#breadcrumb\",\"itemListElement\":[{\"@type\":\"ListItem\",\"position\":1,\"name\":\"Blog\",\"item\":\"https:\/\/careerkarma.com\/blog\/\"},{\"@type\":\"ListItem\",\"position\":2,\"name\":\"CSS\",\"item\":\"https:\/\/careerkarma.com\/blog\/css\/\"},{\"@type\":\"ListItem\",\"position\":3,\"name\":\"Using the Bootstrap Framework to Create a Carousel\"}]},{\"@type\":\"WebSite\",\"@id\":\"https:\/\/careerkarma.com\/blog\/#website\",\"url\":\"https:\/\/careerkarma.com\/blog\/\",\"name\":\"Career Karma\",\"description\":\"Latest Coding Bootcamp News & Career Hacks from Industry Insiders\",\"potentialAction\":[{\"@type\":\"SearchAction\",\"target\":{\"@type\":\"EntryPoint\",\"urlTemplate\":\"https:\/\/careerkarma.com\/blog\/?s={search_term_string}\"},\"query-input\":{\"@type\":\"PropertyValueSpecification\",\"valueRequired\":true,\"valueName\":\"search_term_string\"}}],\"inLanguage\":\"en-US\"},{\"@type\":\"Person\",\"@id\":\"https:\/\/careerkarma.com\/blog\/#\/schema\/person\/ae0cdc4a5d198690d78482646894074e\",\"name\":\"Christina Kopecky\",\"image\":{\"@type\":\"ImageObject\",\"inLanguage\":\"en-US\",\"@id\":\"https:\/\/careerkarma.com\/blog\/#\/schema\/person\/image\/\",\"url\":\"https:\/\/careerkarma.com\/blog\/wp-content\/uploads\/2020\/06\/image-3-150x150.jpg\",\"contentUrl\":\"https:\/\/careerkarma.com\/blog\/wp-content\/uploads\/2020\/06\/image-3-150x150.jpg\",\"caption\":\"Christina Kopecky\"},\"description\":\"Christina is an experienced technical writer, covering topics as diverse as Java, SQL, Python, and web development. She earned her Master of Music in flute performance from the University of Kansas and a bachelor's degree in music with minors in French and mass communication from Southeast Missouri State. Prior to joining the Career Karma team in June 2020, Christina was a teaching assistant, team lead, and section lead at Lambda School, where she led student groups, performed code and project reviews, and debugged problems for students. Christina's technical content is featured frequently in publications like Codecademy, Repl.it, and Educative.\",\"sameAs\":[\"http:\/\/www.linkedin.com\/in\/cmvnk\"],\"url\":\"https:\/\/careerkarma.com\/blog\/author\/christina-kopecky\/\"}]}<\/script>\n<!-- \/ Yoast SEO Premium plugin. -->","yoast_head_json":{"title":"Using the Bootstrap Framework to Create a Carousel | Career Karma","description":"Learn how to employ Bootstrap to create a carousel on Career Karma","robots":{"index":"index","follow":"follow","max-snippet":"max-snippet:-1","max-image-preview":"max-image-preview:large","max-video-preview":"max-video-preview:-1"},"canonical":"https:\/\/careerkarma.com\/blog\/bootstrap-carousel\/","og_locale":"en_US","og_type":"article","og_title":"Using the Bootstrap Framework to Create a Carousel","og_description":"Learn how to employ Bootstrap to create a carousel on Career Karma","og_url":"https:\/\/careerkarma.com\/blog\/bootstrap-carousel\/","og_site_name":"Career Karma","article_publisher":"http:\/\/facebook.com\/careerkarmaapp","article_published_time":"2020-10-01T21:48:02+00:00","article_modified_time":"2020-12-29T18:59:05+00:00","og_image":[{"width":1200,"height":675,"url":"https:\/\/careerkarma.com\/blog\/wp-content\/uploads\/2020\/10\/carousel.jpg","type":"image\/jpeg"}],"author":"Christina Kopecky","twitter_card":"summary_large_image","twitter_creator":"@career_karma","twitter_site":"@career_karma","twitter_misc":{"Written by":"Christina Kopecky","Est. reading time":"23 minutes"},"schema":{"@context":"https:\/\/schema.org","@graph":[{"@type":"Article","@id":"https:\/\/careerkarma.com\/blog\/bootstrap-carousel\/#article","isPartOf":{"@id":"https:\/\/careerkarma.com\/blog\/bootstrap-carousel\/"},"author":{"name":"Christina Kopecky","@id":"https:\/\/careerkarma.com\/blog\/#\/schema\/person\/ae0cdc4a5d198690d78482646894074e"},"headline":"Using the Bootstrap Framework to Create a Carousel","datePublished":"2020-10-01T21:48:02+00:00","dateModified":"2020-12-29T18:59:05+00:00","mainEntityOfPage":{"@id":"https:\/\/careerkarma.com\/blog\/bootstrap-carousel\/"},"wordCount":818,"commentCount":0,"image":{"@id":"https:\/\/careerkarma.com\/blog\/bootstrap-carousel\/#primaryimage"},"thumbnailUrl":"https:\/\/careerkarma.com\/blog\/wp-content\/uploads\/2020\/10\/carousel.jpg","articleSection":["CSS"],"inLanguage":"en-US","potentialAction":[{"@type":"CommentAction","name":"Comment","target":["https:\/\/careerkarma.com\/blog\/bootstrap-carousel\/#respond"]}]},{"@type":"WebPage","@id":"https:\/\/careerkarma.com\/blog\/bootstrap-carousel\/","url":"https:\/\/careerkarma.com\/blog\/bootstrap-carousel\/","name":"Using the Bootstrap Framework to Create a Carousel | Career Karma","isPartOf":{"@id":"https:\/\/careerkarma.com\/blog\/#website"},"primaryImageOfPage":{"@id":"https:\/\/careerkarma.com\/blog\/bootstrap-carousel\/#primaryimage"},"image":{"@id":"https:\/\/careerkarma.com\/blog\/bootstrap-carousel\/#primaryimage"},"thumbnailUrl":"https:\/\/careerkarma.com\/blog\/wp-content\/uploads\/2020\/10\/carousel.jpg","datePublished":"2020-10-01T21:48:02+00:00","dateModified":"2020-12-29T18:59:05+00:00","author":{"@id":"https:\/\/careerkarma.com\/blog\/#\/schema\/person\/ae0cdc4a5d198690d78482646894074e"},"description":"Learn how to employ Bootstrap to create a carousel on Career Karma","breadcrumb":{"@id":"https:\/\/careerkarma.com\/blog\/bootstrap-carousel\/#breadcrumb"},"inLanguage":"en-US","potentialAction":[{"@type":"ReadAction","target":["https:\/\/careerkarma.com\/blog\/bootstrap-carousel\/"]}]},{"@type":"ImageObject","inLanguage":"en-US","@id":"https:\/\/careerkarma.com\/blog\/bootstrap-carousel\/#primaryimage","url":"https:\/\/careerkarma.com\/blog\/wp-content\/uploads\/2020\/10\/carousel.jpg","contentUrl":"https:\/\/careerkarma.com\/blog\/wp-content\/uploads\/2020\/10\/carousel.jpg","width":1200,"height":675},{"@type":"BreadcrumbList","@id":"https:\/\/careerkarma.com\/blog\/bootstrap-carousel\/#breadcrumb","itemListElement":[{"@type":"ListItem","position":1,"name":"Blog","item":"https:\/\/careerkarma.com\/blog\/"},{"@type":"ListItem","position":2,"name":"CSS","item":"https:\/\/careerkarma.com\/blog\/css\/"},{"@type":"ListItem","position":3,"name":"Using the Bootstrap Framework to Create a Carousel"}]},{"@type":"WebSite","@id":"https:\/\/careerkarma.com\/blog\/#website","url":"https:\/\/careerkarma.com\/blog\/","name":"Career Karma","description":"Latest Coding Bootcamp News & Career Hacks from Industry Insiders","potentialAction":[{"@type":"SearchAction","target":{"@type":"EntryPoint","urlTemplate":"https:\/\/careerkarma.com\/blog\/?s={search_term_string}"},"query-input":{"@type":"PropertyValueSpecification","valueRequired":true,"valueName":"search_term_string"}}],"inLanguage":"en-US"},{"@type":"Person","@id":"https:\/\/careerkarma.com\/blog\/#\/schema\/person\/ae0cdc4a5d198690d78482646894074e","name":"Christina Kopecky","image":{"@type":"ImageObject","inLanguage":"en-US","@id":"https:\/\/careerkarma.com\/blog\/#\/schema\/person\/image\/","url":"https:\/\/careerkarma.com\/blog\/wp-content\/uploads\/2020\/06\/image-3-150x150.jpg","contentUrl":"https:\/\/careerkarma.com\/blog\/wp-content\/uploads\/2020\/06\/image-3-150x150.jpg","caption":"Christina Kopecky"},"description":"Christina is an experienced technical writer, covering topics as diverse as Java, SQL, Python, and web development. She earned her Master of Music in flute performance from the University of Kansas and a bachelor's degree in music with minors in French and mass communication from Southeast Missouri State. Prior to joining the Career Karma team in June 2020, Christina was a teaching assistant, team lead, and section lead at Lambda School, where she led student groups, performed code and project reviews, and debugged problems for students. Christina's technical content is featured frequently in publications like Codecademy, Repl.it, and Educative.","sameAs":["http:\/\/www.linkedin.com\/in\/cmvnk"],"url":"https:\/\/careerkarma.com\/blog\/author\/christina-kopecky\/"}]}},"_links":{"self":[{"href":"https:\/\/careerkarma.com\/blog\/wp-json\/wp\/v2\/posts\/23480","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/careerkarma.com\/blog\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/careerkarma.com\/blog\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/careerkarma.com\/blog\/wp-json\/wp\/v2\/users\/77"}],"replies":[{"embeddable":true,"href":"https:\/\/careerkarma.com\/blog\/wp-json\/wp\/v2\/comments?post=23480"}],"version-history":[{"count":0,"href":"https:\/\/careerkarma.com\/blog\/wp-json\/wp\/v2\/posts\/23480\/revisions"}],"wp:featuredmedia":[{"embeddable":true,"href":"https:\/\/careerkarma.com\/blog\/wp-json\/wp\/v2\/media\/23481"}],"wp:attachment":[{"href":"https:\/\/careerkarma.com\/blog\/wp-json\/wp\/v2\/media?parent=23480"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/careerkarma.com\/blog\/wp-json\/wp\/v2\/categories?post=23480"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/careerkarma.com\/blog\/wp-json\/wp\/v2\/tags?post=23480"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}