javascript - 如何动态创建多个 jQuery slider ？

Question

我正在开发一个 WordPress 网站，该网站将自定义帖子类型转换为页面上的 slider 。我正在使用 Sequence.js对于我的 slider ，我可以手动创建多个 slider ，以下没有问题:

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

我怎样才能简化这个？并使其动态化，以便为每个发布的帖子创建一个 slider ？任何帮助将不胜感激。

编辑 - 添加工作答案

我在第一部分中使用了下面 Cymen 的答案，方法是将选项输出转换为一个函数，并简单地为每个序列实例调用一个带有计数器的函数。然后使用他回答的第二部分来初始化每个序列 slider ，这很有效。

这就是我现在的工作:

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

我没有使用过序列，但从你的帖子来看，我猜你希望能够重新创建带有数字增量的选项对象。所以你可以这样做:

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