CODEWITHSUNDEEP
javascriptjquerysliderbxslider
Thejdeep
Thejdeep

Reputation: 249

How to apply different delays between each slide in bxslider

Is there a way to keep different delay time between each slide in a bxslider? Suppose I have 4 slides in the bxslider I want a delay of 1000ms between 1st and 2nd slide and 2000ms delay between third and 4th slide.

Is this possible?

Upvotes: 2

Views: 9557

Answers (3)

Andre
Andre

Reputation: 1

Use SlideBefore. The code in the answer above will stop at the last slide. 

onSlideBefore: function (slide, oldIndex, newIndex) {
if (params.speedOverrides[newIndex]) {
    slider.stopAuto();
    setTimeout(function () {
        slider.goToSlide(newIndex);
        slider.startAuto();
    }, params.speedOverrides[newIndex]);
}

}

Upvotes: 0

techdude
techdude

Reputation: 1334

I came up with a very flexible way to do this by making a small edit to the bxslider.js file. Here is the detail of my answer here: https://stackoverflow.com/a/17408119/700111

Upvotes: 0

Paul Bruno
Paul Bruno

Reputation: 1906

It's probably possible, but not pretty. Basically, insofar as I can tell from the documentatin for bxslider, you can't set times for specific, individual slide transition intervals. So, here's what you'd prob. need to do, in JavaScript, working with the event handlers:

Assuming the CSS selector .bxslider gets at the HTML element housing your slider content, and the slide transition you want to make slower (2000ms) is the third to fourth slide only... and assuming you've already set up and initialized your slider, your solution could be as follows (elipses to indicate the other options that you'll set up/you've already set up, that I'm glossing over):

var slider = $('.bxslider').bxSlider({
    // ...
    // other params here
    // ...
    speed: 1000,
    onSlideAfter: function (slide, oldIndex, newIndex) {
        if (newIndex === 2) { // remember, it's zero based indices with bxslider...
            slider.stopAuto();
            setTimeout(function () {
                slider.goToSlide(3);
                slider.startAuto();
            }, 2000);
        }
    }
});

Basically, we're stopping the autoplay when we hit the 3rd slide, so that we can manually control the slide "presence" duration. When the 2000 ms are up, we manually move the slider to the next frame, and restart the autoplay. If you had a larger slide show, and wanted to do this in a more organized way, it would/could look something like this:

var params = {
    defaultSpeed: 1000,
    speedOverrides: {
        "2": 2000
        // you can add other slides here,
        // with the slide number used being the
        // first slide of the slide transition,
        // i.e., modifying the speed of 3-4, like
        // above means you'd enter "2" as the
        // property name, b/c again we're using
        // 0-based indices.
    }
};
var slider = $('.bxslider').bxSlider({
    // ...
    // other params here
    // ...
    speed: params.defaultSpeed,
    onSlideAfter: function (slide, oldIndex, newIndex) {
        if (params.speedOverrides[newIndex]) {
            slider.stopAuto();
            setTimeout(function () {
                slider.goToSlide(newIndex + 1);
                slider.startAuto();
            }, params.speedOverrides[newIndex]);
        }
    }
});

Upvotes: 5

Related Questions