如何动态创建多个jQuery滑块? [英] How to dynamically create multiple jQuery sliders?

问题描述

我正在WordPress网站上工作，该站点将自定义帖子类型转换为页面上的滑块.我正在为我的滑块使用 Sequence.js ，并且我可以手动创建多个滑块，但以下操作没有问题:

I am working on a WordPress site that turns a custom post type into a slider on a page. I am using Sequence.js for my slider and I can manually create multiple sliders no problem with the following:

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

我该如何精简呢?而且还使其具有动态性，以便为每个发布的帖子创建一个滑块吗?任何帮助将不胜感激.

How can I streamline this? And also make it dynamic so a slider is created for each post that is made? Any help would be greatly appreciated.

已编辑-添加了工作答案

在第一部分中，我使用了下面Cymen的答案，即将选项输出转换为一个函数，并为每个序列实例简单地使用一个计数器调用该函数.然后用他的答案的第二部分初始化每个序列滑块，然后进行处理.

I used the answer from Cymen below for the first part by turning the options output into a function and simply calling the function with a counter for each sequence instance. Then used the second part of his answer to initialize each sequence slider and it works a treat.

这是我现在正在工作的:

This is what I have working now:

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++;
});

推荐答案

我没有使用序列，但是从您的帖子中我猜想您希望能够以数字的增量重新创建options对象.因此，您可以执行以下操作:

I haven't used sequence but from your post I am guessing you want to be able to recreate the options object with an increment of the number. So you could do something like this:

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

或者在您的特定示例中:

Or in your specific example:

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

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

要做您正在谈论的事情，如何为所有序列赋予相同的类，例如custom-sequence，然后执行以下操作:

And to do what you are talking about how about giving all the sequences the same class like say custom-sequence and then do something like this:

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

这可能行不通-我不清楚.data('sequence')在做什么.

That may or may not work -- it isn't quite clear to me what the .data('sequence') is doing.

这篇关于如何动态创建多个jQuery滑块?的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！