"Article carousel with images indicators"
Bootstrap 3.0.0 Snippet by Mohamed Tahhan

<div class="carousel slide article-slide" id="article-photo-carousel"> <!-- Wrapper for slides --> <div class="carousel-inner cont-slider"> <div class="item active"> <img alt="" title="" src="http://placehold.it/600x400"> </div> <div class="item"> <img alt="" title="" src="http://placehold.it/600x400"> </div> <div class="item"> <img alt="" title="" src="http://placehold.it/600x400"> </div> <div class="item"> <img alt="" title="" src="http://placehold.it/600x400"> </div> </div> <!-- Indicators --> <ol class="carousel-indicators"> <li class="active" data-slide-to="0" data-target="#article-photo-carousel"> <img alt="" src="http://placehold.it/250x180"> </li> <li class="" data-slide-to="1" data-target="#article-photo-carousel"> <img alt="" src="http://placehold.it/250x180"> </li> <li class="" data-slide-to="2" data-target="#article-photo-carousel"> <img alt="" src="http://placehold.it/250x180"> </li> <li class="" data-slide-to="3" data-target="#article-photo-carousel"> <img alt="" src="http://placehold.it/250x180"> </li> </ol> </div>
/* Main carousel style */ .carousel { width: 600px; } /* Indicators list style */ .article-slide .carousel-indicators { bottom: 0; left: 0; margin-left: 5px; width: 100%; } /* Indicators list style */ .article-slide .carousel-indicators li { border: medium none; border-radius: 0; float: left; height: 54px; margin-bottom: 5px; margin-left: 0; margin-right: 5px !important; margin-top: 0; width: 100px; } /* Indicators images style */ .article-slide .carousel-indicators img { border: 2px solid #FFFFFF; float: left; height: 54px; left: 0; width: 100px; } /* Indicators active image style */ .article-slide .carousel-indicators .active img { border: 2px solid #428BCA; opacity: 0.7; }
// Stop carousel $('.carousel').carousel({ interval: false });

Similar snippets: See More


Comments:

comments powered by Disqus