bxslider設置最小/最大可見幻燈片

Question

嗨，大家好我明白任何幫助，

基本上我有25張幻燈片滑塊，但我不希望所有25個縮略圖顯示，只有5個在同一時間 這裏是否嘗試過一些設置。我嘗試了很多組合與最大最小的幻燈片，但什麼也沒發生一樣有displaySlideQty，

<script type="text/javascript"> 
    $(document).ready(function(){ 
$('#slider2').bxSlider({ 
    auto: true, 
    autoControls: true, 
    pause: 3000, 
    minSlides: 1, 
      maxSlides: 5, 
      displaySlideQty : 5, 
    slideMargin: 20, 
    infiniteLoop: false, 

}); 
<div class="slider"> 
<h3>Slideshow 2</h3> 
<ul id="slider2"> 
    <li><img src="images/4.jpg" /></li> 
    <li><img src="images/5.jpg" /></li> 
    <li><img src="images/6.jpg" /></li> 
    <li><img src="images/4.jpg" /></li> 
    <li><img src="images/5.jpg" /></li> 
    <li><img src="images/6.jpg" /></li> 
    <li><img src="images/4.jpg" /></li> 
    <li><img src="images/5.jpg" /></li> 
    <li><img src="images/6.jpg" /></li> 
    <li><img src="images/4.jpg" /></li> 
    <li><img src="images/5.jpg" /></li> 
    <li><img src="images/6.jpg" /></li>  
</ul></div> 
<div id="bx-pager"> 
    <a data-slide-index="0" href=""><img src="images/thumbs/1.jpg" /></a> 
    <a data-slide-index="1" href=""><img src="images/thumbs/2.jpg" /></a> 
    <a data-slide-index="2" href=""><img src="images/thumbs/3.jpg" /></a> 
    <a data-slide-index="4" href=""><img src="images/thumbs/1.jpg" /></a> 
    <a data-slide-index="5" href=""><img src="images/thumbs/2.jpg" /></a> 
    <a data-slide-index="6" href=""><img src="images/thumbs/3.jpg" /></a> 
    <a data-slide-index="7" href=""><img src="images/thumbs/1.jpg" /></a> 
    <a data-slide-index="8" href=""><img src="images/thumbs/2.jpg" /></a> 
    <a data-slide-index="9" href=""><img src="images/thumbs/3.jpg" /></a> 
    <a data-slide-index="10" href=""><img src="images/thumbs/1.jpg" /></a> 
    <a data-slide-index="11" href=""><img src="images/thumbs/2.jpg" /></a> 
    <a data-slide-index="12" href=""><img src="images/thumbs/3.jpg" /></a>  
</div> 

Answer 1

這裏就是我所做的：

我創建了兩個滑塊這樣一個將滑塊和其他旋轉木馬這將有助於我們作爲傳呼機。

你可以看看：

http://jsfiddle.net/sanchitos/FpPAg/22/

Basic代碼：

var carousel; 
var slider; 
$(document).ready(function() { 
    carousel = $('.slider4').bxSlider({ 
     slideWidth: 300, 
     minSlides: 2, 
     maxSlides: 3, 
     moveSlides: 1, 
     slideMargin: 10, 
     pager: false 

    }); 

    slider = $('.bxslider').bxSlider({ 
     captions: true, 
     controls: false, 
     pager: false 
    }); 
}); 

function clicked(position) { 
    slider.goToSlide(position); 
} 

HTML：

<ul class="bxslider" style="width: auto; position: relative;"> 
    <li> 
     <img src="http://placehold.it/300x150&text=FooBar0" title="Funky roots1" /> 
    </li> 
    <li> 
     <img src="http://placehold.it/300x150&text=FooBar1" title="Funky roots2" /> 
    </li> 
    <li> 
     <img src="http://placehold.it/300x150&text=FooBar2" title="Funky roots3" /> 
    </li> 
    <li> 
     <img src="http://placehold.it/300x150&text=FooBar3" title="Funky roots4" /> 
    </li> 
    <li> 
     <img src="http://placehold.it/300x150&text=FooBar4" title="Funky roots5" /> 
    </li> 
    <li> 
     <img src="http://placehold.it/300x150&text=FooBar5" title="Funky roots6" /> 
    </li> 
    <li> 
     <img src="http://placehold.it/300x150&text=FooBar6" title="Funky roots7" /> 
    </li> 
    <li> 
     <img src="http://placehold.it/300x150&text=FooBar7" title="Funky roots8" /> 
    </li> 
    <li> 
     <img src="http://placehold.it/300x150&text=FooBar8" title="Funky roots8" /> 
    </li> 
    <li> 
     <img src="http://placehold.it/300x150&text=FooBar9" title="Funky roots9" /> 
    </li> 
</ul> 
<div class="slider4"> 
    <div class="slide"> <a href="javascript:void(0);" onclick="clicked(0);"> 
     <img src="http://placehold.it/300x150&text=FooBar0"> 
      </a> 

    </div> 
    <div class="slide"> <a href="javascript:void(0);" onclick="clicked(1);"> 
     <img src="http://placehold.it/300x150&text=FooBar1"> 
      </a> 

    </div> 
    <div class="slide"> <a href="javascript:void(0);" onclick="clicked(2);"> 
     <img src="http://placehold.it/300x150&text=FooBar2"> 
      </a> 

    </div> 
    <div class="slide"> <a href="javascript:void(0);" onclick="clicked(3);"> 
     <img src="http://placehold.it/300x150&text=FooBar3"> 
      </a> 

    </div> 
    <div class="slide"> <a href="javascript:void(0);" onclick="clicked(4);"> 
     <img src="http://placehold.it/300x150&text=FooBar4"> 
      </a> 

    </div> 
    <div class="slide"> <a href="javascript:void(0);" onclick="clicked(5);"> 
     <img src="http://placehold.it/300x150&text=FooBar5"> 
      </a> 

    </div> 
    <div class="slide"> <a href="javascript:void(0);" onclick="clicked(6);"> 
     <img src="http://placehold.it/300x150&text=FooBar6"> 
      </a> 

    </div> 
    <div class="slide"> <a href="javascript:void(0);" onclick="clicked(7);"> 
     <img src="http://placehold.it/300x150&text=FooBar7"> 
      </a> 

    </div> 
    <div class="slide"> <a href="javascript:void(0);" onclick="clicked(8);"> 
     <img src="http://placehold.it/300x150&text=FooBar8"> 
      </a> 

    </div> 
    <div class="slide"> <a href="javascript:void(0);" onclick="clicked(9);"> 
     <img src="http://placehold.it/300x150&text=FooBar9"> 
      </a> 

    </div> 
</div>