Question

我正在使用WordPress网站，将自定义帖子类型转换为页面上的滑块。我使用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");

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

已修改 - 已添加工作回答

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

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

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

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

1 个答案: