slideshow - bxslider 如何制作像旋转木马一样的缩略图？

Question

我使用这个滑块http://bxslider.com/examples/thumbnail-pager-1。它有效，但我有很多元素，缩略图不适合一行并移至下一行。怎么可能像轮播一样做缩略图？我会非常感谢你的帮助。问候。

我的代码在这里 [ http://jsfiddle.net/dmeX5/]

Answer 1

这个 bxslider 的 Github 有一个未解决的问题。目前您可以使用此处提供的代码。

下面的代码产生这个。

    /*............ 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 上使用 data-slideIndex 或 data-slide-index 时，它有 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>