Я работаю над сайтом WordPress, который превращает пользовательский тип сообщения в слайдер на странице. Я использую Sequence.js для моего слайдера, и я не могу вручную создать несколько кареток никаких проблем со следующим:Как динамически создавать несколько слайдеров jQuery?
//sequence slider options to be used by slider1
var options0 = {
sartingFrameID: 1,
cycle: true,
autoPlay: false,
nextButton: '.next0',
prevButton: '.prev0',
fallback: {
theme: "fade",
speed: 100
}
}
//slider1
var sequence0 = $(".slideContainer0").sequence(options0).data("sequence");
//sequence slider options to be used by slider2
var options1 = {
sartingFrameID: 1,
cycle: true,
autoPlay: false,
nextButton: '.next1',
prevButton: '.prev1',
fallback: {
theme: "fade",
speed: 100
}
}
//slider2
var sequence1 = $(".slideContainer1").sequence(options1).data("sequence");
Как оптимизировать это? А также сделать его динамичным, чтобы был создан слайдер для каждого созданного сообщения? Любая помощь будет принята с благодарностью.
отредактирован - добавил работает ответа
Я использовал ответ от Cymen ниже первой части, повернув выход параметров в функцию и просто вызвать функцию с помощью счетчика для каждого экземпляра последовательности. Затем использовалась вторая часть его ответа для инициализации каждого ползунка последовательности, и он работает.
Это то, что я работаю в настоящее время:
function options(number) {
return {
startingFrameID: 1,
cycle: true,
autoPlay: false,
nextButton: '.next' + number,
prevButton: '.prev' + number,
fallback: {
theme: "fade",
speed: 100
}
};
}
var count = 0;
$('.slideContainer').each(function() {
var sequence = $(this);
sequence.sequence(options(count)).data('sequence');
count++;
});
Первая часть вашего ответа не работает. Несколько ползунков получают настройку, но параметры не разделены. Кнопки Prev & Next не работают должным образом, так как оба слайдера продвигаются при нажатии Next на одном из них. Кроме того, ползунки показывают такое же поведение, как если бы они создавались с одинаковыми параметрами. – 3oh6
Вы введете правильный номер, чтобы соответствовать '.next '+ number'? Я предполагаю, что HTML со следующим, а предыдущие классы создаются в другом месте. Пример этого, работающий на jsbin.com (или аналогичном сайте), позволит вам быстрее понять его. – Cymen
Да, .next/.prev создаются с соответствующим номером повтора. Я собираюсь попробовать еще один плагин слайдера и посмотреть, как это происходит, поскольку чем больше я смотрю на это, тем больше похоже, что Sequence JS является виновником. – 3oh6