Update Owl Carousel 'Page' on Event + Bootstrap Tabs - twitter-bootstrap-3

Question

I am trying to use both Owl Carousel and Bootstrap to create tabs that have a continuous carousel for the tab navigation. I also want these tabs to cycle automatically.
Here is a visual reference:
And here is a fiddle:
https://jsfiddle.net/j28md74n/
The main JS that I'm using (i've commented out the areas where i'm stuck):
var owlTab = $(".tab-carousel.owl-carousel");
owlTab.owlCarousel({
navigation: false,
dots:true,
navigationText: [
"<i class='fa fa-angle-left'></i>",
"<i class='fa fa-angle-right'></i>"
],
items : 4,
lazyLoad : false,
autoPlay : false,
draggable: true,
stopOnHover : true,
paginationSpeed : 1000,
transitionStyle:"fade",
responsive: true,
loop: true,
rewindNav: true,
});
$( document ).ready(function() {
if ($('.tab-carousel.owl-carousel').length){
$('.tab-carousel.owl-carousel .owl-item').attr("role", "presentation");
$('.tab-carousel.owl-carousel .owl-item:first-child').addClass('active');
};
$( ".tab-carousel.owl-carousel .owl-item" ).click(function() {
$( ".tab-carousel.owl-carousel .owl-item" ).removeClass('active');
$(this).addClass("active");
});
});
var tabCarousel = setInterval(function() {
var tabs = $('.tab-carousel.owl-carousel .owl-item'),
active = tabs.filter('.active'),
next = active.next('.owl-item'),
toClick = next.length ? next.find('a') : tabs.eq(0).find('a');
var indexNum = active.index();
console.log(indexNum);
if (indexNum > 2){
$('.owl-pagination .owl-page:eq(0)').removeClass("active");
$('.owl-pagination .owl-page:eq(1)').addClass("active");
// Here's where I want to change the owl carousel 'page'...to page '2'
};
if (indexNum <= 2){
$('.owl-pagination .owl-page:eq(0)').addClass("active");
$('.owl-pagination .owl-page:eq(1)').removeClass("active");
// Here's where I want to change the owl carousel 'page' ...to page '1'
};
toClick.trigger('click');
}, 6000);
I'm able to accomplish most of what I want, however, when the '.active' '.owl-item' is the 5th item or above (i.e. on the another owl carousel 'page') that the owl carousel 'page' updates as well. There are 4 items per owl carousel 'page.' Currently, the way I have it, if the '.owl-item' cycles through past the 5th item, the owl carousel page stays on the first one.
Thanks in advance for any insights!

Answer 1

Not sure, but i think the problem is the way you're determining the indexNum..
I had to reconfig how to find current index, but this could work.
working example.
function animationLoop() {
// Increment Active IDX each Loop
activeIdx++;
// Reset Active IDX if > tabs.length
if ( isEnd( activeIdx, tabs ) ) setIdx( 0 );
console.log("Current IDX", activeIdx);
// Click on the current active index
$(carouselItems[ activeIdx ]).find('a').trigger('click');
// console.log("Clicking This", carouselItems[ activeIdx ].innerText);
// Reset Loop
setTimeout(animationLoop, 3000);
}