2014-12-04 373 views
2

我在想如何用Bootstrap Carousel显示页码。引导具有转盘指标(点分):Bootstrap 3 - 带页码的旋转木马

enter image description here

是否有可能指示更改为类似“1/3页”?

我曾尝试加入数来引导标题并将其移动到左侧:

enter image description here

但是,每当我点击下一个,数量并没有留在自己的位置。任何想法如何使这更好?

谢谢!

回答

3

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

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

http://jsfiddle.net/Lf9krnsm/

+0

现在它不工作... – leymannx 2016-01-10 12:09:26

+1

这似乎是'carouselData.getActiveIndex();'不工作了。我做了一些改变,所以它现在工作http://jsfiddle.net/Lf9krnsm/ – yulie 2016-01-10 23:05:54

0
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; 

});