使用 jQuery Slippry 插件在同一页面上的多个滑块

Question

我正在为我的图片库使用一个名为 Slippry 的 jQuery 插件。我正在关注他们的example of a slider with thumbnails。当我为页面上的一个滑块复制此示例时，它可以完美运行。但是，如果我在下面的 jsFiddle 中添加另一个类似的东西，它就不起作用。我一直在想如何修改第二个滑块的 JS。

由于 css 的原因，两个滑块的以下类需要保持相同：thumb-box、thumbs。

请参阅this jsFiddle 我当前代码的示例。

    <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

您的代码中有几个问题。

1. <a href="#slide1"> 在 <ul id="thumbnails"> 中丢失
2. 您使用与 jQuery 相同的 ID 来引导滑动控件。 （您在编辑问题后已修复此问题）
3. 您的小提琴中缺少缩略图 css 样式、jquery 和 slippry 库/css
4. thums onclick 事件应按每个缩略图注册

这是jsFiddle中的固定版本

注意：

• 我复制了整个slippry js，真正的代码从第232行开始
• 未下载导航图标。在我的 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;
});