javascript - 在 Twitter Bootstrap 轮播中显示下一张和上一张图像

Question

我正在寻找一种在 Twitter Bootstrap 轮播中显示下一张和上一张幻灯片图像的方法。

默认情况下，它只显示当前图像，如果我删除 display:none css 属性，它会将轮播中的每个元素放在一起。我尝试过使用 CSS，但还没有成功。

这个想法是在中间显示当前幻灯片图像，然后显示下一张和上一张具有不透明度的图像，不一定可点击。

我尝试过不同的幻灯片和轮播，但似乎找不到任何一个能够满足这些要求，而且其中一些接近的将无法适应 Bootstrap 提供的响应式设计。

通常，当我使用带有多个元素的轮播时，我只是将例如分组<div class="item" 内的图像> div 如下:

<div class="item active">
<img src="http://www.entiri.com/minett/img/slider/1.jpg" alt="">
<img src="http://www.entiri.com/minett/img/slider/2.jpg" alt="" style="">
<img src="http://www.entiri.com/minett/img/slider/3.jpg" alt="" style="">
</div>
<div class="item">
<img src="http://www.entiri.com/minett/img/slider/1.jpg" alt="">
<img src="http://www.entiri.com/minett/img/slider/2.jpg" alt="" style="">
<img src="http://www.entiri.com/minett/img/slider/3.jpg" alt="" style="">
</div>
<div class="item">
<img src="http://www.entiri.com/minett/img/slider/1.jpg" alt="">
<img src="http://www.entiri.com/minett/img/slider/2.jpg" alt="" style="">
<img src="http://www.entiri.com/minett/img/slider/3.jpg" alt="" style="">
</div>

但这不会达到我想要的效果，因为它会同时旋转所有三个元素，而不是每个元素拍摄一张图像。

任何有关演练或教程的建议、建议或链接将不胜感激。

干杯

Answer 1

这是对我有帮助的链接

Twitter Bootstrap 101: The Carousel