Update Owl Carousel 'Page' on Event + Bootstrap Tabs

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!

4UmNinja · Answer 1 · 2016-04-30T11:14:01.887

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);
}

Update Owl Carousel 'Page' on Event + Bootstrap Tabs

1 Answers1