title: Update Owl Carousel 'Page' on Event + Bootstrap Tabs
body: <p>I am trying to use both <a href="http://www.owlcarousel.owlgraphic.com/" rel="noreferrer">Owl Carousel</a> and Bootstrap to create tabs that have a continuous carousel for the tab navigation. I also want these tabs to cycle automatically. </p>
  
  <p>Here is a visual reference:</p>
  
  <p><a href="https://i.stack.imgur.com/D4AbZ.png" rel="noreferrer"><img src="https://i.stack.imgur.com/D4AbZ.png" alt="enter image description here"></a></p>
  
  <p>And here is a fiddle:</p>
  
  <p><a href="https://jsfiddle.net/j28md74n/" rel="noreferrer">https://jsfiddle.net/j28md74n/</a></p>
  
  <p>The main JS that I'm using (i've commented out the areas where i'm stuck):</p>
  
  <pre><code>    var owlTab = $(".tab-carousel.owl-carousel");
  
      owlTab.owlCarousel({
          navigation: false,
          dots:true,
          navigationText: [
              "&lt;i class='fa fa-angle-left'&gt;&lt;/i&gt;",
              "&lt;i class='fa fa-angle-right'&gt;&lt;/i&gt;"
          ],
          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 &gt; 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 &lt;= 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);
  </code></pre>
  
  <p>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.</p>
  
  <p>Thanks in advance for any insights!</p>