bxslider Comment est-il possible de faire des vignettes comme un carrousel?

- Je utiliser ce curseur http://bxslider.com/examples/thumbnail-pager-1.
Il fonctionne, mais j'ai un bon nombre d'éléments et les vignettes ne pas tenir sur une seule ligne et passer à la ligne suivante. Comment est-il possible de faire des miniatures comme un carrousel?
Je serai très reconnaissant à vous pour vous aider.
Ce qui concerne.

Mon code est ici [http://jsfiddle.net/dmeX5/]

source d'informationauteur dakotta

  1. 16

    Il y a un sujet ouvert pour cette bxslider de Github. Pour l'instant, vous pouvez utiliser le code fourni ici.

    Le code ci-dessous produit cette.

        /*............ 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);

}