bxslider Come è possibile fare le miniature come una giostra?

Question

Io uso questo cursore http://bxslider.com/examples/thumbnail-pager-1. Funziona, ma ho un sacco di elementi e le miniature non rientra in una riga e passare alla riga successiva. Come è possibile fare miniature come una giostra? Ti sarò molto grato per l'aiuto. Saluti.

Il mio codice è qui [http://jsfiddle.net/dmeX5/]

Answer 1

C'è un problema aperto per Github di questo bxslider. Per il momento è possibile utilizzare il codice fornito here.

Il seguente codice produce 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

La risposta di cui sopra è corretta, ma c'era un errore di battitura, aveva slideIndex quando stiamo utilizzando i dati-slideIndex o dati-slide-indice su bxslider4.

Questo vuole essere un jsfiddle con esso perfettamente funzionante: 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>