jquery - Twitter Bootstrap 轮播 : Change background outside carousel-element

Question

我使用来自 Twitter Bootstrap 框架的标准轮播: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..
});

您可能想要做的是替换行:

//根据幻灯片编号做一些事情..

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

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