Bxslider set middle slide as active slide

Question

I am trying to do this since hours but not able to do it.

I am trying to set the middle slide as the active-slide always, but seems like it is moving up and down.

Here is the code:

HTML

<div class="slider8">
  <div class="slide"><a href="#">Sell My</a></div>
  <div class="slide"><a href="#">Fix My</a></div>
  <div class="slide"><a href="#">Buy A</a></div>
</div>

JS

var slider = $('.slider8').bxSlider({
    mode: 'vertical',
    slideWidth: 300,
    minSlides: 3,
    moveSlides: 1,
    slideMargin: 10,
    onSlideAfter: function (currentSlideNumber, totalSlideQty, currentSlideHtmlObject) {
    console.log(currentSlideHtmlObject);
    $('.active-slide').removeClass('active-slide');
    $('.slider8>div:not(.bx-clone)').eq(currentSlideHtmlObject + 1).addClass('active-slide')
},
onSliderLoad: function () {
    $('.slider8>div:not(.bx-clone)').eq(1).addClass('active-slide')
}

http://jsfiddle.net/LU5vA/14/

Can anyone help please ?

Thanks.

Answer 1

This was a tricky one... at least for me. After trying many different things, and reading up on the BxSlider documentation, I finally got it to work.

Here's the code I got it to work with:

var slider = $('.slider8').bxSlider({
    mode: 'vertical',
    slideWidth: 300,
    minSlides: 3,
    moveSlides: 1,
    slideMargin: 10,
    onSliderLoad: function () {
        $('.slider8>div:not(.bx-clone)').eq(1).addClass('active-slide');
    },
    onSlideAfter: function ($slideElement, oldIndex, newIndex) {
        $('.slide').removeClass('active-slide');
        $($slideElement).next().addClass('active-slide');        
    }
});

Here's the modified version of your fiddle with the working version in there: http://jsfiddle.net/LU5vA/22/ .