2

我想以 getCurrentSlide / getSlideCount 的格式构建带有分页的 bxslider。像这里的东西。

我的html代码:

<ul class="bxslider">
  <li>...</li>
  ...
</ul>
<div class="counter">1 / 10</div>

JS代码:

jQuery('.bxslider').bxSlider({
  pager: true,
  auto: false,
  controls: true
});

我假设,我需要使用 getCurrentSlide / getSlideCount,但我没有找到任何示例。

任何帮助,将不胜感激。谢谢!

4

3 回答 3

6

bxSlider 有短寻呼机;)

$('.bxslider').bxSlider({ pager: true, pagerType: 'short' });

于 2015-02-23T13:57:35.143 回答
4

你可以这样做;

slider = $('.bxslider').bxSlider({ 
    nextSelector: '.next-slide',
    nextText: '>',  
    prevSelector: '.prev-slide',
    prevText: '<',
    mode: 'fade',
    captions: false, 
    auto: true,
    autoControls: false,
    onSlideAfter: function(){    
        $('.slide-number').text((slider.getCurrentSlide()+1)+'/'+slider.getSlideCount());   
    }
});
于 2013-12-20T13:09:32.330 回答
2

将此代码附加到您的标题中

<script>
(function ($) {
     //bxslider
     function insertCount(slide_curr, slide_count) {
         $('#slide-counter').html('<strong>' + (slide_curr + 1) + '</strong>/' + slide_count);
     };

        var slider = $('.bxslider').bxSlider({
            auto: true,
            pager: false,
            captions:true,
            onSliderLoad: function () {
                var slide_count = slider.getSlideCount();
                var slide_curr = slider.getCurrentSlide();
                insertCount(slide_curr, slide_count);
            },
            onSlideNext: function () {
                var slide_count = slider.getSlideCount();
                var slide_curr = slider.getCurrentSlide();
                insertCount(slide_curr, slide_count);
            },
            onSlidePrev: function () {
                var slide_count = slider.getSlideCount();
                var slide_curr = slider.getCurrentSlide();
                insertCount(slide_curr, slide_count);
            }
        });
})(jQuery);
</script>

在关闭 ul() 之后添加。您已完成并且应该显示总索引和当前索引希望这会有所帮助。

解决方案说明和演示可以在这里找到

于 2014-03-10T17:23:03.833 回答