bxslider Bir karusel gibi küçük resimler yapmak nasıl mümkün olabilir?

Question

Bu kaydırıcıyı http://bxslider.com/examples/thumbnail-pager-1 kullanıyorum. Çalışıyor, ancak birçok öğe var ve küçük resimler bir çizgiye sığmıyor ve bir sonraki satıra geçiyor. Bir atlıkarınca gibi küçük resimler yapmak nasıl mümkün olabilir? Yardımlarınız için size çok minnettar olacağım. Saygılar.

Kodum [http://jsfiddle.net/dmeX5/]

Answer 1

bu bxslider en Github için açık bir sorun vardır burada. Şu an için here kodunu kullanabilirsiniz. Aşağıdaki kod, this ürününü üretir. Aşağıdaki kod this üretir. Biz bxslider4 veri-slideIndex veya veri-slayt-endeksini kullanırken

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

cevap yukarıdaki doğru olmakla birlikte, bir yazım hatası yoktu, o slideIndex vardı. İşte

onunla jsfiddle mükemmel çalışıyor: 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>