Bootstrap Product slider

Tuesday, July 8, 2014

I have just tried to make a Bootstrap carousal for Wordpress theme. I am able to it easily for the image slider but I am not able to make the thumbnail slider work.

Constraint making the Issues: 1. only 4 divs inside an item div should be made. i.e, Each 4 divs of thumbnails should be separated by item div 2. Active class only on item div of the first 4 thumbnails.

The second issue was their for image too but i fixed it but not in this case because I need to work on 2 issues together which is making it complex.

<div class="clearfix">
<div id="thumbcarousel" class="carousel slide" data-interval="false">
<div class="carousel-inner">
<div class="item active">
<div data-target="#carousel" data-slide-to="0" class="thumb"><img src="img/doubleRound/all-parts.JPG" width="100" height="100"></div>
<div data-target="#carousel" data-slide-to="1" class="thumb"><img src="img/doubleRound/top.JPG" width="100" height="100"></div>
<div data-target="#carousel" data-slide-to="2" class="thumb"><img src="img/doubleRound/bottom.JPG" width="100" height="100"></div>
<div data-target="#carousel" data-slide-to="3" class="thumb"><img src="img/doubleRound/front.JPG" width="100" height="100"></div>
</div><!-- /item -->
<div class="item">
<div data-target="#carousel" data-slide-to="4" class="thumb"><img src="img/doubleRound/front_side.JPG" width="100" height="100"></div>
<div data-target="#carousel" data-slide-to="5" class="thumb"><img src="img/doubleRound/front.JPG" width="100" height="100"></div>
<div data-target="#carousel" data-slide-to="6" class="thumb"><img src="img/doubleRound/all-parts.JPG" width="100" height="100"></div>
<div data-target="#carousel" data-slide-to="7" class="thumb"><img src="img/doubleRound/all-parts.JPG" width="100" height="100"></div>
</div><!-- /item -->
</div><!-- /carousel-inner -->
<a class="left carousel-control" href="" role="button" data-slide="prev">
<span class="glyphicon glyphicon-chevron-left"></span>
<a class="right carousel-control" href="" role="button" data-slide="next">
<span class="glyphicon glyphicon-chevron-right"></span>
</div> <!-- /thumbcarousel -->
</div><!-- /clearfix -->