jQuery Slippryプラグインを使用して、同じページに複数のスライダを表示

Question

私のイメージギャラリーにはSlippryというjQueryプラグインが使用されています。私は彼らのexample of a slider with thumbnailsに従っています。この例をページ上の1つのスライダーだけにコピーすると、完全に動作します。しかし、私の下のjsFiddleのようなものを追加すると、うまくいきません。私は、JSを第2のスライダに変更する方法を理解しようとしています。

次のクラスは、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">はあなたがslippryコントロールをブートストラップするためのjQueryで使用されているのと同じIDを使用<ul id="thumbnails">
2. にありません。
3. サムネイルCSSスタイルは、jQueryとslippryライブラリ/ CSSが
ここ

は、各サムネイルごとにレジストリなければならないあなたのフィドルに

THUMSのonclickイベントが欠落している（あなたの質問を編集した後、このいずれかを修正しました） jsFiddle

注固定バージョン：

• 私は全体slippryの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; 
});