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>