Question

I have applied bxslider on ul element. But i want to have different pause attribute value for each slide.

slider = $('.bxslider').bxSlider({
    speed:500,
    pause:5000,
    onSlideBefore: function(){
    },
    onSlideAfter: function(){
    }
});

Inside onSlideBefore or onSlideAfter i want to set pause value of the next (if code is inside onSlideBefore) or current slide (if code is inside onSlideAfter) so that each image slide will be having their own transition value.

Appreciate your help in any way.

Answer 1

I resolved my problem with below code. Not sure if this is the correct way to do so. Try it out if it helps you.
I added a new public method inside jquery.bxslider.min.js as below.

n.setPause = function (t) {
    if(s.settings.auto){
        clearInterval(s.interval);
        s.interval = setInterval(function () {
        s.settings.autoDirection=="next"?n.goToNextSlide() : n.goToPrevSlide()}, t)
    }
}; 

where, t is the milliseconds for each individual image slide.

In my JSP, i added onSlideAfter function where $slider is the jQuery element on which bxslider is applied.

onSlideAfter: function(){
    $slider.setPause(current image pause in milliseconds);
}