スライド1とスライド2の画像スライド1の画像をクリックしたときに移動

Question

このプラグインとHTMLコードを使用しています。

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

私が使用している場合は、1つのスライダが...それはどんな問題なく罰金ロードします。

しかし、同じページに2つのスライダが必要な場合は、両方のスライダが画像をスライドさせ始めています。

例：スライド1はスライド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やクラス、各スライダコンテナのいずれかが必要