同一页面上的多个滑块使用 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

您的代码中有几个问题。

<a href="#slide1"> 在 <ul id="thumbnails">
您使用与 jQuery 到 bootstrap slippry 控件相同的 ID。（您在编辑问题后已修复此问题）
您的 fiddle
应该为每个缩略图注册 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;
});

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

Multiple sliders on same page using jQuery Slippry plug-in

html

javascript

css

jquery

jquery-plugins