我使用twitter bootstrap的默认carousel作为一个简单的滑块。我想要实现的是,无论哪个项目是活动的,该项目中的img也应该被克隆,并设置为div的背景图像,其类为“meterinals bg”。
我尝试了以下代码,但似乎不起作用:
$("#testimonial-carousel .item.active").each(function() {
var $myBg = $(".testimonial-bg", this),
$myImg = $(".testimonial-img img", this);
$myBg.css({backgroundImage: "url('"+ $myImg[0].src +"')"});
});
我做了一把小提琴:
https://jsfiddle.net/4t17wxxw/
最佳答案
订阅slid.bs.carousel
事件并将背景图像更改为活动图像:
var $myBg = $(".testimonial-bg");
$('#testimonial-carousel').on('slid.bs.carousel', function () {
var $img = $('img','.carousel-inner>.item.active');
$myBg.css({backgroundImage: "url('"+ $img[0].src +"')"});
console.log($img[0].src);
});
Working fiddle