Question

我想以getCurrentSlide / getSlideCount的格式构建带分页的bxslider。类似于here。

我的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，但我没有找到任何示例。

任何帮助，将不胜感激。谢谢！

Answer 1

bxSlider有简短的寻呼机;）

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

Answer 2

你可以这样做;

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());   
    }
});

Answer 3

将此代码附加到标题

中

<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（）之后添加。你已经完成了，应该显示总和当前索引，希望这会有所帮助。

解决方案Instruction and Demo can be found here

bxSlider当前幻灯片编号显示/总幻灯片显示

3 个答案: