title: How to make tabs follow bxslider pager?
body: <p>I have a main feature on my website using the bxslider, my Html makrup is as follows:</p>
  
  <pre><code>    &lt;ul class="bxslider"&gt;
      &lt;li class="slide_one"&gt;
          &lt;h1&gt;Quality Comes First&lt;/h1&gt;
          &lt;p&gt;&lt;a href="/products"&gt;Products &lt;img src="/images/arrow-right.png" alt=""/&gt;&lt;/a&gt;&lt;/p&gt;
      &lt;/li&gt;
      &lt;li class="slide_two"&gt;
          &lt;h1&gt;uk market leaders&lt;/h1&gt;
          &lt;p&gt;&lt;a href="/process"&gt;Processes &lt;img src="/images/arrow-right.png" alt=""/&gt;&lt;/a&gt;&lt;/p&gt;
      &lt;/li&gt;
      &lt;li class="slide_three"&gt;
          &lt;h1&gt;100% MADE IN THE UK&lt;/h1&gt;
          &lt;p&gt;&lt;a href="/services"&gt;Quality Services &lt;img src="/images/arrow-right.png" alt=""/&gt;&lt;/a&gt;&lt;/p&gt;
      &lt;/li&gt;
  &lt;/ul&gt;
  
  &lt;div class="sub_nav"&gt;
      &lt;div class="row"&gt;
          &lt;ul id="bx-pager"&gt;
              &lt;li class="four columns"&gt;&lt;a index="0" href="#" &gt;Products&lt;/a&gt;&lt;/li&gt;
              &lt;li class="four columns"&gt;&lt;a index="1" href="#" &gt;Processes&lt;/a&gt;&lt;/li&gt;
              &lt;li class="four columns"&gt;&lt;a index="2" href="#" &gt;Quality Services&lt;/a&gt;&lt;/li&gt;
          &lt;/ul&gt;
      &lt;/div&gt;
  &lt;/div&gt;
  </code></pre>
  
  <p>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.</p>
  
  <p>My js is as follows:</p>
  
  <pre><code>&lt;script&gt;
  var oldieCheck = Boolean(document.getElementsByTagName('html')[0].className.match(/\soldie\s/g));
  if(!oldieCheck) {
  document.write('&lt;script src="//ajax.googleapis.com/ajax/libs/jquery/2.0.2/jquery.min.js"&gt;&lt;\/script&gt;');
  
  } else {
  document.write('&lt;script src="//ajax.googleapis.com/ajax/libs/jquery/1.10.1/jquery.min.js"&gt;&lt;\/script&gt;');
  }
  &lt;/script&gt;
  
  $(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');
      });
  })
  </code></pre>