Multiple sliders on same page using jQuery Slippry plug-in

Question

I am using a jQuery plugin called Slippry for my image galleries. I am following their example of a slider with thumbnails . When I copy this example for only one slider on the page it works perfectly. However, if I add another like in my jsFiddle below, it doesn't work. I have been trying to figure out how to modify the JS for the second slider.

the following classes need to stay the same for both sliders due to css: thumb-box, thumbs.

Please see this jsFiddle example with my current code.

    <div class="row">
        <div class=col-md-8>
        <ul id="thumbnails">
        <li><img src="img/media/photos/gallery1/01.jpg"></li>
        <li><img src="img/media/photos/gallery1/02.jpg"></li>
        <li><img src="img/media/photos/gallery1/03.jpg"></li>
      </ul>
      </div>
      <div class="col-md-4">
    <div class="thumb-box">
      <ul class="thumbs">
        <li><a href="#1" data-slide="1"><img src="img/media/photos/gallery1/01.jpg"></a></li>
        <li><a href="#2" data-slide="2"><img src="img/media/photos/gallery1/02.jpg"></a></li>
        <li><a href="#3" data-slide="3"><img src="img/media/photos/gallery1/03.jpg"></a></li>
      </ul>
      </div>
    </div>
        </div>

      <div class="row">
      <div class=col-md-8>
        <ul id="thumbnails2">
        <li><img src="img/media/photos/gallery2/01.jpg"></li>
        <li><img src="img/media/photos/gallery2/02.jpg"></li>
        <li><img src="img/media/photos/gallery2/03.jpg"></li>
      </ul>
      </div>
      <div class="col-md-4">
    <div class="thumb-box">
      <ul class="thumbs">
        <li><a href="#1" data-slide="1"><img src="img/media/photos/gallery2/01.jpg"></a></li>
        <li><a href="#2" data-slide="2"><img src="img/media/photos/gallery2/02.jpg"></a></li>
        <li><a href="#3" data-slide="3"><img src="img/media/photos/gallery2/03.jpg"></a></li>
      </ul>
      </div>
    </div>
      </div>

<script>
    jQuery(document).ready(function(){
var thumbs = jQuery('#thumbnails').slippry({
  // general elements & wrapper
  slippryWrapper: '<div class="slippry_box thumbnails" />',
  // options
  transition: 'horizontal',
  pager: false,
  auto: false,
  onSlideBefore: function (el, index_old, index_new) {
    jQuery('.thumbs a img').removeClass('active');
    jQuery('img', jQuery('.thumbs a')[index_new]).addClass('active');
  }
});

var thumbs2 = jQuery('#thumbnails2').slippry({
  // general elements & wrapper
  slippryWrapper: '<div class="slippry_box thumbnails" />',
  // options
  transition: 'horizontal',
  pager: false,
  auto: false,
  onSlideBefore: function (el, index_old, index_new) {
    jQuery('.thumbs a img').removeClass('active');
    jQuery('img', jQuery('.thumbs a')[index_new]).addClass('active');
  }
});

jQuery('.thumbs a').click(function () {
  thumbs.goToSlide($(this).data('slide'));
  thumbs2.goToSlide($(this).data('slide'));
  return false;
});
    });
    </script>

Answer 1

There are couple issues in your code.

1. <a href="#slide1"> is missing in <ul id="thumbnails">
2. You use the same id which is used by jQuery to bootstrap slippry controls. (You've fixed this one after editing your question)
3. Thumbnail css styles, jquery and slippry libraries/css are missing in your fiddle
4. thums onclick event should registry per each thumbnails

Here is the fixed version in jsFiddle

Note:

• I copy entire slippry js, the real code start at line 232
• Nav icons are not downloaded. Didn't fix that in my Fiddle.

HTML

<script src="//ajax.googleapis.com/ajax/libs/jquery/1.10.2/jquery.min.js"></script>

<ul id="thumbnails1">
  <li>
    <a href="#slide1"><img src="http://slippry.com/assets/img/image-1.jpg"></a>
  </li>
  <li>
    <a href="#slide2"><img src="http://slippry.com/assets/img/image-2.jpg"></a>
  </li>
  <li>
    <a href="#slide3"><img src="http://slippry.com/assets/img/image-3.jpg"></a>
  </li>
</ul>

<div id="thumbs1">
  <div class="thumb-box">
    <ul class="thumbs">
      <li>
        <a href="#1" data-slide="1"><img src="http://slippry.com/assets/img/image-1.jpg"></a>
      </li>
      <li>
        <a href="#2" data-slide="2"><img src="http://slippry.com/assets/img/image-2.jpg"></a>
      </li>
      <li>
        <a href="#3" data-slide="3"><img src="http://slippry.com/assets/img/image-3.jpg"></a>
      </li>
    </ul>
  </div>
</div>

<ul id="thumbnails2">
  <li>
    <a href="#slide1"><img src="http://slippry.com/assets/img/image-5.jpg"></a>
  </li>
  <li>
    <a href="#slide2"><img src="http://slippry.com/assets/img/image-6.jpg"></a>
  </li>
  <li>
    <a href="#slide3"><img src="http://slippry.com/assets/img/image-7.jpg"></a>
  </li>
</ul>

<div id="thumbs2">
  <div class="thumb-box">
    <ul class="thumbs">
      <li>
        <a href="#1" data-slide="1"><img src="http://slippry.com/assets/img/image-5.jpg"></a>
      </li>
      <li>
        <a href="#2" data-slide="2"><img src="http://slippry.com/assets/img/image-6.jpg"></a>
      </li>
      <li>
        <a href="#3" data-slide="3"><img src="http://slippry.com/assets/img/image-7.jpg"></a>
      </li>
    </ul>
  </div>
</div>

JavaScript

// ************* code start here ******************

var thumbs = jQuery('#thumbnails1').slippry({
  // general elements & wrapper
  slippryWrapper: '<div class="slippry_box thumbnails" />',
  // options
  transition: 'horizontal',
  pager: false,
  auto: false,
  onSlideBefore: function(el, index_old, index_new) {
    jQuery('#thumbs1 .thumbs a img').removeClass('active');
    jQuery('img', jQuery('#thumbs1 .thumbs a')[index_new]).addClass('active');
  }
});

jQuery('#thumbs1 .thumbs a').click(function() {
  thumbs.goToSlide($(this).data('slide'));
  return false;
});

var thumbs2 = jQuery('#thumbnails2').slippry({
  // general elements & wrapper
  slippryWrapper: '<div class="slippry_box thumbnails" />',
  // options
  transition: 'horizontal',
  pager: false,
  auto: false,
  onSlideBefore: function(el, index_old, index_new) {
    jQuery('#thumbs2 .thumbs a img').removeClass('active');
    jQuery('img', jQuery('#thumbs2 .thumbs a')[index_new]).addClass('active');
  }
});

jQuery('#thumbs2 .thumbs a').click(function() {
  thumbs2.goToSlide($(this).data('slide'));
  return false;
});