Dynamically Create Bootstrap Tabs With Carousel Using PHP and jQuery

In this tutorial, we will learn how to create tabs based carousel. We are using bootstrap tabs and carousel functionality. We got a situation where a web page has 20 tabs in a series then it is very difficult to manage UI.

it will show a horizontal bar if the length of the tabs exceeds div width. The best and most excellent way is to create a carousel on tabs and provide end-user features to navigate tabs.

Also check out other tutorials on bootstrap tabs and pills,

• Bootstrap Tabs With Carousel

How to Create Dynamic Tabs with Bootstrap Using Carousel

Step 1: Initialize the carousel library.

<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 the tabs array in PHP, which will contain the tab name.

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

Step 3: Finally, we will define the Carousel HTML structure with PHP.

<div id="itemdCarousel" class="nav-bar">
 <div style="margin-left: 68px ! important; width: 77%; height: 10px;margin-bottom:22px" class="navbar-inner">
  <div class="carousel slide" id="myCarousel"> 
   <div id="myCarousel" class="carousel slide">  
    <!-- Carousel items -->  
    <div class="carousel-inner">
     <ul class="carosel-ul nav">
      <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 &amp;&amp; count($tabs) !=$i ):
         echo '</div><div class="item">';
        endif;
       endforeach;
       
       ?>
        
      </div>
     </ul>
    </div>
   </div>
  </div>
  <!-- Carousel nav -->
  <a class="carousel-control left nav-link" id="prev" style="display:none" href="#myCarousel" data-slide="prev">‹</a> 
  <?php if(count($tabs) > 5) :?>
 <a class="carousel-control right nav-link" id="next" href="#myCarousel" style="" data-slide="next">›</a>
  <?php endif;?>
  <input type="hidden" name="itemcount" id="itemcount" value="<?php echo count($existRec);?>">
</div>
</div>

Step 4: Finally java script Carousel method to show and hide nav bar.

jQuery('.carousel').carousel({  
  pause: true,
  interval: false
});

jQuery(".nav-link").live('click', function()
  {
 if(jQuery(this).hasClass('right')) {
    var tot = parseInt(jQuery('#itemcount').val());
    jQuery('#itemcount').val(tot-5);
    jQuery('#prev').show();
 }
});