Как применить разные задержки между каждым слайдом в bxslider

Есть ли способ сохранить разное время задержки между каждым слайдом в bxslider? Предположим, у меня есть 4 слайда в bxslider. Мне нужна задержка 1000 мс между 1-м и 2-м слайдом и задержка 2000 мс между третьим и 4-м слайдом.

Это возможно?


person Thejdeep    schedule 08.06.2013    source источник


Ответы (3)


Наверное, можно, но некрасиво. По сути, насколько я могу судить из документации для bxslider, вы не можете установить время для конкретных интервалов перехода между отдельными слайдами. Итак, вот что вы хотели бы узнать. нужно сделать в JavaScript работу с обработчиками событий:

Предположим, что селектор CSS .bxslider получает доступ к HTML-элементу, содержащему содержимое вашего слайдера, а переход слайдов, который вы хотите сделать медленнее (2000 мс), является только слайдом с третьего на четвертый... и предполагается, что вы уже настройте и инициализируйте свой ползунок, ваше решение может быть следующим (многоточие, чтобы указать другие параметры, которые вы настроите/уже настроили, которые я замалчиваю):

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);
        }
    }
});

По сути, мы останавливаем автовоспроизведение, когда нажимаем на третий слайд, чтобы мы могли вручную контролировать продолжительность «присутствия» слайда. Когда 2000 мс истекут, мы вручную перемещаем ползунок на следующий кадр и перезапускаем автовоспроизведение. Если бы у вас было большое слайд-шоу, и вы хотели бы сделать его более организованным, оно могло бы выглядеть примерно так:

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]);
        }
    }
});
person Paul Bruno    schedule 08.06.2013
comment
Тот роккссссссс. Спасибо, @Paul B. - person Thejdeep; 08.06.2013
comment
слайдер останавливается, когда после последнего слайда - person Deepak Mallah; 31.12.2014

Я придумал очень гибкий способ сделать это, внеся небольшие изменения в файл bxslider.js. Вот подробности моего ответа здесь: https://stackoverflow.com/a/17408119/700111

person techdude    schedule 01.07.2013

Используйте SlideBefore. Код в ответе выше остановится на последнем слайде.

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

}

person Andre    schedule 17.12.2013