"auto rotate vertical tabs"
Bootstrap 3.3.0 Snippet by redknite

<link href="//maxcdn.bootstrapcdn.com/bootstrap/3.3.0/css/bootstrap.min.css" rel="stylesheet" id="bootstrap-css"> <script src="//maxcdn.bootstrapcdn.com/bootstrap/3.3.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 ----------> <div class="col-sm-12 row hero"> <div class="col-md-9"> <!-- Tab panes --> <div class="tab-content"> <div class="tab-pane in active fade" id="Memory-Care"><img src="http://millview.rudtek.com/wp-content/uploads/2017/06/mill_view_activities.jpg"><a class="btn btn-primary" href="http://millview.rudtek.com/services/memory-care/">Find Out More</a></div><div class="tab-pane in fade" id="Assisted-Living"><img src="http://millview.rudtek.com/wp-content/uploads/2017/06/mill_view_memory_care.jpg"><a class="btn btn-primary" href="http://millview.rudtek.com/services/short-term-stay/">Find Out More</a></div><div class="tab-pane in fade" id="Personalized-Services"><img src="http://millview.rudtek.com/wp-content/uploads/2017/06/mill_View_amenities.jpg"><a class="btn btn-primary" href="http://millview.rudtek.com/services/">Find Out More</a></div> </div> </div> <div class="col-md-3"> <!-- required for floating --> <!-- Nav tabs --> <ul class="nav nav-pills nav-stacked"> <li class=" active"><a href="#Memory-Care" data-toggle="tab" "=""><h3 data-fontsize="24" data-lineheight="26">Memory Care</h3><div class="description"><p>A Community of Caring Built on Our Commitment to Respect and Dignity</p> </div></a></li><li class=""><a href="#Assisted-Living" data-toggle="tab" "=""><h3 data-fontsize="24" data-lineheight="26">Assisted Living</h3><div class="description"><p>A Life of Independence and Comfort with help given where needed</p> </div></a></li><li class=""><a href="#Personalized-Services" data-toggle="tab" "=""><h3 data-fontsize="24" data-lineheight="26">Personalized Services</h3><div class="description"><p>Live your Life the way you want</p> </div></a></li> </ul> </div> <div class="clearfix"></div> </div>
$(function(){ $('a[title]').tooltip(); // Tab Pane continue moving var tabCarousel = setInterval(function() { var tabs = $('.nav-pills > 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: