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 に答える
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>

close ul() の直後に追加します。これで、合計と現在のインデックスが表示されるはずです。

ソリューションの説明とデモはこちら

于 2014-03-10T17:23:03.833 に答える