Response title
This is preview!
Customize Slider Tabs
in Using jQuery Plugins
•
8 years ago
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.
Sample Script, based on http://www.owlgraphic.com/owlcarousel/demos/owlStatus.html
<script>
(function($) {
$(document).ready(function() {
var owl = $("#owl-demo");
owl.owlCarousel({
items : 1,
navigation : false,
navigationText : ["◄","►"],
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.
1