I am looking to create a Bootstrap tab system that automatically cycles through each tab, similar to a carousel, with a new tab showing every 10 seconds. I know this will likely require some custom JavaScript, but I'm still relatively new to it!
In addition, I would like the automatic cycling to pause if a tab is manually clicked, although I see this as more of an advanced goal.
Here is what I have tried so far: http://jsfiddle.net/59Lyhqmn/31/
I have attempted to implement solutions from similar questions, including:
$(function(){
var tabs = $('#myTab a');
var counter = 0;
window.setInterval(activateTab, 1000);
function activateTab(){
tabs.removeClass('active');
var currentLink = tabs[counter];
$('.tab-pane').removeClass('.active').hide();
currentLink.addClass('active');
$(currentLink.attr('href')).addClass('active').show();
if(counter < tabs.length)
counter= counter + 1;
else
counter = 0;
}
});
However, I have not been successful with my attempts so far!
Any assistance or guidance on this matter would be highly appreciated!