Bootstrap & Owl Carousel http://stackoverflow.com/questions/36802704/update-owl-carousel-page-on-event-bootstrap-tabs

<!DOCTYPE html>
<html>

<head>
  <link data-require="bootstrap-css@3.3.6" data-semver="3.3.6" rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.css" />

  <link rel="stylesheet" href="style.css" />

  <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/OwlCarousel2/2.1.1/assets/owl.carousel.min.css" />
  <link rel="stylesheet" href="https://cdn.jsdelivr.net/jquery.owlcarousel/1.31/owl.theme.css" />

  <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/font-awesome/4.6.1/css/font-awesome.min.css" />

  <link rel="stylesheet" href="style.css" />


  <script data-require="jquery@*" data-semver="2.2.0" src="https://ajax.googleapis.com/ajax/libs/jquery/2.2.0/jquery.min.js"></script>
  
  <script src="https://cdnjs.cloudflare.com/ajax/libs/OwlCarousel2/2.1.1/owl.carousel.min.js"></script>
  
  <script data-require="bootstrap.js@*" data-semver="3.3.6" src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/js/bootstrap.min.js"></script>

  
</head>

<body>
  <div>
	<!-- Tab panes -->
	<div class="tab-content"> 
		<div role="tabpanel" class="tab-pane fade in out" id="tab-1">Tab 1</div>
		<div role="tabpanel" class="tab-pane fade in out" id="tab-2">Tab 2</div>
		<div role="tabpanel" class="tab-pane fade in out" id="tab-3">Tab 3</div>
		<div role="tabpanel" class="tab-pane fade in out" id="tab-4">Tab 4</div>
		<div role="tabpanel" class="tab-pane fade in out" id="tab-5">Tab 5</div>
		<div role="tabpanel" class="tab-pane fade in out" id="tab-6">Tab 6</div>
	</div>
	<!-- Nav tabs -->
	<div class="tab-carousel owl-carousel owl-theme" role="tablist">
		<a href="#tab-1" aria-controls="tab-1" role="tab" data-toggle="tab">
			Tab 1
			<img src="http://placehold.it/350x150text=Tab 1" class="img-responsive"/>
		</a>

		<a href="#tab-2" aria-controls="tab-2" role="tab" data-toggle="tab">
			Tab 2
			<img src="http://placehold.it/350x150text=Tab 2" class="img-responsive"/>
		</a>

		<a href="#tab-3" aria-controls="tab-3" role="tab" data-toggle="tab">
			Tab 3
			<img src="http://placehold.it/350x150text=Tab 3" class="img-responsive"/>
		</a>

		<a href="#tab-4" aria-controls="tab-4" role="tab" data-toggle="tab">
			Tab 4
			<img src="http://placehold.it/350x150text=Tab 4" class="img-responsive"/>
		</a>

		<a href="#tab-5" aria-controls="tab-5" role="tab" data-toggle="tab">
			Tab 5
			<img src="http://placehold.it/350x150text=Tab 5" class="img-responsive"/>
		</a>
		<a href="#tab-6" aria-controls="tab-6" role="tab" data-toggle="tab">
			Tab 6
			<img src="http://placehold.it/350x150text=Tab 6" class="img-responsive"/>
		</a>
	</div>
</div>
<script src="script.js"></script>

</body>

</html>

var owlTab = $(".tab-carousel.owl-carousel");
var activeIdx;

owlTab.owlCarousel({
    navigation: false,
    dots: true,
    navigationText: [
        "<i class='fa fa-angle-left'></i>",
        "<i class='fa fa-angle-right'></i>"
    ],
    items: 4,
});


  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").on('click', function(e) {
      
      $(".tab-carousel.owl-carousel .owl-item").removeClass('active');
      $(this).addClass("active");
      
      var activeIdx = parseInt($(this).text().replace('Tab ', ''), 10);
      console.warn(activeIdx);
  });


// Debugging stuff
window.tech = {};

var carouselItems = $('.tab-carousel.owl-carousel .owl-item'),
    tabs = $('.tab-pane'),
    activeIdx = -1;
    
    
    
    
    
    
    
// Begin Initial Loop
animationLoop()

function animationLoop() {
  // Reset Active IDX if > tabs.length or
  // Increment Active IDX each Loop
  console.log("End Before Inc", isEnd( activeIdx, tabs ))
  console.log("End After Inc", isEnd( activeIdx, tabs ))
  
  activeIdx++;
  if ( isEnd( activeIdx, tabs ) ) setIdx( 0 );
  
  console.log("Current IDX", activeIdx);
  
  // Click on the current active index link
  console.log("Clicking This", carouselItems[ activeIdx ].innerText);
  $(carouselItems[ activeIdx ]).find('a').trigger('click');
  
  // Reset Loop
   setTimeout(animationLoop, 3000);
}



    
function isEnd(idx, list){
  return idx >= list.length ? true : false;
}

function setIdx(idx) {
  activeIdx = idx;
}

function goToIdx(idx){
  $(carouselItems[ idx ]).find('a').trigger('click');
}

/* Styles go here */

.tab-pane {
  line-height: 200px;
  background: #39b54a;
  text-align: center;
}

.owl-item {
  background: #29abe2;
}

.owl-item img {
  opacity: 0.5;
}

.owl-item.active img {
  opacity: 1;
}