title: Using jQuery Data to detect a active slide and run function
body: <p>Hi I am using jQuery to make a custom navigation, but I can't work out how to detect the active slide and apply a active state to the button for that slide.</p>
  
  <p>I setup a jsfiddle to better show what I'm trying to do, basically the same function as the dots/pager in the slider but on the buttons 1 2 and 3.</p>
  
  <p>Im new to the .data part of jQuery :P</p>
  
  <p><a href="http://jsfiddle.net/unknown601/yxErC/17/">http://jsfiddle.net/unknown601/yxErC/17/</a></p>
  
  <pre><code>&lt;div class="number" id="" data-slider="0"&gt;
    Button 1
  &lt;/div&gt;
  &lt;div class="number" id="" data-slider="1"&gt;
    Button 2
  &lt;/div&gt;
  &lt;div class="number" id="" data-slider="2"&gt;
    Button 3
  &lt;/div&gt;
  
  &lt;ul class="slider"&gt;
    &lt;li data-current="1"&gt;
      &lt;img src="http://placehold.it/350x150"&gt;
      &lt;p&gt;Slider-1&lt;/p&gt;
    &lt;/li&gt;
  
    &lt;li data-current="2"&gt;
      &lt;img src="http://placehold.it/350x150"&gt;
      &lt;p&gt;Slide 2&lt;/p&gt;
    &lt;/li&gt;
  
    &lt;li data-current="3"&gt;
      &lt;img src="http://placehold.it/350x150"&gt;
      &lt;p&gt; Slide 3&lt;/p&gt;
    &lt;/li&gt;
  
  &lt;/ul&gt;
  
  
  
     #current {
    color: red;
    font-weight: bold;
  }
  
  .number:hover {
    color: blue;
    cursor: pointer;
  }
  </code></pre>
  
  <p>Got the buttons to control the slider :)</p>
  
  <pre><code>var Slider;
  
  $(document).ready(function() {
    Slider = $('.slider').bxSlider({
      pager: true
    });
    $('.number').on('click', function(e) {
      e.preventDefault();
      var index = $(this).attr('data-slider');
      Slider.goToSlide(index);
    });
  });
  </code></pre>