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,
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 && 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(); } });