CODEWITHSUNDEEP
delaytransitionwaitspacebxslider
techdude
techdude

Reputation: 1334

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?

Upvotes: 0

Views: 6254

Answers (3)

techdude
techdude

Reputation: 1334

Perhaps this will help clarify: In principle, the way this works is I change the setInterval with a setTimeout so the interval can be changed each time.

The key to getting multiple elements to work on a page is to not use the slider.timer object, but probably to use the el.timer object so the line would read something like, 

 el.timer = setTimeout(function(){
        slider.settings.autoDirection == 'next' ? el.goToNextSlide() : el.goToPrevSlide();
        el.continueAuto();
    }, duration);

Instead of 

 slider.timer = setTimeout(function(){
        slider.settings.autoDirection == 'next' ? el.goToNextSlide() : el.goToPrevSlide();
        el.continueAuto();
    }, duration);

I haven't tested it with multiple sliders, but let me know if this works. That is the principle anyway. The only problem with this, however, is that I believe that you would need to modify the el.pause method to use the el.timer as well, otherwise the slideshow can't be paused. I think that was the reason I did it the way I did. However, it was a long time ago.

Upvotes: 0

grimmwerks
grimmwerks

Reputation: 491

What are the

  • you're using to pick this up? Any way you can put up a gist of it working?

    Upvotes: 0

    • techdude
    techdude

    Reputation: 1334

    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. :)

    Upvotes: 2

    Related Questions