bxslider How is it possible to make thumbnails like a carousel?

Question

I use this slider http://bxslider.com/examples/thumbnail-pager-1. It works, but I have a lots of elements and thumbnails don't fit on one line and move to the next line. How is it possible to do thumbnails like a carousel? I'll be very grateful to you for help. Regards.

My code is here [http://jsfiddle.net/dmeX5/]

Answer 1

There is an open issue for this bxslider's Github. For the moment you can use the code provided here.

The code below produces 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);

}