这里有一个DEMO。

Question

我已阅读并试验过这两个方面：

How to output current slide number in Bootstrap 3 Carousel?

How to Get total and Current Slide Number of Carousel

事情是在同一页面上的模态中有3个（可能更晚）旋转木马，这似乎驱动了两个上面链接的解决方案。

我试图做的事情我无法解决的是：

如何在模式标题中显示实际幻灯片编号（总Y的照片X），请记住我在同一页面中有很多轮播。

例如，我无法使用

$('div.active').index() + 1;

因为它总是计算第一个旋转木马的幻灯片编号（这对我来说似乎很浪费，因为我必须为许多旋转木马提供相同代码的许多副本）

我根据上面的答案构建的代码是：

// Slide number for #carousel1 in class .numslide1 (total counted by itemcar1)
var totalItems = $('.itemcar1').length;
var currentIndex = $('div.active').index() + 1;
$('.numslide1').html('FOTO '+currentIndex+' DE '+totalItems+'');

$('#carousel1').carousel({
    interval: 5000
});

$('#carousel1').bind('slid', function() {
    currentIndex = $('div.active').index() + 1;
    $('.numslide1').html('FOTO '+currentIndex+' DE '+totalItems+'');
});

提前致谢！

Answer 1

您的代码存在一些问题。下面的第一项肯定会导致代码失败：

如果您使用的是Bootstrap 3，则需要使用slid.bs.carousel（不是'滑动'，这是版本2中的方法）。
您不应该使用bind（）。它被弃用了。改为使用on（）方法。
您真的不需要为您的轮播提供多个处理程序。您可以使用示例中使用的$（this）作为目标。

<强> JS：

$('.carousel').on('slid.bs.carousel', function () {
  var carouselData = $(this).data('bs.carousel');
  var currentIndex = carouselData.getActiveIndex();
  var total = carouselData.$items.length;

  // index is 0-based so add 1 to it
  var txt = 'FOTO '+(currentIndex + 1)+' DE '+total;

  //MAKE SURE that each of your carousels has an element with the class numslide 
  //you don't need to make them unique because we're using this to target 
  $(this).find('.numslide').text(txt);
});

我的另一个建议是你真的不需要这个：

$('#carousel1').carousel({
    interval: 5000
});

您的轮播所有必须具有唯一ID ，但您可以通过以下方式调用所有轮播（在上述处理程序之前）：

$('.carousel').carousel(); //interval by default is 5000 so you don't need it in the options

你没有真正展示你的HTML，但由于它们是在模态中，我建议不要在你的标记中使用data-ride="carousel"。这将导致轮播在页面加载时开始循环。结果是，不仅每个轮播的js每5秒运行一次以加载新的幻灯片，而且处理程序将每5秒调用3次。这将是非常低效，因为隐藏了模态。

相反，您可以在启动模态时使用.carousel('cycle')方法，再次隐藏模态时使用.carousel('pause')。像这样的东西可以解决这个问题：

$('.modal').on('shown.bs.modal', function () {
  $(this).find('.carousel').carousel('cycle');
});

$('.modal').on('hidden.bs.modal', function () {
  $(this).find('.carousel').carousel('pause');
});

jquery bootstrap 3轮播滑块编号（带有很多轮播）

1 个答案:

这里有一个DEMO。