带有 Sequence.js 和分页的多个滑块答案

【问题标题】：Multiple Sliders With Sequence.js and pagination带有 Sequence.js 和分页的多个滑块
【发布时间】：2018-10-19 06:30:26
【问题描述】：

我有几个滑块，每个滑块都有不同数量的幻灯片。每个滑块没有下一个/上一个按钮，而是由分页控制。每当单击滑块的分页时，每个滑块的图像都会前进到相应的分页。因此，如果单击第二个分页按钮，每个滑块都会转到第二个图像，而不仅仅是当前滑块。我尝试了以下解决方案：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 上）

【问题讨论】：

比勒？布勒？有人吗？
观看次数太多，帮助太少... :(

标签： javascript jquery pagination slider sequence

【解决方案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");

});

【讨论】：

感谢凯文的帮助。不幸的是，我们已经不再使用 Sequence.js，因为这个项目很紧急。也许我可以在未来的项目中实施您的建议......

【解决方案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>

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

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

【讨论】：