Twitter Bootstrap Carousel：在轮播元素之外更改背景

Question

我使用来自 twitter 引导框架的标准轮播：http://getbootstrap.com/javascript/#carousel

现在我想更改每张幻灯片的背景。 问题是，背景不在“carousel-inner” DIV 中。

有没有办法触发这个div之外的背景？或者更好的是，在旋转木马之外？

Answer 1

分解逻辑可能更容易，听起来你想做的是：

1. 拦截轮播的幻灯片事件
2. 制作幻灯片
3. '做某事'取决于幻灯片（例如，更改另一个元素中的背景图像）。

看看下面的jsfiddle：

Fiddle

至关重要的是，jQuery：

// This triggers after each slide change
$('.carousel').on('slid.bs.carousel', function () {
  var carouselData = $(this).data('bs.carousel');
  var currentIndex = carouselData.getActiveIndex();
  var total = carouselData.$items.length; 
  var slide = (currentIndex + 1);
  // do something depending on the slide number..
});

你可能想要做的是替换行：

// do something depending on the slide number..

使用代码更改轮播之外的背景图片，例如：

$('#background_image_element').css('background-image', 'url(myPicture_'+slide +'.jpg)');