Written by A WordPress Life

Multiple Bootstrap Carousel Slideshow

How do i add Multiple Bootstrap Carousel Slideshow slider on single page or same page or one page?

In this tutorial we are providing a sample of working source code. First download the sample code using Download Code button at bottom of the page.

Adding and creating multiple bootstrap carousel slider on page is so easy and simple.

So, let’s start with sample code.

After source code downloading complete you will get a zip file “multiple-bootstrap-carousels.zip”. Extract the zip file anywhere into local computer system.

After extraction you find a directory named “multiple-bootstrap-carousels”, in that directory you will get following assets:

  1. CSS Directory
  2. Fonts Directory
  3. Images Directory
  4. JS Directory
  5. CSS Directory
  6. HTML File – multiple-bootstrap-carousels.html

What are these attests?

These assets are required to create bootstrap multiple carousel slider.

  • CSS directory contains a file “bootstrap.min.css” which is use to design responsive HTML pages.
  • Fonts directory are used by bootstrap css to generates various built graphic icon. Carousel slider arrow navigation control also generated by this. You can check here.
  • Images directory are 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”. jquery.min.js file is a JavaScript library the purpose of jquery use JavaScript on websites. 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 containg all design and code part of multiple carousel slider.

 

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 computer then here some fee code editor tools, download and install any code editor tool:

  1. Download Notepad++
  2. Download Editplus

In Head section we have loaded all required css & js file and four carousel JS codes as below:

 

 <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">
 
 <!-- bootstrap js library -->
 <script src="js/jquery.min.js"></script>
 
 <!-- jQuery latest 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 mouseenter 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 Body section, we are defining the two carousel html code. Now, explaining the working of first slider code. We have divide a row class div into two columns using col-md-6 class. And into 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 slidesshow end -------------->
  </div>
 </div>
 <!-------------- first column end -------------->
</row>

There three parts of carousel slider into above HTML code

  • Slider Bullets
  • Slider 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 bootstrap css file. And each <li> tag has a attribute data-target=”#carousel-1″ where #carousel-1 ID is the same id we are using in first carousel js code into example code.

Slider Image Slides section has a div with class item. In each, of this div we have added a image tag to load slide image.

Slider Navigation are 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 are used into first carousel slidesshow js code to activate the first slider functionality into first slider html code.

Into our second slider code we have assigned an 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 finds the tutorial & example code is descriptive and working for you. We have commented each and every section of code into example. So, you can understand easily each and every code.

Guys if you have 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 reading, using and supporting this tutorial.

Find the Useful References links below which we looked to write this tutorial for you:

 

Leave a Reply

%d bloggers like this: