Twitter bootstrap 3 引导程序3-带页码的旋转木马

Twitter bootstrap 3 引导程序3-带页码的旋转木马,twitter-bootstrap-3,carousel,Twitter Bootstrap 3,Carousel,我想知道如何用引导转盘显示页码。引导程序具有转盘指示器(点): 是否可以将指示器更改为“第1/3页” 我已尝试将数字添加到引导标题并将其移到左侧: 然而,每当我点击next时,号码就不在原来的位置了。有什么办法让这更好吗 谢谢 找到了一个有效的解决方案: carousel.on('slide.bs.carousel', function (event) { var active = $(event.target).find('.carousel-inner > .item.act

我想知道如何用引导转盘显示页码。引导程序具有转盘指示器(点):

是否可以将指示器更改为“第1/3页”

我已尝试将数字添加到引导标题并将其移到左侧:

然而,每当我点击next时,号码就不在原来的位置了。有什么办法让这更好吗


谢谢

找到了一个有效的解决方案:

carousel.on('slide.bs.carousel', function (event) {

  var active = $(event.target).find('.carousel-inner > .item.active');
  var from = active.index();
  var next = $(event.relatedTarget);
  var to = next.index();
  var direction = event.direction;

});
var total = $('.item').length;
var currentIndex = $('div.active').index() + 1;
$('#slidetext').html(currentIndex + '/'  + total);

// This triggers after each slide change
$('.carousel').on('slid.bs.carousel', function () {
  currentIndex = $('div.active').index() + 1;

  // Now display this wherever you want
  var text = currentIndex + '/' + total;
  $('#slidetext').html(text);
});

HTML5:

<!-- Indicators -->
<ol class="carousel-indicators">
    <li data-target="#client" data-slide-to="0" class="active">1</li>
    <li data-target="#client" data-slide-to="1">2</li>
    <li data-target="#client" data-slide-to="2">3</li>
</ol>
.carousel-indicators{           
    bottom: -15px;
    left: 80%;

    li{
       width: 17px;
       height: 17px;
       margin: 3px;
       text-indent: 0;
       background-color: $wcolor;
       border: 1px solid $bcolor;
       border-radius: 0;
       line-height: 13px;
      }

      .active {
        width: 17px;
        height: 17px;
        background-color: #ddd;
      }
}

它看起来像是
carouselData.getActiveIndex()不再工作。我做了一些改变,所以它现在可以工作了