Php Flow » Jquery, Php

Bootstrap Carousel with Pills

Bootstrap library providing many useful plugin ,in this tutorial i will tell you how to create dynamic carousel with PHP. Carousel is very important plugin now days, it used for slide images, tabs and create useful pagination based on group.
In this tutorial we are creating carousel on pills.
Step 1: First we need to initialize jquery and carousel file.

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.

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

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

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: javascript code show carousel.

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

Result:

Did you enjoy this article? Share it!

About the Author:

Hi, This is Parvez Alam from India. I am software developer with 4 years’ experience in web development. I have submitted articles on PHP, Mysql, Magento,CSS, HTML, jQuery, web designing and social API. You can subscribe to my blog via RSS/Twitter/Google plus and Facebook. parvez1487(at)gmail(dot)com

Random Posts

Leave a Reply

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

*

You may use these HTML tags and attributes: <a href="" title=""> <abbr title=""> <acronym title=""> <b> <blockquote cite=""> <cite> <code> <del datetime=""> <em> <i> <q cite=""> <strike> <strong>