How do I add Multiple Bootstrap Carousel Slideshow slider on a single page or one page?
In this tutorial, we are providing a sample of working source code. First, download the sample code using the Download Code button at the bottom of the page.
Adding and creating multiple bootstrap carousel slider on the page is so easy and simple.
So, let’s start with the sample code.
After source code downloading complete you will get a zip file “multiple-bootstrap-carousels.zip”. Extract the zip file anywhere into the local computer system.
After extraction you find a directory named “multiple-bootstrap-carousels”, in that directory you will get the following assets:
- CSS Directory
- Fonts Directory
- Images Directory
- JS Directory
- CSS Directory
- HTML File – multiple-bootstrap-carousels.html
What are these attests?
These assets are required to create a bootstrap multiple carousel sliders.
- CSS directory contains a file “bootstrap.min.css” which is used to design responsive HTML pages.
- Fonts directory are used by bootstrap CSS to generates the various built graphic icon. Carousel slider arrow navigation control also generated by this. You can check here.
- Images directory contains all images which we will use into carousel slider’s slides.
- JS directory are contains 2 js files “jquery.min.js” and “bootstrap.min.js”. a jquery.min.js file is a JavaScript library the purpose of jquery use JavaScript on websites. a bootstrap.min.js file is bootstrap framework js library file which is used to create bootstrap carousels, models forms, tool-tips, tabs etc. bootstrap.min.js file is dependent on jquery.min.js file, you need load first before using bootstrap js. You can more explore about bootstrap js library file here.
- HTML file (multiple-bootstrap-carousels.html) is containing all design and code part of multiple carousel sliders.
let’s learn more about multiple-bootstrap-carousels.html file.
You should open the HTML file into any code editor. If you have no code editor tool install on the computer then here some fee code editor tools, download and install any code editor tool:
In Head section we have loaded all required CSS & js file and four carousel JS codes as below:
Code
<head>
<title>Multiple Bootstrap Carousel Slidesshow Example</title>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<!-- bootstrap css library -->
<link rel="stylesheet" href="css/bootstrap.min.css">
<!-- jQuery latest library (load this library first) -->
<script src="js/jquery.min.js"></script>
<!-- bootstrap js library -->
<script src="js/bootstrap.min.js"></script>
<!-- carousel customizing css code -->
<style>
.carousel {
/* you can add customizing css here like slider height width */
}
</style>
<!-- carousel js code -->
<script>
/* first carousel slidesshow */
$('#carousel-1').carousel({
// Amount of time to delay between cycling slide, If false, no cycle
interval: 500,
// Pauses slide on mouse enter and resumes on mouseleave.
pause: "hover",
// Whether carousel should cycle continuously or have hard stops.
wrap: true,
// Whether the carousel should react to keyboard events.
keyboard: true
});
/* second carousel slidesshow */
$('#carousel-2').carousel({
interval: 1000,
wrap: true,
keyboard: true
});
/* third carousel slidesshow */
$('#carousel-3').carousel({
interval: 2000,
wrap: true,
keyboard: true
});
/* forth carousel slidesshow */
$('#carousel-4').carousel({
interval: 3000,
wrap: true,
keyboard: true
});
</script>
</head>
In the Body section, we are defining the two carousel HTML code. Now, explaining the working of the first slider code. We have divided a row class div into two columns using col-md-6 class. And into the first column, we added HTML code of first carousel slider same as below.
<div class="row">
<!-------------- first column start -------------->
<div class="col-md-6">
<div class="jumbotron">
<center><h3>Carousel One</h3></center>
<!-------------- first carousel slidesshow start -------------->
<div id="carousel-1" class="carousel slide" data-ride="carousel">
<!-- slides bulletes -->
<ol class="carousel-indicators">
<li data-target="#carousel-1" data-slide-to="0" class="active"></li>
<li data-target="#carousel-1" data-slide-to="1"></li>
<li data-target="#carousel-1" data-slide-to="2"></li>
</ol>
<!-- wrapper for slides -->
<div class="carousel-inner" role="listbox">
<!-- slides 1 -->
<div class="item active">
<img src="images/girl-1.jpg" alt="Chania">
</div>
<!-- slides 2 -->
<div class="item">
<img src="images/girl-2.jpg" alt="Chania">
</div>
<!-- slides 3 -->
<div class="item">
<img src="images/girl-3.jpg" alt="Flower">
</div>
</div>
<!-- left and right slides control arrrows -->
<a class="left carousel-control" href="#carousel-1" role="button" data-slide="prev">
<span class="glyphicon glyphicon-chevron-left" aria-hidden="true"></span>
<span class="sr-only">Previous</span>
</a>
<a class="right carousel-control" href="#carousel-1" role="button" data-slide="next">
<span class="glyphicon glyphicon-chevron-right" aria-hidden="true"></span>
<span class="sr-only">Next</span>
</a>
</div>
<!-------------- first carousel slide show end -------------->
</div>
</div>
<!-------------- first column end -------------->
</row>
There three parts of carousel slider into above HTML code
- Slider Bullets
- Image Slides
- Slider Navigation
Slider Bullets section it’s build using order list tag of HTML. <ol> uses a class named carousel-indicators, which defined into the bootstrap CSS file. And each <li> tag has a attribute data-target=”#carousel-1″ where #carousel-1 is the same ID we are using in first carousel js code into example code.
Slider Image Slides section has a div with a class item. In each, of this div, we have added an image tag to load slide image.
Slider Navigation is used to navigate image slides left or right direction. Navigation arrows are created by bootstrap graphic icons called Glyphicon. Navigation buttons are wrapped into anchor <a> tag with bootstrap carousel data attribute function and with carousel-control class. Into <a> tag into href attribute, we have added the same ID ( #carousel-1 ) as we added before into slider bullets part. This ID is used into first carousel slideshow js code to activate the first slider functionality into first slider HTML code.
Into our second slider code, we have assigned another ID #carousel-2 for all three parts of slider code like into second slider js code, second slider bullets, and navigation HTML code.
Hope! you guys find the tutorial & example code is descriptive and working for you. We have commented on each and every section of code into the example, so you could understand easily each and every code.
Guys if you have a suggestion regarding tutorial language & downloadable example code then please write to us at our mail. Our email address is awordpresslife{at}gmail{dot}com
Thanks to reading, using and supporting this tutorial.
Find the Useful References links below which we looked to write this tutorial for you:
