How to use multiple Bootstrap carousel in same page

You have no need to bind carousel function when using the single Bootstrap carousel, because the bootstrap carousel by default binding it using the class “carousel”, but if you Want to add Bootstrap multiple carousel in same page then you have to make some changes. check below which changes you need to change

<div id="carousel-example-one" class="carousel slide" data-ride="carousel">

add different id to both carousel’s

<div id="carousel-example-one" class="carousel slide" data-ride="carousel">
</div>

<div id="carousel-example-two" class="carousel slide" data-ride="carousel">
</div>

 

make sure you have to update #id of navigations also

<ol class="carousel-indicators">
    <li data-target="#carousel-example-generic" data-slide-to="0" class="active"></li>
    <li data-target="#carousel-example-generic" data-slide-to="1"></li>
    <li data-target="#carousel-example-generic" data-slide-to="2"></li>
</ol>

to

<div id="carousel-example-one" class="carousel slide" data-ride="carousel">
  <!-- Indicators -->
  <ol class="carousel-indicators">
	  <li data-target="#carousel-example-one" data-slide-to="0" class="active"></li>
	  <li data-target="#carousel-example-one" data-slide-to="1"></li>
	  <li data-target="#carousel-example-one" data-slide-to="2"></li>
  </ol>

  <!-- Wrapper for slides -->
  <div class="carousel-inner" role="listbox">
    
  </div>

  <!-- Controls -->
  <a class="left carousel-control" href="#carousel-example-one" 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-example-one" role="button" data-slide="next">
	  <span class="glyphicon glyphicon-chevron-right" aria-hidden="true"></span>
	  <span class="sr-only">Next</span>
  </a>
</div>


<div id="carousel-example-two" class="carousel slide" data-ride="carousel">
	  <!-- Indicators -->
	  <ol class="carousel-indicators">
		  <li data-target="#carousel-example-two" data-slide-to="0" class="active"></li>
		  <li data-target="#carousel-example-two" data-slide-to="1"></li>
		  <li data-target="#carousel-example-two" data-slide-to="2"></li>
	  </ol>

	  <!-- Wrapper for slides -->
	  <div class="carousel-inner" role="listbox">

	  </div>

	  <!-- Controls -->
	  <a class="left carousel-control" href="#carousel-example-two" 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-example-two" role="button" data-slide="next">
	    <span class="glyphicon glyphicon-chevron-right" aria-hidden="true"></span>
	    <span class="sr-only">Next</span>
	  </a>
</div>

and now manually bind the carousel

$(document).ready(function(){
	$('#carousel-one').carousel();
	$('#carousel-two').carousel();
})

or you can bind with chain

$(document).ready(function(){
	$('#carousel-one, #carousel-two').carousel();
})

use options of carousel

$(document).ready(function(){
	$('#carousel-one').carousel({
		interval: 2000,
		keyboard: false,
		pause: hover
	});
})

View Demo

Was this post helpful?
Let us know if you liked the post. That’s the only way we can improve.
Yes57
No30
Harinder Singh

Harinder Singh

My name is Harinder Singh and I specialize in Software industry. I consider myself as a life learner. I love learning new concepts, embracing new ideas and reading and searching for innovation.