我到处搜索,发现一个似乎可以完成此任务的线程:如何获取轮播的总数和当前幻灯片数量不幸的是,我认为上述线程中的解决方案在Bootstrap版本3中不起作用.或者也许我只是搞砸了.有人知道这是否可能吗?我真的希望是这样!任何帮助或建议,将不胜感激.谢谢!解决方案您可以使用bootstrap插件的.getActiveIndex()方法(不过我认为它在bootstrap 2中不起作用).// Listen to the 'slid carousel' event// to trigger our code after each slide change$('.carousel').on('slid.bs.carousel', function () { // This variable contains all kinds of data and methods related to the carousel var carouselData = $(this).data('bs.carousel'); // Doesn't work in Boostrap >= 3.2 //var currentIndex = carouselData.getActiveIndex(); var currentIndex = carouselData.getItemIndex(carouselData.$element.find('.item.active')); var total = carouselData.$items.length; // Create the text we want to display. // We increment the index because humans don't count like machines var text = (currentIndex + 1) + " of " + total; // You have to create a HTML element <div id="carousel-index"></div> // under your carousel to make this work $('#carousel-index').text(text);});此处的演示工作: http://jsfiddle.net/nUgy4/2/,希望您会发现它很有用I'm looking to output the current slide number using Bootstrap 3's Carousel plugin. Ideally, I would like to have this as text underneath the carousel div. For example:[CAROUSEL HERE]3 of 9I can output the total number of images (e.g. 9 in the example above) using a function in my CMS, but I can't figure out how to get the active slide (e.g. 3 in the example above.)I have searched all over and found one thread that seemed to do just that: How to Get total and Current Slide Number of CarouselUnfortunately, I think the solution in the above thread doesn't work in Bootstrap version 3. Or maybe I'm just messing something up.Does anyone know if this is possible? I'm really hoping it is! Any help or suggestions would be greatly appreciated. Thanks! 解决方案 You can use the .getActiveIndex() method of the bootstrap plugin (I don't think it works in bootstrap 2 though).// Listen to the 'slid carousel' event// to trigger our code after each slide change$('.carousel').on('slid.bs.carousel', function () { // This variable contains all kinds of data and methods related to the carousel var carouselData = $(this).data('bs.carousel'); // EDIT: Doesn't work in Boostrap >= 3.2 //var currentIndex = carouselData.getActiveIndex(); var currentIndex = carouselData.getItemIndex(carouselData.$element.find('.item.active')); var total = carouselData.$items.length; // Create the text we want to display. // We increment the index because humans don't count like machines var text = (currentIndex + 1) + " of " + total; // You have to create a HTML element <div id="carousel-index"></div> // under your carousel to make this work $('#carousel-index').text(text);});Working demo here: http://jsfiddle.net/nUgy4/2/ , I hope you will find it useful. 这篇关于如何在Bootstrap 3 Carousel中输出当前幻灯片编号?的文章就介绍到这了,希望我们推荐的答案对大家有所帮助,也希望大家多多支持! 上岸,阿里云!
08-19 02:11
查看更多