Bootstrap Carousel with Pills

Bootstrap library providing many useful plugin ,in this tutorial i will let you know how to create dynamic carousel or tabs with Bootstrap and PHP. Carousel is very important plugin now days, it used for slide images, tabs and create useful pagination based on group.I am taking static PHP array to create dynamic pills but you can pass from server-side.

Also checkout other tutorials of bootstrap tabs and pills,

Simple Example to Create Dynamic Bootstrap Pills

Step 1: First we need to initialize jquery and carousel file.

Select Code
1
2
<script src="//ajax.googleapis.com/ajax/libs/jquery/1.10.2/jquery.min.js"></script> 
<script src="/carousel.js"></script>

Step 2: we will define tabs array in php.

Select Code
1
$tabs = array('tab1', 'tab2', 'tab3', 'tab4','tab5');

Step 3: finally we will define Carousel HTML structure with php.

Select Code
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
<div id='itemdCarousel'>
 <div id="myCarousel" class="carousel slide">  
     <!-- Carousel items -->  
    <div class="carousel-inner">
	<ul class="thumbnails">
		<div class="item active">
		<?php $i=0;
		$tabs = array('tab1', 'tab2', 'tab3', 'tab4','tab5');
		foreach($tabs as $tab):
		echo "<li style='float:left;margin:0px 20px;' class='fc-button fc-button-today fc-state-default fc-corner-left fc-corner-right'>".$tab."</li>";
		$i++;
		if($i%3 == 0 && count($tabs) !=$i ):
		echo '</div><div class="item">';
		endif;
		endforeach;
		
		?>
        
  </div> 
  </ul></div></div>
  <!-- Carousel nav -->  
  <a class="carousel-control left" href="#myCarousel" data-slide="prev">‹</a>  
  <a class="carousel-control right" href="#myCarousel" data-slide="next">›</a>
</div>

Step 4: Now I am calling carousel method to show carousel on page.

Select Code
1
2
3
4
jQuery('.carousel').carousel({  
  pause: true,
  interval: false
});