title: jquery : bxSlider carousel active classes for all showing items (not single)
body: <p>Is there any solution to add active classes  ? </p>
  
  <p><strong>DEMO</strong> <a href="http://jsfiddle.net/sweetmaanu/bDRNH/" rel="nofollow">http://jsfiddle.net/sweetmaanu/bDRNH/</a></p>
  
  <pre><code>&lt;div class="slider4"&gt;
      &lt;div class="slide"&gt;
          &lt;img src="http://placehold.it/300x150&amp;text=FooBar1"&gt;
      &lt;/div&gt;
      &lt;div class="slide"&gt;
          &lt;img src="http://placehold.it/300x150&amp;text=FooBar2"&gt;
      &lt;/div&gt;
      &lt;div class="slide"&gt;
          &lt;img src="http://placehold.it/300x150&amp;text=FooBar3"&gt;
      &lt;/div&gt;
      &lt;div class="slide"&gt;
          &lt;img src="http://placehold.it/300x150&amp;text=FooBar4"&gt;
      &lt;/div&gt;
      &lt;div class="slide"&gt;
          &lt;img src="http://placehold.it/300x150&amp;text=FooBar5"&gt;
      &lt;/div&gt;
      &lt;div class="slide"&gt;
          &lt;img src="http://placehold.it/300x150&amp;text=FooBar6"&gt;
      &lt;/div&gt;
      &lt;div class="slide"&gt;
          &lt;img src="http://placehold.it/300x150&amp;text=FooBar7"&gt;
      &lt;/div&gt;
      &lt;div class="slide"&gt;
          &lt;img src="http://placehold.it/300x150&amp;text=FooBar8"&gt;
      &lt;/div&gt;
      &lt;div class="slide"&gt;
          &lt;img src="http://placehold.it/300x150&amp;text=FooBar9"&gt;
      &lt;/div&gt;
      &lt;div class="slide"&gt;
          &lt;img src="http://placehold.it/300x150&amp;text=FooBar10"&gt;
      &lt;/div&gt;
  &lt;/div&gt;
  </code></pre>
  
  <p>hope solution should be in callback.</p>
  
  <pre><code>$('.slider4').bxSlider({
      slideWidth: 300,
      minSlides: 3,
      maxSlides: 3,
      moveSlides: 1,
      slideMargin: 10
  });
  </code></pre>