具有Sequence.js和分页的多个滑块

Question

我有几个滑块，每个滑块都有不同数量的幻灯片。每个滑块都没有下一个/上一个按钮，而是由分页控制。每当单击滑块的分页时，每个滑块的图像都会前进到相应的分页。因此，如果单击第二个分页按钮，则每个滑块都会转到第二个图像而不是当前滑块。我尝试了以下解决方案：http://bit.ly/1b1bvsC但这仅适用于下一个/上一个按钮，不适用于分页。

这是我目前的js：

$(document).ready(function(){
var options = {
    nextButton: false,
    prevButton: false,
    pagination: true,
    animateStartingFrameIn: false,
    autoPlay: false,
    autoPlayDelay: 3000,
    preloader: true,
    startingFrameID: 1,
    preloadTheseFrames: [1],
}

var options2 = {
    nextButton: false,
    prevButton: false,
    pagination: true,
    animateStartingFrameIn: false,
    autoPlay: false,
    autoPlayDelay: 3000,
    preloader: true,
    startingFrameID: 2,
    preloadTheseFrames: [1],
}

var sequence = $("#essence-sequence").sequence(options).data("sequence");
var sequence2 = $("#macropro-sequence").sequence(options2).data("sequence");

});

这是一张照片，以防我所谈论的内容有任何混淆：

因此，当单击底部的小圆圈时，上面的大红色图像将滑动到相应的“产品图像”，而不会影响页面上的任何其他滑块。 （对不起，讨厌的发红，但我现在必须把它保留在DL上）

Answer 1

我遇到了同样的问题，你引用的link中找到的解决方案也适用于分页，而不仅仅是下一个/上一个按钮。您可以为每组分页指定一个不同的类，然后将该类输入到javascript中。

示例：

$(document).ready(function(){
var options = {
    nextButton: false,
    prevButton: false,
    pagination: '.pagination1', //name first pagination here
    animateStartingFrameIn: false,
    autoPlay: false,
    autoPlayDelay: 3000,
    preloader: true,
    startingFrameID: 1,
    preloadTheseFrames: [1],
}

var options2 = {
    nextButton: false,
    prevButton: false,
    pagination: '.pagination2', //name second pagination here
    animateStartingFrameIn: false,
    autoPlay: false,
    autoPlayDelay: 3000,
    preloader: true,
    startingFrameID: 2,
    preloadTheseFrames: [1],
}

var sequence = $("#essence-sequence").sequence(options).data("sequence");
var sequence2 = $("#macropro-sequence").sequence(options2).data("sequence");

});

Answer 2

旧问题，但仍然有意义... 从文档中：

  

例如，如果您希望每个步骤都具有下一个按钮，则可以在Sequence.js的每个实例中使用相同用户界面类型的多个对象（预加载器除外，当前每个实例只允许一个实例）。

     

使用Sequence.js的多个实例时，请注意该用户界面   元素默认将控制所有Sequence.js实例。下一个   例如，按钮将控制序列上的每个Sequence.js实例   页。您是否希望UI元素仅控制一个实例   的Sequence.js，请在UI元素上使用rel属性，   值与您想要UI的Sequence.js实例的ID相同   要控制的元素。例如：

<div rel="sequence1" class="seq-next">Next →</div>

<div id="sequence1">
  <!-- additional code removed for brevity -->
</div>

<div id="sequence2">
  <!-- additional code removed for brevity -->
</div>

  

在上面的代码示例中，我们在   页。将rel =“ sequence1”属性应用于下一个按钮，   仅当下一个幻灯片会转到下一张幻灯片   按钮被点击。同样，我们应该将属性更改为   rel =“ sequence2”，第二个Sequence.js实例   将导航到下一张幻灯片。如果rel属性被删除   完全来说，两个实例都将转到下一张幻灯片。这适用于   所有UI元素，无论它们在页面上的位置如何-都可以   在Sequence.js元素之内或之外。

您需要做的就是添加与序列元素的 id 相匹配的 rel 属性。