title: bxslider bind .next button to next slide in carousel
body: <p>Have such problem. I try create custom slider editing bxslider. I set classes to active, next and prev <code>&lt;li&gt;</code> and I would want that by clicking on the <code>.next-caption</code> and the <code>.prev-caption</code> li slider did the same thing as clicking on <code>.bx-next</code> and <code>.bx-prev</code>, that is twisted slider.</p>
  
  <p>Here my js </p>
  
  <pre><code>$('.bxslider').bxSlider({
      minSlides: 3,
      maxSlides: 3,
      slideWidth: 350,
      slideMargin: 0,
       moveSlides: 1,
       pager: false,
       // auto: true,
       speed: 3000,
       pause: 8000,
       // autoHover: true,
       onSlideBefore: function (currentSlideNumber, totalSlideQty, currentSlideHtmlObject) {
          console.log(currentSlideHtmlObject);
          $('.active-caption').removeClass('active-caption');
          $('.bxslider&gt;li').eq(currentSlideHtmlObject + 4).addClass('active-caption');
          $('.prev-caption').removeClass('prev-caption');
          $('.bxslider&gt;li').eq(currentSlideHtmlObject + 3).addClass('prev-caption');
          $('.next-caption').removeClass('next-caption');
          $('.bxslider&gt;li').eq(currentSlideHtmlObject + 5).addClass('next-caption')
      },
      onSliderLoad: function () {
          $('.bxslider&gt;li').eq(4).addClass('active-caption');
          $('.bxslider&gt;li').eq(3).addClass('prev-caption');
          $('.bxslider&gt;li').eq(5).addClass('next-caption')
     },
  });
  </code></pre>
  
  <p>Thanks for any help! See <a href="http://jsfiddle.net/CroaToa/kj32f7ks/" rel="nofollow">JsFiddle DEMO</a></p>