Question

我目前正在使用寻呼机和最小/最大幻灯片选项调用bxslider。

我遇到的问题是它没有正确计算我的幻灯片，它似乎是在计算当前幻灯片（正确）和＆＃34;下一个＆＃34;幻灯片的数量而不是总数。我如何获得总数？

HTML：

<ul class="carousel-slider">
    <li><img src="assets/images/cms-images/gallery.jpg" alt=""/></li>
    <li><img src="assets/images/cms-images/gallery.jpg" alt=""/></li>
    <li><img src="assets/images/cms-images/gallery.jpg" alt=""/></li>
    <li><img src="assets/images/cms-images/gallery.jpg" alt=""/></li>
    <li><img src="assets/images/cms-images/gallery.jpg" alt=""/></li>
</ul>

bxSlider致电：

 $('.carousel-slider').bxSlider({
    auto: false,
    pager: true,
    pagerType: 'short',
    minSlides: 3,
    maxSlides: 3,
    moveSlides:1,
    slideWidth: 800,
    slideMargin: 40
  });

Answer 1

虽然我没有找到issue（atm 333问题），但似乎有一个错误。提供了一种解决方法，基本上创建了一个行为正常的新寻呼机。详细信息在Fiddle和Snippet中进行了评论。

FIDDLE

段

$(function() {
  var bx = $('.carousel-slider').bxSlider({
    auto: false,
    pager: false,
    //pagerType: 'short',
    minSlides: 3,
    maxSlides: 3,
    moveSlides: 1,
    /* Not required but, could be useful */
    shrinkItems: true,
    slideWidth: 800,
    slideMargin: 40,
    /* Callback will update active slide index after a transition */
    onSlideAfter: counter,
    /* Callback will insert the new pager element when loading */
    onSliderLoad: init
  });

  function init() {
    $('.bx-controls').after('<nav id="counter">1 / 5</nav>');
  }

  function counter() {
    $('#counter').text((bx.getCurrentSlide() + 1) + ' / ' + bx.getSlideCount());
  }

});

/* Design #counter however you want */

#counter {
  margin: 0 auto;
  text-align: center;
  font: 400 16px/1.5 verdana;
  width: 100%;
  height: 24px;
  position: relative;
  top: 2em;
  color: #9f9f9f;
}

<link href="https://cdnjs.cloudflare.com/ajax/libs/bxslider/4.2.5/jquery.bxslider.min.css" rel="stylesheet">

<ul class="carousel-slider">
  <li>
    <img src="http://placehold.it/800x500?text=1">
  </li>
  <li>
    <img src="http://placehold.it/800x500?text=2">
  </li>
  <li>
    <img src="http://placehold.it/800x500?text=3">
  </li>
  <li>
    <img src="http://placehold.it/800x500?text=4">
  </li>
  <li>
    <img src="http://placehold.it/800x500?text=5">
  </li>
</ul>

<script src='https://cdnjs.cloudflare.com/ajax/libs/jquery/1.11.3/jquery.min.js'></script>
<script src='https://cdnjs.cloudflare.com/ajax/libs/bxslider/4.2.5/jquery.bxslider.min.js'></script>

bxSlider简短的PagerType和maxSlides计数问题

1 个答案:

段