Question

大家好，我感谢您的帮助，

基本上我有一个带有25个幻灯片的滑块，但我不希望所有25个缩略图都显示出来，一次只有5个以下是我尝试过的一些设置。我尝试了很多与max-min幻灯片的组合，但是没有发生与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/

基本代码：

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>

bxslider使用自定义寻呼机设置最小/最大可见幻灯片

1 个答案: