bxsliderどのようにカルーセルのようなサムネイルを作ることが可能ですか？

Question

私はこのスライダーを使用しますhttp://bxslider.com/examples/thumbnail-pager-1。 これは動作しますが、たくさんの要素があり、サムネイルは1行に収まらず、次の行に移動します。カルーセルのようにサムネイルをどのようにすることが可能ですか？ 私はあなたに非常に感謝します。よろしくです。 よろしくお願いします。

私のコードはここにある[http://jsfiddle.net/dmeX5/]

Answer 1

このbxsliderのGithubのための未解決の問題があります。当面はhereのコードを使用することができます。

下記のコードはthisです。

/*............ slider realizzazioni (BIG) */ 

     var realSlider= $j("#sliderBigReal ul").bxSlider({ 
      speed:1000, 
      pager:false, 
      nextText:'', 
      prevText:'', 
      infiniteLoop:false, 
      hideControlOnEnd:true, 
      onSlideBefore:function($slideElement, oldIndex, newIndex){ 
       changeRealThumb(realThumbSlider,newIndex); 

      } 

     }); 

     var realThumbSlider=$j("#sliderThumbReal ul").bxSlider({ 
      minSlides: 4, 
      maxSlides: 4, 
      slideWidth: 156, 
      slideMargin: 12, 
      moveSlides: 1, 
      pager:false, 
      speed:1000, 
      infiniteLoop:false, 
      hideControlOnEnd:true, 
      nextText:'<span></span>', 
      prevText:'<span></span>', 
      onSlideBefore:function($slideElement, oldIndex, newIndex){ 
       /*$j("#sliderThumbReal ul .active").removeClass("active"); 
       $slideElement.addClass("active"); */ 

      } 
     }); 

     linkRealSliders(realSlider,realThumbSlider); 

     if($j("#sliderThumbReal li").length<5){ 
      $j("#sliderThumbReal .bx-next").hide(); 
     } 




// sincronizza sliders realizzazioni 
function linkRealSliders(bigS,thumbS){ 

    $j("#sliderThumbReal ul").on("click","a",function(event){ 
     event.preventDefault(); 
     var newIndex=$j(this).parent().attr("slideIndex"); 
     bigS.goToSlide(newIndex); 
    }); 



} 

//slider!=$thumbSlider. slider is the realslider 
function changeRealThumb(slider,newIndex){ 

    var $thumbS=$j("#sliderThumbReal"); 
    $thumbS.find('.active').removeClass("active"); 
    $thumbS.find('li[slideIndex="'+newIndex+'"]').addClass("active"); 

    if(slider.getSlideCount()-newIndex>=4)slider.goToSlide(newIndex); 
    else slider.goToSlide(slider.getSlideCount()-4); 

} 

Answer 2

我々はbxslider4上のデータ・slideIndexまたはデータ・スライド・インデックスを使用している時には、上記の答えが正しいですが、タイプミスがあった、それはslideIndexを持っていました。ここで

は、それが完璧に働いとjsfiddleです： http://jsfiddle.net/DcpdT/25/

var $j = jQuery.noConflict(); 
 

 
var realSlider= $j("ul#bxslider").bxSlider({ 
 
     speed:1000, 
 
     pager:false, 
 
     nextText:'', 
 
     prevText:'', 
 
     infiniteLoop:false, 
 
     hideControlOnEnd:true, 
 
     onSlideBefore:function($slideElement, oldIndex, newIndex){ 
 
     changeRealThumb(realThumbSlider,newIndex); 
 
     
 
     } 
 
     
 
    }); 
 
    
 
    var realThumbSlider=$j("ul#bxslider-pager").bxSlider({ 
 
     minSlides: 4, 
 
     maxSlides: 4, 
 
     slideWidth: 156, 
 
     slideMargin: 12, 
 
     moveSlides: 1, 
 
     pager:false, 
 
     speed:1000, 
 
     infiniteLoop:false, 
 
     hideControlOnEnd:true, 
 
     nextText:'<span></span>', 
 
     prevText:'<span></span>', 
 
     onSlideBefore:function($slideElement, oldIndex, newIndex){ 
 
     /*$j("#sliderThumbReal ul .active").removeClass("active"); 
 
     $slideElement.addClass("active"); */ 
 

 
     } 
 
    }); 
 
    
 
    linkRealSliders(realSlider,realThumbSlider); 
 
    
 
    if($j("#bxslider-pager li").length<5){ 
 
     $j("#bxslider-pager .bx-next").hide(); 
 
    } 
 

 
// sincronizza sliders realizzazioni 
 
function linkRealSliders(bigS,thumbS){ 
 
    
 
    $j("ul#bxslider-pager").on("click","a",function(event){ 
 
    event.preventDefault(); 
 
    var newIndex=$j(this).parent().attr("data-slideIndex"); 
 
     bigS.goToSlide(newIndex); 
 
    }); 
 
} 
 

 
//slider!=$thumbSlider. slider is the realslider 
 
function changeRealThumb(slider,newIndex){ 
 
    
 
    var $thumbS=$j("#bxslider-pager"); 
 
    $thumbS.find('.active').removeClass("active"); 
 
    $thumbS.find('li[data-slideIndex="'+newIndex+'"]').addClass("active"); 
 
    
 
    if(slider.getSlideCount()-newIndex>=4)slider.goToSlide(newIndex); 
 
    else slider.goToSlide(slider.getSlideCount()-4); 
 

 
}

<!-- The main images --> 
 
    <ul id="bxslider"> 
 
<li><img src="http://dummyimage.com/600x400/000/fff.png" alt=""></li> 
 
<li><img src="http://dummyimage.com/600x400/000/ff0099.png" alt=""></li> 
 
<li><img src="http://dummyimage.com/600x400/000/ff0000.png" alt=""></li> 
 
<li><img src="http://dummyimage.com/600x400/000/fff000.png" alt=""></li> 
 
<li><img src="http://dummyimage.com/600x400/000/fff.png" alt=""></li> 
 
<li><img src="http://dummyimage.com/600x400/000/fff.png" alt=""></li> 
 
    </ul> 
 

 
    <!-- The thumbnails --> 
 
    <ul id="bxslider-pager"> 
 
<li data-slideIndex="0"><a href=""><img src="http://dummyimage.com/200x200/000/fff.png"></a></li> 
 
<li data-slideIndex="1"><a href=""><img src="http://dummyimage.com/200x200/000/ff0099.png"></a></li> 
 
<li data-slideIndex="2"><a href=""><img src="http://dummyimage.com/200x200/000/ff0000.png"></a></li> 
 
<li data-slideIndex="3"><a href=""><img src="http://dummyimage.com/200x200/000/fff000.png"></a></li> 
 
    <li data-slideIndex="4"><a href=""><img src="http://dummyimage.com/200x200/000/fff.png"></a></li> 
 
    <li data-slideIndex="5"><a href=""><img src="http://dummyimage.com/200x200/000/fff.png"></a></li> 
 
    </ul>