Question

我正在使用此插件和HTML代码。

http://demo.sequencejs.com/pop-slide/

如果我使用，一个滑块..它没有任何问题加载正常。

但是，当我们在同一页面上需要2个滑块时，两个滑块都开始滑动图像。

Ex：Slide1移动幻灯片2图像也同时移动。

如果用户点击，则需要帮助才能移动幻灯片1图片。幻灯片1和幻灯片之间不应该有任何关系。滑2容器。

由于

HTML：

<!-- Slide 1 -->
<div class="signpost seq visible-xs">
  <div class="seq-screen">
    <ul class="seq-canvas">
      <li class="seq-step11 seq-in">
        <img src="./images/promo-01.jpg">
      </li>
      <li class="seq-step12 seq-in">
        <img src="./images/promo-02.jpg">
      </li>
      <li class="seq-step13 seq-in">
        <img src="./images/promo-03.jpg">
      </li>
    </ul>
  </div>
  <ul class="seq-pagination" role="navigation" aria-label="Pagination">
    <li><a href="#step11" rel="step11" title="Go to slide 11">Link 11</a></li>
    <li><a href="#step12" rel="step12" title="Go to slide 12">Link 12</a></li>
    <li><a href="#step13" rel="step13" title="Go to slide 13">Link 13</a></li>
  </ul>
</div>

<!-- Slide 2 -->
<div class="signpost seq visible-xs">
  <div class="seq-screen">
    <ul class="seq-canvas">
      <li class="seq-step21 seq-in">
        <img src="./images/promo-21.jpg">
      </li>
      <li class="seq-step22 seq-in">
        <img src="./images/promo-22.jpg">
      </li>
      <li class="seq-step23 seq-in">
        <img src="./images/promo-23.jpg">
      </li>
    </ul>
  </div>
  <ul class="seq-pagination" role="navigation" aria-label="Pagination">
    <li><a href="#step21" rel="step21" title="Go to slide 21">Link 21</a></li>
    <li><a href="#step22" rel="step22" title="Go to slide 22">Link 22</a></li>
    <li><a href="#step23" rel="step23" title="Go to slide 23">Link 23</a></li>
  </ul>
</div>

JS：

var options = {
    keyNavigation: true,
    fadeStepWhenSkipped: false,
    autoPlay: true,
    autoPlayInterval: 4000,
    autoPlayDelay: null,
    autoPlayDirection: 1,
    autoPlayPauseOnHover: false
};

var signpostCarousel = $('.signpost-mobile');
signpostCarousel.each(function () {
    var initializeSignpostCarousel = sequence(this, options);
});

Answer 1

从他们的文件：

可以在同一页面上放置Sequence.js的多个实例，如下所示：

var sequenceElement1 = document.getElementById("sequence1");
var sequenceElement2 = document.getElementById("sequence2");
var mySequence1 = sequence(sequenceElement1);
var mySequence2 = sequence(sequenceElement2);

（https://www.sequencejs.com/documentation/）

因此，您需要2个不同的ID或类，每个滑块容器一个

幻灯片1＆amp;单击幻灯片1图像时，滑动2图像移动

1 个答案: