gpt4 book ai didi

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

转载 作者:行者123 更新时间:2023-11-30 05:51:01 24 4
gpt4 key购买 nike

我正在开发一个 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++;
});

最佳答案

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

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

关于javascript - 如何动态创建多个 jQuery slider ?,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/14864930/

24 4 0
Copyright 2021 - 2024 cfsdn All Rights Reserved 蜀ICP备2022000587号
广告合作:1813099741@qq.com 6ren.com