如何动态创建多个jQuery滑块？

我正在使用WordPress网站，将自定义post类型转换为页面上的滑块。 我正在使用Sequence.js作为我的滑块，我可以手动创建多个滑块，以下内容没有问题：

//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"); 

我该如何精简这个？ 并且还使其动态化，以便为每个post创建一个滑块？ 任何帮助将不胜感激。

编辑 – 添加工作答案

我通过将选项输出转换为函数并使用计数器为每个序列实例调用函数，将下面的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++; }); 

Answer 1

我没有使用序列但是从你的post我猜你想能够用数字的增量重新创建选项对象。 所以你可以这样做：

 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')正在做什么。