After researching various examples, I noticed that most of them only display one Item at a time. I want to have multiple active items displayed using thumbnails, but the examples I found show that the Item itself contains multiple thumbnails inside of it. When I click on 'Next' or 'Previous' buttons, the 'active' class is set to another item and all of the contents are replaced.
My goal is to display multiple active Items inside the 'carousel-inner' class. I have managed to do this, but unfortunately, the 'Next' and 'Previous' buttons have stopped working. Below is the workaround I have tried so far. For example, I am aiming to move two active Items per 'Next' or 'Previous' button click. Any suggestions?
<div id="myCarousel" class="carousel slide">
<div class="carousel-inner">
<div class="item active">
<div class="row-fluid">
<div class="span6">
<a href="#x" class="thumbnail">
<img src="http://ucsdnews.ucsd.edu/graphics/images/2009/11-09OceanRobots01.jpg" alt="Image" style="max-width: 100%;" /></a>
</div>
</div>
</div>
<div class="item active">
<div class="row-fluid">
<div class="span6">
<a href="#x" class="thumbnail">
<img src="http://www.nmsfocean.org/files/windfarm-250x250.jpg" alt="Image" style="max-width: 100%;" /></a>
</div>
</div>
</div>
<div class="item">
<div class="row-fluid">
<div class="span6">
<a href="#x" class="thumbnail">
<img src="http://www.notempire.com/images/uploads/Conserve_Our_Oceans-2.jpg" alt="Image" style="max-width: 100%;" /></a>
</div>
</div>
</div>
<div class="item">
<div class="row-fluid">
<div class="span6">
<a href="#x" class="thumbnail">
<img src="http://www.northcountrypublicradio.org/news/images/blacksmokervent_250.jpg" alt="Image" style="max-width: 100%;" /></a>
</div>
</div>
</div>
<div class="item">
<div class="row-fluid">
<div class="span6">
<a href="#x" class="thumbnail">
<img src="https://lh6.googleusercontent.com/-jTLcTU1RvZc/Ts11y1haQqE/AAAAAAAAALk/xYJoRFK-ibw/s250-c-k-no/OceanSunfish" alt="Image" style="max-width: 100%;" /></a>
</div>
</div>
</div>
<div class="item">
<div class="row-fluid">
<div class="span6">
<a href="#x" class="thumbnail">
<img src="http://tcktcktck.org/wp-content/uploads/2011/09/ocean-heat.jpg" alt="Image" style="max-width: 100%;" /></a>
</div>
</div>
</div>
</div>
<!--/carousel-inner-->
<a class="left carousel-control" href="#myCarousel" data-slide="prev">‹</a>
<a class="right carousel-control" href="#myCarousel" data-slide="next">›</a>
</div>
I am currently working on an Angular JS project, so any Angular solution would be greatly appreciated. Thank you.