2013-02-13 3 views
2

Я работаю над сайтом 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++; 
}); 

ответ

1

Я не использовал последовательности, но из вашего поста я предполагаю, что вы хотите, чтобы иметь возможность восстановить параметры объекта с приращением числа. Таким образом, вы могли бы сделать что-то вроде этого:

function options(number) { 
    return { 
    startingFrameID: 1, 
    cycle: true, 
    autoPlay: false, 
    nextButton: '.next' + number, 
    prevButton: '.prev' + number, 
    fallback: { 
     theme: "fade", 
     speed: 100 
    } 
    }; 
} 

Затем используйте его следующим образом:

$(target).sequence(options(0)).data("sequence"); 

Или в вашем конкретном примере:

//slider1 
var sequence0 = $(".slideContainer0").sequence(options(0)).data("sequence"); 

//slider2 
var sequence1 = $(".slideContainer1").sequence(options(1)).data("sequence") 

И делать то, что вы говорите о том, как о предоставлении всех последовательностей того же класса, что и говорить custom-sequence, а затем сделать что-то вроде этого:

var count = 0; 
$('.custom-sequence').each(function() { 
    var sequence = $(this); 
    sequence.sequence(options(count)).data('sequence'); 
    count++; 
}); 

Это может быть или не сработать - мне не совсем понятно, что делает .data('sequence').

+0

Первая часть вашего ответа не работает. Несколько ползунков получают настройку, но параметры не разделены. Кнопки Prev & Next не работают должным образом, так как оба слайдера продвигаются при нажатии Next на одном из них. Кроме того, ползунки показывают такое же поведение, как если бы они создавались с одинаковыми параметрами. – 3oh6

+0

Вы введете правильный номер, чтобы соответствовать '.next '+ number'? Я предполагаю, что HTML со следующим, а предыдущие классы создаются в другом месте. Пример этого, работающий на jsbin.com (или аналогичном сайте), позволит вам быстрее понять его. – Cymen

+0

Да, .next/.prev создаются с соответствующим номером повтора. Я собираюсь попробовать еще один плагин слайдера и посмотреть, как это происходит, поскольку чем больше я смотрю на это, тем больше похоже, что Sequence JS является виновником. – 3oh6

Смежные вопросы