Bootstrap 4 is too popular and the most widely used HTML framework for the developers. Bootstrap 4 delivers totally responsive webpages for every website. If you want a responsive website then never miss using the Bootstrap for designing, without it you need to code a lot of your own CSS code according to media screen.

In this tutorial, we will learn how to create multiple carousels using Bootstrap 4?

The carousel is a sideshow component of Bootstrap. In version 4, Bootstrap refines the design of carousel slide elements like updated next and previous navigation style, bullets style, and slide captions. The carousel is built with CSS, 3D transforms and JavaScript. You can create a slide using image, text, and custom HTML markup.

How To Create Multiple Carousels Using Bootstrap 4

The main features of Bootstrap 4 Carousel are:

  • Responsive
  • Autoplay
  • Autoplay Speed
  • Navigation

Required Resources to create Bootstrap Carousel SlideShow

Below the first section of code, we are loading the required bootstrap CSS file bootstrap.min.css and JavaScript files jquery.min.js, popper.min.js, bootstrap.min.js in the head section of HTML code.

Code Snippets (Part 1)

<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="utf-8"> 
	<meta name="viewport" content="width=device-width, initial-scale=1">
	<title>Create Multiple Carousels Bootstrap 4 By WordPress WP Themes</title>
	<!-- Latest compiled and minified CSS -->
	<link rel="stylesheet" href="css/bootstrap.min.css">
	<!-- jQuery library -->
	<script src="js/jquery.min.js"></script>
	<!-- Popper JS -->
	<script src="js/popper.min.js"></script>
	<!-- Latest compiled JavaScript -->
	<script src="js/bootstrap.min.js"></script>
	<script>
	<!-- carousel js function to run carousel -->
	jQuery( document ).ready(function() {
		// first carousel js function
		jQuery('#carousel-one').carousel({
			interval: 1000, // amount of time in milliseconds to delay between automatically cycling slides.
			keyboard: true,	// run slider using keyboard arrow key
			ride: 'carousel', // it's enable autoplay
		});
	});
	</script>
</head>

Below the second section of code, we are creating multiple carousels, we are explaining the first carousel code into in the body section of HTML code. Before starting carousel code we added two div, the first one is for container div and the second one is the row, in which all slider show in the column section of the Bootstrap grid.

In first carousel div, we added an id “carousel-one“, through this id carouel js function will bind like “jQuery(‘#carousel-one’).carousel({” and iniciate the carousel slide show automaticaly on page load.

Code Snippets (Part 2)

<!-- carousel one start -->
<div class="col-6 col-sm-6 col-md-6">
	<!-- carousel one html code start -->
	<h3 class="text-center m-2">Carousel One</h3><hr>
	<div id="carousel-one" class="carousel slide" data-ride="carousel">
		<!-- carousel indicators start -->
		<ol class="carousel-indicators">
			<li data-target="#carousel-one" data-slide-to="0" class="active"></li>
			<li data-target="#carousel-one" data-slide-to="1"></li>
			<li data-target="#carousel-one" data-slide-to="2"></li>
		</ol>
		<!-- carousel indicators end -->
		
		<!-- carousel navigation button slides start -->
		<div class="carousel-inner">
			<div class="carousel-item active">
				<img class="d-block w-100" src="images/1.jpg" alt="First Slide">
			</div>
				<div class="carousel-item">
			<img class="d-block w-100" src="images/2.jpg" alt="Second Slide">
			</div>
			<div class="carousel-item">
				<img class="d-block w-100" src="images/3.jpg" alt="Third Slide">
			</div>
		</div>
		<!-- carousel navigation button slides end -->
		
		<!-- carousel navigation button start -->
		<a class="carousel-control-prev" href="#carousel-one" 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-one" role="button" data-slide="next">
			<span class="carousel-control-next-icon" aria-hidden="true"></span>
			<span class="sr-only">Next</span>
		</a>
		<!-- carousel navigation button end -->
	</div>
	<!-- carousel one html code end -->
</div>
<!-- carousel one end -->

We are providing complete zip package of working multiple carousels HTML code. After download, the zip package, extract anywhere into the computer. Open the “index.html” file into any code editor from extracted “bootstrap-4-carousel” folder. All the code is well commented in the code for your help. If you face any problem then write to us below comment form for any help.

Thanks for reading our article about Create Multiple Carousels Bootstrap 4 with minimum coding. Your feedback on this tutorial is appreciated.

Cheers 🙂

0 Comments

Leave a Reply

Your email address will not be published. Required fields are marked *

This site uses Akismet to reduce spam. Learn how your comment data is processed.