Search code examples
delaytransitionwaitspacebxslider

How to specify different delays between slides in bxslider


Ran across the following problem in bxslider- how can you apply different delays between slides in the auto show?


Solution

  • I came up with the following solution which I will show here:

    in the jquery.bxslider.js replace:

     el.startAuto = function(preventControlUpdate){
            // if an interval already exists, disregard call
            if(slider.interval) return;
            // create an interval
            slider.interval = setInterval(function(){
                slider.settings.autoDirection == 'next' ? el.goToNextSlide() : el.goToPrevSlide();
            }, slider.settings.pause);
            // if auto controls are displayed and preventControlUpdate is not true
            if (slider.settings.autoControls && preventControlUpdate != true) updateAutoControls('stop');
        }
    

    With

         /**EDITS: By CRB - techdude **/
        el.startAuto = function(preventControlUpdate){
            el.continueAuto();
        }
    
        el.continueAuto = function(){
            //get how long the current slide should stay
            var duration = slider.children.eq(parseInt(slider.active.index)).attr("duration");
            if(duration == ""){
                duration = slider.settings.pause;
            } else {
                duration = parseInt(duration);
            }
            console.log(duration);
    
            // create a timeout
            slider.timer = setTimeout(function(){
                slider.settings.autoDirection == 'next' ? el.goToNextSlide() : el.goToPrevSlide();
                el.continueAuto();
            }, duration);
            // if auto controls are displayed and preventControlUpdate is not true
            if (slider.settings.autoControls && preventControlUpdate != true) updateAutoControls('stop');
    
        }
    
        //*End Edits*/
    

    Then to change the duration of a slide, simply give its li tag a duration attribute like this: where duration is the number of milliseconds for the slide to pause.

    To set the default duration, simply use the pause: option in the settings:

    $("element").bxSlider({
      auto:true,
      pause: 4000
    };
    

    Hope this helps. Maybe bx slider will even add it to a future version. :)