在Twitter Bootstrap Carousel中显示下一张和上一张图片

时间:2013-04-21 12:23:12

标签: javascript jquery css twitter-bootstrap carousel

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

根据默认情况,它只显示当前图像,如果我删除display:none css属性,它将旋转木马中的每个项目都放在彼此之下。我试过玩CSS但没有让它起作用。

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

我尝试过不同的幻灯片和旋转木马,但似乎找不到满足这些要求的人,而且一些接近的人不会适应Bootstrap提供的响应式设计。

通常情况下,当我使用带有多个项目的轮播时,我只是分组,例如<div class="item"&gt;中的图片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>

但这不会做我想要的,因为它当时旋转所有三个项目而不是每个都拍摄一个图像。

对于某些演练或教程的任何建议,建议或链接将非常感激。

干杯

1 个答案:

答案 0 :(得分:0)

这是帮助我的链接

Twitter Bootstrap 101: The Carousel