Есть ли способ сохранить разное время задержки между каждым слайдом в bxslider? Предположим, у меня есть 4 слайда в bxslider. Мне нужна задержка 1000 мс между 1-м и 2-м слайдом и задержка 2000 мс между третьим и 4-м слайдом.
Это возможно?
Есть ли способ сохранить разное время задержки между каждым слайдом в bxslider? Предположим, у меня есть 4 слайда в bxslider. Мне нужна задержка 1000 мс между 1-м и 2-м слайдом и задержка 2000 мс между третьим и 4-м слайдом.
Это возможно?
Наверное, можно, но некрасиво. По сути, насколько я могу судить из документации для 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]);
}
}
});
Я придумал очень гибкий способ сделать это, внеся небольшие изменения в файл bxslider.js. Вот подробности моего ответа здесь: https://stackoverflow.com/a/17408119/700111
Используйте SlideBefore. Код в ответе выше остановится на последнем слайде.
onSlideBefore: function (slide, oldIndex, newIndex) {
if (params.speedOverrides[newIndex]) {
slider.stopAuto();
setTimeout(function () {
slider.goToSlide(newIndex);
slider.startAuto();
}, params.speedOverrides[newIndex]);
}
}