Twitter Bootstrap Carousel：改变旋转木马元素之外的背景

Question

我使用twitter bootstrap框架中的标准轮播：http://getbootstrap.com/javascript/#carousel

现在我想用每张幻灯片更改背景。 问题是，背景不在“旋转木马内部”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)');