Show next and previous image in Twitter Bootstrap Carousel

Question

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

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.

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.

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.

Cheers

Answer 1

This is the link that helped me

Twitter Bootstrap 101: The Carousel