Change dynamically bxslider speed on click of prev/next button

Question

I have setup bxslider with following

    //<![CDATA[
  jQuery.noConflict();
  jQuery(document).ready(function(){
    var slider;
    slider = jQuery('#slider-popular').bxSlider({
            infiniteLoop: true,
            hideControlOnEnd: true,
            pager: false,
            randomStart: true,
            displaySlideQty: 4,
            moveSlideQty: 1,
            auto:true,
            autoDelay:500,
            autoHover: true,
            speed: 4000
    });

    jQuery('.bx-prev').on('click',function(){
        slider.goToPreviousSlide();
        slider.speed = 500;
        slider.startShow();
        return false;
    });

    jQuery('.bx-next').on('click',function(){
        slider.goToNextSlide();
        slider.speed = 500;
        slider.startShow();
        return false;
    });
  });
//]]>

Where I want to increase speed of slider on click of prev/next button to 500 instead of 4000

Above code does not work (speed does not increase !!!)

On normal way auto mode it should scroll on speed of 4000 but on click of pre/next button it should scroll on speed of 500

Yes it is working well and auto scroll is also started after click on prev/next button. Only issue is speed. — steve, Jun 13 '13 at 05:18

score 2 · Answer 1 · answered Mar 18 '15 at 17:26

I'm not sure if this is what you're looking for exactly but this is how I got it to work.

        slideSpeedAdjusted = false;
        //Set variable so you know if slider speed has been adjusted already

       //Initial bxslider
        var slider = $('#slider-popular').bxSlider({
          infiniteLoop: true,
          hideControlOnEnd: true,
          pager: false,
          randomStart: true,
          displaySlideQty: 4,
          moveSlideQty: 1,
          auto:true,
          autoDelay:500,
          autoHover: true,
          speed: 500
        });

        //Sets bxslider speed to scroll to the next slide and adjust the speed
        //so that it doesn't take forever to get to the next slide

        //Also checks to see if slide speed has already been adjusted
        if(!slideSpeedAdjusted){
        $('.bx-next').click(function(e){
            //We want to make sure the slider is at the location on reload
            //that the user was at so we use this variable to reload the slider
            //at the correct position
            var current = slider.getCurrentSlide();
            e.preventDefault();
           //just reload the slider with the function given by bxslider
           //here you can recreate the slider with the variables you desire
            slider.reloadSlider({
                startSlide: current,
                infiniteLoop: true,
                hideControlOnEnd: true,
                pager: false,
                randomStart: true,
                displaySlideQty: 4,
                moveSlideQty: 1,
                auto:true,
                autoDelay:500,
                autoHover: true,
                speed: 500
            });
            //Set slideSpeedAdjusted to true so the slider doesn't
            //reload after it's been adjusted.
            slideSpeedAdjusted = true;
            });

        //same version for the previous button
        $('.bx-prev').click(function(e){
            var current = slider.getCurrentSlide();
            e.preventDefault();
            slider.reloadSlider({
                startSlide: current,
                infiniteLoop: true,
                hideControlOnEnd: true,
                pager: false,
                randomStart: true,
                displaySlideQty: 4,
                moveSlideQty: 1,
                auto:true,
                autoDelay:500,
                autoHover: true,
                speed: 500
            });
            slideSpeedAdjusted = true;
            });
        };

Change dynamically bxslider speed on click of prev/next button

1 Answers1