Bootstrap 4 Carousel Tutorial

Carousel is a JavaScript component in Bootstrap allows you to add slider to your site. This works based on CSS 3D transform and allows you to add different variation of slideshows. By default the carousel will occupy full width of the screen, if required you should restrict the width using additional CSS.




Bootstrap 4 Carousel Tutorial

This tutorial covers the following chapters:

  1. Basics of carousel component
  2. Simple carousel with slides showing controls and text
  3. Carousel with slides and navigational arrows
  4. Carousel with slides and indicators on bottom
  5. Adding captions to slide images as title and description
  6. Controlling options

1. Basics of Bootstrap 4 Carousel Component

  • Bootstrap 4 carousel uses CSS 3D transform and JavaScript for creating slideshow. So you should include jQuery and bootstrap.min.js files in your HTML template for using carousel component. Refer our Bootstrap 4 starter template to get the starter template format.
  • By default the slides will rotate right to left and the rotation will stop on mouse hover.
  • The slides in the carousel will not rotate when the carousel is not visible on the browser. This works on all modern browsers using page visibility API.
  • The size of the slides are to be explicitly defined.
  • Use “img-fluid” class to ensure the carousel is responsive on all devices.

On all examples used on this tutorial, we restrict the width of carousel to 800px as we have used the same width for the image. The width is restricted using inline style by placing the whole carousel inside a <div> tag.

Offer: Get 92% discount of Mobirise Bootstrap site builder.

2. Simple Slide Only Carousel

This is the bare minimum carousel style with only slide images rotating automatically. The code for slide only carousel is given below:

Related:  Complete Guide to Setup WooCommerce Store in WordPress

<!DOCTYPE html>
<html lang="en">
<head>
<!-- Meta Tags for Bootstrap 4 -->
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
<!-- Bootstrap 4 CSS -->
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/css/bootstrap.min.css" integrity="sha384-Gn5384xqQ1aoWXA+058RXPxPg6fy4IWvTNh0E263XmFcJlSAwiGgFAW/dAiS6JXm" crossorigin="anonymous">
</head>
<body>
<!-- Start of Carousel -->
<div id="slider" class="carousel slide" data-ride="carousel">
<div class="carousel-inner" role="listbox">
<div class="carousel-item active">
<img class="d-block img-fluid" src="https://img.webnots.com/2017/05/BS_Slide1.jpg" alt="Slide1">
</div>
<div class="carousel-item">
<img class="d-block img-fluid" src="https://img.webnots.com/2017/05/BS_Slide2.jpg" alt="Slide2">
</div>
<div class="carousel-item">
<img class="d-block img-fluid" src="https://img.webnots.com/2017/05/BS_Slide3.jpg" alt="Slide3">
</div>
</div>
</div>
<!-- End of Carousel -->
<!-- Bootstrap 4 Scripts -->
<script src="https://code.jquery.com/jquery-3.2.1.slim.min.js" integrity="sha384-KJ3o2DKtIkvYIK3UENzmM7KCkRr/rE9/Qpg6aAZGJwFDMVNA/GpGFF93hXpG5KkN" crossorigin="anonymous"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.12.9/umd/popper.min.js" integrity="sha384-ApNbgh9B+Y1QKtv3Rn7W3mgPxhU9K/ScQsAP7hUibX39j7fakFPskvXusvfa0b4Q" crossorigin="anonymous"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/js/bootstrap.min.js" integrity="sha384-JZR6Spejh4U02d8jOt6vLEHfe/JQGiRRSQQxSfFWpi1MquVdAyjUar5+76PVCmYl" crossorigin="anonymous"></script>
</body>
</html>

And the slider will look like a plain image that slides with 5000ms interval by default.

Slide Only Carousel

  • The carousel starts with a <div> tag having a unique ID. In our example, #slider is the ID. The same <div> should include the classes “.carousel and “.slide” and the attribute data-ride=”carousel”.
  • Next the inner div tag with “.carousel-inner” and the attribute role=”listbox”.
  • Then another div for each carousel item with the class “.carousel-item“.
  • The img tag has “.d-block and “.img-fluid” in order to align the images properly on browser.

Use the codes in the below sections in-between the start and end of carousel sections in the above simple carousel code.

3. Carousel with Navigational Arrow

Let us add left and right navigational arrows to the carousel slides.

<div id="arrowslider" class="carousel slide" data-ride="carousel">
<div class="carousel-inner" role="listbox">
<div class="carousel-item active">
<img class="d-block img-fluid" src="https://img.webnots.com/2017/05/BS_Slide1.jpg" alt="Slide1">
</div>
<div class="carousel-item">
<img class="d-block img-fluid" src="https://img.webnots.com/2017/05/BS_Slide2.jpg" alt="Slide2">
</div>
<div class="carousel-item">
<img class="d-block img-fluid" src="https://img.webnots.com/2017/05/BS_Slide3.jpg" alt="Slide3">
</div>
</div>
<a class="carousel-control-prev" href="#arrowslider" role="button" data-slide="prev">
<span class="carousel-control-prev-icon" aria-hidden="true"></span>
<span class="sr-only">Previous Slide</span>
</a>
<a class="carousel-control-next" href="#arrowslider" role="button" data-slide="next">
<span class="carousel-control-next-icon" aria-hidden="true"></span>
<span class="sr-only">Next Slide</span>
</a>
</div>

