Bootstrap Tabs With Carousel

in previous post we have learn how to create Boostrap pills, In this tutorial we will learn how to create
tabs based carousel. We are using bootstrap tabs and carousel functionality.We got a situation like a web page has 20 tabs in a series then it is very difficult to manage UI. it will show horizontal bar if the tabs length exceed div width.The best and excellent way is create carousel on tabs and provide a end user features to navigate tabs.

carousel-tabs

Also checkout other tutorials of bootstrap tabs and pills,

How to Create Dynamic Tabs with Bootstrap Using Carousel

Step 1: Initialize carousel library.

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, which will contain tab name.

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

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
25
26
27
28
29
<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 && 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.

Select Code
1
2
3
4
5
6
7
8
9
10
11
12
13
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();
        }
        });