在Twitter Bootstrap Carousel中显示下一个和上一个图像 [英] Show next and previous image in Twitter Bootstrap Carousel

问题描述

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

I’m searching for a way to display the next and previous slideshow image within the Twitter Bootstrap Carousel.

默认情况下，它仅显示当前图像，如果我删除display:none css属性，则轮播中的每个项目都位于彼此下方.我尝试过使用CSS，但是还没用.

As per default it just show the current image and if I remove the display:none css property it has every item in the carousel below each other. I’ve tried to play with the CSS but haven’t got it to work.

该想法是在中间显示当前幻灯片图像，然后在下一个和上一个图像中显示不透明，不一定是可单击的.

The idea is to display the current slideshow image in the middle and then the next and previous image with opacity, not necessarily clickable.

我尝试了不同的幻灯片和旋转木马，但似乎找不到满足这些要求的人，而其中一些接近的人将无法适应Bootstrap提供的响应式设计.

I’ve tried different slideshows and carousels but can’t seem to find anyone which satisfies these requirements and some of those who come close will not adapt to the responsive design that Bootstrap provides.

通常，当我在轮播中使用多个项目时，我只会将> div中的图像，例如:

Normally when I’m using the carousel with multiple items, I just group e.g. images within the <div class="item"> div like:

<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>

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

But this will not do what I want because it rotates all three items at the time and not take one image each.

对于任何演练或教程的任何建议，建议或链接将不胜感激.

Any suggestion, advice, or link for some walk-through or tutorial will be very much appreciated.

欢呼

推荐答案

这是对我有帮助的链接

Twitter Bootstrap 101:旋转木马

这篇关于在Twitter Bootstrap Carousel中显示下一个和上一个图像的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！