Carousel with Arrows

Basically you should add additional code before the outer <div> tag keeping all other carousel items similar to previous slide only example. The navigational arrows are based on HTML anchor tags and uses the class “.carousel-control-prev” and “.carousel-control-next“. Remember to include the href attribute same as the main carousel container id for both previous and next arrows.

Related:  Create Slideshow with JavaScript Code

There are two span tags used for previous and next arrows to include the icons and screen reader text.

4. Carousel with Indicators

The third carousel option is to add slide indicators at bottom center of the images. This will help to navigate to that particular image instead of using arrows to move one by one.

<div id="sliderindicators" class="carousel slide" data-ride="carousel">
<ol class="carousel-indicators">
<li data-target="#sliderindicators" data-slide-to="0" class="active"></li>
<li data-target="#sliderindicators" data-slide-to="1"></li>
<li data-target="#sliderindicators" data-slide-to="2"></li>
</ol>
<div class="carousel-inner" role="listbox">
<div class="carousel-item active">
<img class="d-block img-fluid" src="https://img.webnots.com/2017/05/BS_Slide1.jpg" alt="Slide1">>
</div>
<div class="carousel-item">
<img class="d-block img-fluid" src="https://img.webnots.com/2017/05/BS_Slide2.jpg" alt="Slide2">
</div>
<div class="carousel-item">
<img class="d-block img-fluid" src="https://img.webnots.com/2017/05/BS_Slide3.jpg" alt="Slide3">
</div>
</div>
<a class="carousel-control-prev" href="#sliderindicators" 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="#sliderindicators" role="button" data-slide="next">
<span class="carousel-control-next-icon" aria-hidden="true"></span>
<span class="sr-only">Next</span>
</a>
</div>

Carousel with Indicators

The slider indicators work based on the ordered list.  The <ol> tag uses a class “.carousel-indicators” and each <li> tags in the list should contain two things:
  • The data-target attribute which should have the value same as the main carousel ID.
  • The data-slide-to attribute with the first value as 0 and increased to 1 and 2 for further two slides.
Remember the “.active” class is included on the first image to start the carousel at the first slide. You can make any of the slide active to start the slideshow from that slide.

5. Carousel with Captions

The final option is to add some title and description on the images like below:

Carousel with Captions

The code for the carousel with captions is given below:

<div id="slidercaption" class="carousel slide" data-ride="carousel">
<ol class="carousel-indicators">
<li data-target="#slidercaption" data-slide-to="0" class="active"></li>
<li data-target="#slidercaption" data-slide-to="1"></li>
<li data-target="#slidercaption" data-slide-to="2"></li>
</ol>
<div class="carousel-inner" role="listbox">
<div class="carousel-item active">
<img class="d-block img-fluid" src="https://img.webnots.com/2017/05/BS_Slide1.jpg" alt="Slide1">
<div class="carousel-caption d-none d-md-block">
<h3>Here is a caption for slide 1</h3>
<p>Here is short description for slide 1</p>
</div>
</div>
<div class="carousel-item">
<img class="d-block img-fluid" src="https://img.webnots.com/2017/05/BS_Slide2.jpg" alt="Slide2">
<div class="carousel-caption d-none d-md-block">
<h3>Here is a caption for slide 2</h3>
<p>Here is short description for slide 2</p>
</div>
</div>
<div class="carousel-item">
<img class="d-block img-fluid" src="https://img.webnots.com/2017/05/BS_Slide3.jpg" alt="Slide3">
<div class="carousel-caption d-none d-md-block">
<h3>Here is a caption for slide 3</h3>
<p>Here is short description for slide 3</p>
</div>
</div>
</div>
<a class="carousel-control-prev" href="#slidercaption" 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="#slidercaption" role="button" data-slide="next">
<span class="carousel-control-next-icon" aria-hidden="true"></span>
<span class="sr-only">Next</span>
</a>
</div>

You need to simply add new <div> within each carousel item below the <img> tag and use the class “.carousel-caption“. The class “.d-none” is used to hide the carousel captions on small mobile devices and bring it back on the medium sized devices using “.d-md-block“.

Related:  Bootstrap Testimonial Slider Widgets

You can remove”.d-none” and”.d-md-block” classes to show the slider captions on all screens including mobile devices. But ensure to use custom CSS media queries to adjust the font-size and alignment of slider captions.

6. Controlling Options for Carousel

Below are some of the controls you can use to modify the functioning of Bootstrap 4 carousel component.
Name of the ControlTypeDefault ValueShort Description
data-intervalnumber5000Time delay in milliseconds between the rotation of carousel images. You can set this value to false to stop auto rotating.
data-keyboardbooleantrueTrue value indicates that the carousel will respond to keyboard keys and “false” will deactivate the keyboard controls.
data-pausestring“hover”This is the control for pausing the slider on mouse over event. Setting the value to “null” will not pause the sliders and setting to hover will pause on mouse over.
data-ridestringfalseSetting the value to “carousel” will enable the autoplay on loading. And setting the value to “false” will start the autoplay mode only after the user manually cycles the first item.
data-wrapbooleantrueDecides the carousel should be looped continuously or have hard stops.
For example, add the below script on your HTML template to change the interval of the carousel slider to 1500 milliseconds.
<script>
$('.carousel').carousel({
  interval: 1500
})
</script>



Recommended Articles:

Leave a Comment