Slide 1 & Slide 2 image moving when Slide 1 image clicked

Question

I am using this plugin and HTML code.

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

If i use, one slider.. it loads fine without any issue.

But, when we required 2 sliders on the same page, both the sliders are starting slide the image.

Ex: Slide1 moves Slide 2 image also moving at same time.

Need help to move only Slide 1 image if user clicks. No relation should be between Slide 1 & Slide 2 container.

Thanks

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

Hey, try to give different classes for the slider's and the navigation for each of the sliders. — Manpreet Matharu, Oct 25 '17 at 07:34

score 0 · Accepted Answer · answered Oct 25 '17 at 07:39

0

From their documentation:

It is possible to place multiple instances of Sequence.js on the same page, like so:

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

(https://www.sequencejs.com/documentation/)

So you need 2 different ids or classes, one for each slider container

answered Oct 25 '17 at 07:39

zdolny

999
1
11
21

Hi.. is it possible we can array like var arrayVal = [1,2,3,4,5].. So, that i can add like "sequence1,sequence2,sequence3,sequence4,sequence5" – TDG Oct 25 '17 at 09:09
maybe you can do this, see: https://stackoverflow.com/questions/8525221/programmatically-setting-the-name-of-a-variable https://stackoverflow.com/questions/13291554/dynamic-variables-names-in-javascript but I couldn't make it work with sequence.js – zdolny Dec 08 '17 at 06:41

Slide 1 & Slide 2 image moving when Slide 1 image clicked

1 Answers1