title: add class 'active' to current control
body: <p>I use a simple jquery fade slider on my page</p>
  
  <p><strong>HTML</strong></p>
  
  <pre><code>&lt;ul id="slider1" class="images-list"&gt;
                          &lt;li style="background-image: url('Content/img/bg_10.jpg')"&gt;&lt;/li&gt;
                          &lt;li style="background-image: url('Content/img/bg_11.jpg')"&gt;&lt;/li&gt;
                          &lt;li style="background-image: url('Content/img/bg_12.jpg')"&gt;&lt;/li&gt;
                      &lt;/ul&gt;
  
                      &lt;ul class="controls"&gt;
                          &lt;li class="active"&gt;&lt;/li&gt;
                          &lt;li&gt;&lt;/li&gt;
                          &lt;li&gt;&lt;/li&gt;
                      &lt;/ul&gt;
  </code></pre>
  
  <p><strong>jQuery</strong></p>
  
  <pre><code>    $.fn.slider = function () {
      var $this = this;
      var $controls = $this.nextAll('.controls').first();
      var index;
  
      $this.find('li:gt(0)').hide();
      setInterval(function () {
          $this.find('li:first-child').fadeOut('slow')
              .next('li').fadeIn('slow')
              .end().appendTo($this);
  
          $controls.find('li').removeClass('active');         
          index = $this.find('li:visible').index();
          $controls.find('li').eq(index).addClass('active');  
      },
      4000);
  };
  </code></pre>
  
  <p>and I would like to add class 'active' to current control, but a position of a visible element in slider changes every time and it's the first element every time. How can I do that?</p>
  
  <p><a href="http://jsfiddle.net/u9d3xa1q/11/" rel="nofollow">http://jsfiddle.net/u9d3xa1q/11/</a></p>