在bootstrap轮播中与中心图像对齐

时间:2015-02-01 14:35:16

标签: javascript jquery twitter-bootstrap

这就是我所拥有的: enter image description here

我想让每张图片都出现在旋转木马的中央。这是我决定实施的javascript代码:

$('.carousel-inner img').each(function(){
    // image dimensions
    var w = $(this).width();

    //get parent dimensions
    var div_w =$(".carousel-inner").width();

    //set img position
    this.style.left = div_w / 2 - w / 2 + 'px';
});

此代码应根据宽度调整每个图像的左边距。问题是这个代码将从每张幻灯片的每个图像应用第一张图像的左边距;相反,它应该分别计算每个图像的边距。

谢谢

1 个答案:

答案 0 :(得分:1)

.active类似乎被分配给正在显示的图像的父元素

尝试

if ($(this).parent("div.item").is(".active")) {
  this.style.left = div_w / 2 - w / 2 + 'px';
}