"Bootstrap tabs with auto move to next tab (loop continue or one time))"
Bootstrap 3.2.0 Snippet by trevorhutt

<link href="//netdna.bootstrapcdn.com/bootstrap/3.2.0/css/bootstrap.min.css" rel="stylesheet" id="bootstrap-css"> <script src="//netdna.bootstrapcdn.com/bootstrap/3.2.0/js/bootstrap.min.js"></script> <script src="//code.jquery.com/jquery-1.11.1.min.js"></script> <!------ Include the above in your HEAD tag ----------> <!-- You can use both cycle one time all the tabs or continue loop for all tabs. --> <section style="background:#efefe9;"> <div class="container"> <div class="row"> <div class="board"> <!-- <h2>Welcome to IGHALO!<sup>™</sup></h2>--> <div class="board-inner"> <ul class="nav nav-tabs" id="myTab"> <div class="liner"></div> <li class="active"> <a href="#home" data-toggle="tab" title="welcome"> <span class="round-tabs one"> <i class="glyphicon glyphicon-home"></i> </span> </a> </li> <li> <a href="#profile" data-toggle="tab" title="profile"> <span class="round-tabs two"> <i class="glyphicon glyphicon-user"></i> </span> </a> </li> <li> <a href="#messages" data-toggle="tab" title="bootsnipp goodies"> <span class="round-tabs three"> <i class="glyphicon glyphicon-gift"></i> </span> </a> </li> <li> <a href="#settings" data-toggle="tab" title="blah blah"> <span class="round-tabs four"> <i class="glyphicon glyphicon-comment"></i> </span> </a> </li> <li> <a href="#doner" data-toggle="tab" title="completed"> <span class="round-tabs five"> <i class="glyphicon glyphicon-ok"></i> </span> </a> </li> </ul> </div> <!-- board-inner --> <div class="tab-content"> <div class="tab-pane fade in active" id="home"> <h3 class="head text-center">Welcome to Bootsnipp<sup>™</sup> <span style="color:#f48260;">♥</span></h3> <p class="narrow text-center"> Lorem ipsum dolor sit amet, his ea mollis fabellas principes. Quo mazim facilis tincidunt ut, utinam saperet facilisi an vim. </p> <p class="text-center"> <a href="" class="btn btn-success"> start using bootsnipp <span style="margin-left:10px;" class="glyphicon glyphicon-send"></span></a> </p> </div> <div class="tab-pane fade" id="profile"> <h3 class="head text-center">Create a Bootsnipp<sup>™</sup> Profile</h3> <p class="narrow text-center"> Lorem ipsum dolor sit amet, his ea mollis fabellas principes. Quo mazim facilis tincidunt ut, utinam saperet facilisi an vim. </p> <p class="text-center"> <a href="" class="btn btn-success"> create your profile <span style="margin-left:10px;" class="glyphicon glyphicon-send"></span></a> </p> </div> <div class="tab-pane fade" id="messages"> <h3 class="head text-center">Bootsnipp goodies</h3> <p class="narrow text-center"> Lorem ipsum dolor sit amet, his ea mollis fabellas principes. Quo mazim facilis tincidunt ut, utinam saperet facilisi an vim. </p> <p class="text-center"> <a href="" class="btn btn-success"> start using bootsnipp <span style="margin-left:10px;" class="glyphicon glyphicon-send"></span></a> </p> </div> <div class="tab-pane fade" id="settings"> <h3 class="head text-center">Drop comments!</h3> <p class="narrow text-center"> Lorem ipsum dolor sit amet, his ea mollis fabellas principes. Quo mazim facilis tincidunt ut, utinam saperet facilisi an vim. </p> <p class="text-center"> <a href="" class="btn btn-success"> start using bootsnipp <span style="margin-left:10px;" class="glyphicon glyphicon-send"></span></a> </p> </div> <div class="tab-pane fade" id="doner"> <div class="text-center"> <i class="img-intro icon-checkmark-circle"></i> </div> <h3 class="head text-center">thanks for staying tuned! <span style="color:#f48260;">♥</span> Bootstrap</h3> <p class="narrow text-center"> Lorem ipsum dolor sit amet, his ea mollis fabellas principes. Quo mazim facilis tincidunt ut, utinam saperet facilisi an vim. </p> </div> <div class="clearfix"></div> </div> <!-- tab-content --> </div> <!-- board --> </div><!-- row --> </div><!-- container --> </section>
.board { margin: 60px auto; min-height: 500px; background: #fff; -webkit-box-shadow: 5px 5px #ccc,-5px 10px #ddd,10px -5px #dadada; box-shadow: 5px 5px #ccc,-5px 10px #ddd,10px -5px #dadada; } .board > div.board-inner { background: #fafafa url(http://subtlepatterns.com/patterns/geometry2.png); background-size: 30%; } .board .liner { height: 2px; background: #ddd; position: absolute; width: 80%; margin: 0 auto; left: 0; right: 0; top: 50%; z-index: 1; } .board p.narrow { width: 60%; margin: 10px auto; } .board .nav-tabs { position: relative; /* border-bottom: 0; */ /* width: 80%; */ margin: 40px auto 0; } .board .nav-tabs > li { width: 20%; } .board .nav-tabs > li a { width: 70px; height: 70px; margin: 20px auto; -webkit-border-radius: 50%; -moz-border-radius: 50%; border-radius: 50%; border: none; padding: 0; } .board .nav-tabs > li a:hover { background: transparent; } .board .nav-tabs > li.active > a, .board .nav-tabs > li.active > a:hover, .board .nav-tabs > li.active > a:focus { color: #555555; cursor: default; background: none !important; border-width: 0px !important; border-bottom-color: transparent; } .board .nav-tabs > li.active span.round-tabs.one, .board .nav-tabs > li.active span.round-tabs.two, .board .nav-tabs > li.active span.round-tabs.three, .board .nav-tabs > li.active span.round-tabs.four, .board .nav-tabs > li.active span.round-tabs.five { background: #fff !important; border-color: #ddd; } .board .nav-tabs > li.active:after { content: " "; position: absolute; left: 45%; opacity: 1; margin: 0 auto; bottom: 0px; border: 10px solid transparent; border-bottom-color: #ddd; } .board .nav-tabs > li:after { content: " "; position: absolute; left: 45%; opacity: 0; margin: 0 auto; bottom: 0px; border: 5px solid transparent; border-bottom-color: #ddd; transition: 0.1s ease-in-out; } .board .tab-content .tab-pane { position: relative; padding-top: 50px; } .board .tab-content .tab-pane .head { font-family: 'Roboto Condensed', sans-serif; font-size: 25px; text-transform: uppercase; padding-bottom: 10px; } .board:after { position: absolute; bottom: 0; width: 0; height: 0; border-top: 20px solid #000; border-right: 20px solid #000; border-bottom: 20px solid transparent; border-left: 20px solid transparent; } span.round-tabs { width: 70px; height: 70px; line-height: 70px; display: inline-block; -webkit-border-radius: 50%; -moz-border-radius: 50%; border-radius: 50%; background: #fff; z-index: 2; position: absolute; left: 0; text-align: center; font-size: 25px; border-width: 2px; border-style: solid; border-color: transparent; } span.round-tabs.one { color: #22c222; border-color: #22c222; } span.round-tabs.two { color: #febe29; border-color: #febe29; } span.round-tabs.three { color: #3e5e9a; border-color: #3e5e9a; } span.round-tabs.four { color: #f1685e; border-color: #f1685e; } span.round-tabs.five { color: #999; border-color: #999; } @media (max-width: 585px) { .board { width: 90%; height: auto !important; } span.round-tabs { font-size: 16px; width: 50px; height: 50px; line-height: 50px; } .tab-content .head { font-size: 20px; } .nav-tabs > li a { width: 50px; height: 50px; line-height: 50px; } li.active:after { content: " "; position: absolute; left: 35%; } }
$(function(){ $('a[title]').tooltip(); // Tab Pane continue moving var tabCarousel = setInterval(function() { var tabs = $('.nav-tabs > li'), active = tabs.filter('.active'), next = active.next('li'), toClick = next.length ? next.find('a') : tabs.eq(0).find('a'); toClick.trigger('click'); }, 3000); /* // Tab-Pane Cycle one time var tabChange = function(){ var tabs = $('.nav-tabs > li'); var active = tabs.filter('.active'); var next = active.next('li').length? active.next('li').find('a') : tabs.filter(':first-child').find('a'); // Use the Bootsrap tab show method next.tab('show') } // Tab Cycle function var tabCycle = setInterval(tabChange, 5000); // Tab click event handler $('.nav-tabs a').click(function(e) { e.preventDefault(); // Stop the cycle clearInterval(tabCycle); // Show the clicked tabs associated tab-pane $(this).tab('show') // Start the cycle again in a predefined amount of time setTimeout(function(){ tabCycle = setInterval(tabChange, 5000) }, 30000); }); */ });

Related: See More


Questions / Comments: