CODEWITHSUNDEEP
jqueryhtmlbxslider
Craig
Craig

Reputation: 195

How to make tabs follow bxslider pager?

I have a main feature on my website using the bxslider, my Html makrup is as follows:

    <ul class="bxslider">
    <li class="slide_one">
        <h1>Quality Comes First</h1>
        <p><a href="/products">Products <img src="/images/arrow-right.png" alt=""/></a></p>
    </li>
    <li class="slide_two">
        <h1>uk market leaders</h1>
        <p><a href="/process">Processes <img src="/images/arrow-right.png" alt=""/></a></p>
    </li>
    <li class="slide_three">
        <h1>100% MADE IN THE UK</h1>
        <p><a href="/services">Quality Services <img src="/images/arrow-right.png" alt=""/></a></p>
    </li>
</ul>

<div class="sub_nav">
    <div class="row">
        <ul id="bx-pager">
            <li class="four columns"><a index="0" href="#" >Products</a></li>
            <li class="four columns"><a index="1" href="#" >Processes</a></li>
            <li class="four columns"><a index="2" href="#" >Quality Services</a></li>
        </ul>
    </div>
</div>

So, I have the main bxslider area with each slider content and image, then I have created a tab (sub_nav) underneath which I would like these to follow the active state of the main bxslider pager.

My js is as follows:

<script>
var oldieCheck = Boolean(document.getElementsByTagName('html')[0].className.match(/\soldie\s/g));
if(!oldieCheck) {
document.write('<script src="//ajax.googleapis.com/ajax/libs/jquery/2.0.2/jquery.min.js"><\/script>');

} else {
document.write('<script src="//ajax.googleapis.com/ajax/libs/jquery/1.10.1/jquery.min.js"><\/script>');
}
</script>

$(this).ready(function() {
var slider;
slider=$('.bxslider').bxSlider({
auto: true,
mode: 'fade',

onSlideAfter: function($slideElement, oldIndex, newIndex){
    $(this).addClass('onstate');
}
});

    $(".sub_nav li a").click(function(e) {
        e.preventDefault();
        var index = $(this).attr('index');
        slider.goToSlide(parseInt(index));
        $(".sub_nav li a").removeClass('onstate');
        $(this).addClass('onstate');
    });
})

Upvotes: 0

Views: 625

Answers (1)

Babak Fakhriloo
Babak Fakhriloo

Reputation: 2126

Here is the code that worked for me.

Note that to use 'slider' var in your code, I first initialize it when I set bxslider.

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
$(this).ready(function()
  {
  
     var slider;
  
	slider=$('.bxslider').bxSlider({
    auto: true,
    mode: 'fade',
      
      onSlideAfter: function($slideElement, oldIndex, newIndex){
         //Chaange Tabs here
      }
  });
  
  
  
  
     $(".sub_nav li a").click(function(e) {
		e.preventDefault();
		var index = $(this).attr('index');
		slider.goToSlide(parseInt(index));
		$(".sub_nav li a").removeClass('onstate');
		$(this).addClass('onstate');
	});
  
  
  
  })

Upvotes: 1

Related Questions