Question

我正在为我的图片库使用一个名为Slippry的jQuery插件。我关注他们example of a slider with thumbnails。当我在页面上仅复制一个滑块时，它可以完美地工作。但是，如果我在下面的jsFiddle中添加另一个，它就不起作用了。我一直在试图弄清楚如何修改第二个滑块的JS。

由于css：thumb-box，thumb，以下类对于两个滑块都需要保持不变。

请参阅我当前代码的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用于引导滑动控件的相同ID。（您在编辑问题后修复了此问题）
小提琴中缺少缩略图css样式，jquery和slippry libraries / css
thums onclick事件应该按每个缩略图注册

以下是jsFiddle

注意：

我复制整个滑点js，真正的代码从第232行开始
未下载导航图标。没有在我的小提琴中解决这个问题。

<强> 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插件在同一页面上的多个滑块

1 个答案: