Customize Slider Tabs

Customize Slider Tabs

I am trying to customize  Owl Slider http://www.owlgraphic.com/owlcarousel/ by adding Tabs.
So that clicking Tab1 shows Slide1 & Tab2 shows Slide 2 and so on.
The tabs are working fine.
I would like to sync it with the slider so that when Slide 1 is active, Tab 1 is highlighted(add 'activeClass').

Here is a sample file.



<script>
(function($) {
$(document).ready(function() {

var owl = $("#owl-demo");
    
  owl.owlCarousel({
items : 1,
        navigation : false,
navigationText : ["&#9668;","&#9658;"],
slideSpeed : 200,
autoPlay : true,
stopOnHover : true,
lazyLoad : true,
paginationSpeed : 500,
     rewindSpeed : 500,
pagination :false
      });
  

$("#first_xSlide").click(function(){ 
owl.trigger('owl.goTo',0);  
});
$("#second_xSlide ").click(function(){ 
owl.trigger('owl.goTo',1);  
});
$("#third_xSlide").click(function(){ 
owl.trigger('owl.goTo',2);  
});
$("#fourth_xSlide").click(function(){ 
owl.trigger('owl.goTo',3);  
});
  if(currentItem==0){
var x32_1 = $('#first_xSlide').addClass('activeNav_Button');
$('li').not(x32_1).removeClass('activeNav_Button');
  }
  
  if(currentItem==1){
var x32_2 = $('#second_xSlide').addClass('activeNav_Button');
$('li').not(x32_1).removeClass('activeNav_Button');
  }
  
  if(currentItem==2){
var x32_1 = $('#third_xSlide').addClass('activeNav_Button');
$('li').not(x32_1).removeClass('activeNav_Button');
  }
  


  });
})(jQuery);
    </script>

I had previously asked about the same but got no response.
Please help me out here.