"Carousel Reviews with Rating - three items"
Bootstrap 3.3.0 Snippet by krystyna93

<link href="//maxcdn.bootstrapcdn.com/bootstrap/3.3.0/css/bootstrap.min.css" rel="stylesheet" id="bootstrap-css"> <script src="//maxcdn.bootstrapcdn.com/bootstrap/3.3.0/js/bootstrap.min.js"></script> <script src="//code.jquery.com/jquery-1.11.1.min.js"></script> <!------ Include the above in your HEAD tag ----------> <div class="container"> <div class="row"> <h2>Carousel Reviews</h2> </div> </div> <div class="carousel-reviews broun-block"> <div class="container"> <div class="row"> <div id="carousel-reviews" class="carousel slide" data-ride="carousel"> <div class="carousel-inner"> <div class="item active"> <div class="col-md-4 col-sm-6"> <div class="block-text rel zmin"> <a title="" href="#">Hercules</a> <div class="mark">My rating: <span class="rating-input"><span data-value="0" class="glyphicon glyphicon-star"></span><span data-value="1" class="glyphicon glyphicon-star"></span><span data-value="2" class="glyphicon glyphicon-star"></span><span data-value="3" class="glyphicon glyphicon-star"></span><span data-value="4" class="glyphicon glyphicon-star-empty"></span><span data-value="5" class="glyphicon glyphicon-star-empty"></span> </span></div> <p>Never before has there been a good film portrayal of ancient Greece's favourite myth. So why would Hollywood start now? This latest attempt at bringing the son of Zeus to the big screen is brought to us by X-Men: The last Stand director Brett Ratner. If the name of the director wasn't enough to dissuade ...</p> <ins class="ab zmin sprite sprite-i-triangle block"></ins> </div> </div> <div class="col-md-4 col-sm-6 hidden-xs"> <div class="block-text rel zmin"> <a title="" href="#">The Purge: Anarchy</a> <div class="mark">My rating: <span class="rating-input"><span data-value="0" class="glyphicon glyphicon-star"></span><span data-value="1" class="glyphicon glyphicon-star"></span><span data-value="2" class="glyphicon glyphicon-star-empty"></span><span data-value="3" class="glyphicon glyphicon-star-empty"></span><span data-value="4" class="glyphicon glyphicon-star-empty"></span><span data-value="5" class="glyphicon glyphicon-star-empty"></span> </span></div> <p>The 2013 movie "The Purge" left a bad taste in all of our mouths as nothing more than a pseudo-slasher with a hamfisted plot, poor pacing, and a desperate attempt at "horror." Upon seeing the first trailer for "The Purge: Anarchy," my first and most immediate thought was "we really don't need another one of these." </p> <ins class="ab zmin sprite sprite-i-triangle block"></ins> </div> </div> <div class="col-md-4 col-sm-6 hidden-sm hidden-xs"> <div class="block-text rel zmin"> <a title="" href="#">Planes: Fire & Rescue</a> <div class="mark">My rating: <span class="rating-input"><span data-value="0" class="glyphicon glyphicon-star"></span><span data-value="1" class="glyphicon glyphicon-star"></span><span data-value="2" class="glyphicon glyphicon-star"></span><span data-value="3" class="glyphicon glyphicon-star"></span><span data-value="4" class="glyphicon glyphicon-star"></span><span data-value="5" class="glyphicon glyphicon-star"></span> </span></div> <p>What a funny and entertaining film! I did not know what to expect, this is the fourth film in this vehicle's universe with the two Cars movies and then the first Planes movie. I was wondering if maybe Disney pushed it a little bit. However, Planes: Fire and Rescue is an entertaining film that is a fantastic sequel in this magical franchise. </p> <ins class="ab zmin sprite sprite-i-triangle block"></ins> </div> </div> </div> <div class="item"> <div class="col-md-4 col-sm-6"> <div class="block-text rel zmin"> <a title="" href="#">Hercules</a> <div class="mark">My rating: <span class="rating-input"><span data-value="0" class="glyphicon glyphicon-star"></span><span data-value="1" class="glyphicon glyphicon-star"></span><span data-value="2" class="glyphicon glyphicon-star"></span><span data-value="3" class="glyphicon glyphicon-star"></span><span data-value="4" class="glyphicon glyphicon-star-empty"></span><span data-value="5" class="glyphicon glyphicon-star-empty"></span> </span></div> <p>Never before has there been a good film portrayal of ancient Greece's favourite myth. So why would Hollywood start now? This latest attempt at bringing the son of Zeus to the big screen is brought to us by X-Men: The last Stand director Brett Ratner. If the name of the director wasn't enough to dissuade ...</p> <ins class="ab zmin sprite sprite-i-triangle block"></ins> </div> </div> <div class="col-md-4 col-sm-6 hidden-xs"> <div class="block-text rel zmin"> <a title="" href="#">The Purge: Anarchy</a> <div class="mark">My rating: <span class="rating-input"><span data-value="0" class="glyphicon glyphicon-star"></span><span data-value="1" class="glyphicon glyphicon-star"></span><span data-value="2" class="glyphicon glyphicon-star-empty"></span><span data-value="3" class="glyphicon glyphicon-star-empty"></span><span data-value="4" class="glyphicon glyphicon-star-empty"></span><span data-value="5" class="glyphicon glyphicon-star-empty"></span> </span></div> <p>The 2013 movie "The Purge" left a bad taste in all of our mouths as nothing more than a pseudo-slasher with a hamfisted plot, poor pacing, and a desperate attempt at "horror." Upon seeing the first trailer for "The Purge: Anarchy," my first and most immediate thought was "we really don't need another one of these." </p> <ins class="ab zmin sprite sprite-i-triangle block"></ins> </div> </div> <div class="col-md-4 col-sm-6 hidden-sm hidden-xs"> <div class="block-text rel zmin"> <a title="" href="#">Planes: Fire & Rescue</a> <div class="mark">My rating: <span class="rating-input"><span data-value="0" class="glyphicon glyphicon-star"></span><span data-value="1" class="glyphicon glyphicon-star"></span><span data-value="2" class="glyphicon glyphicon-star"></span><span data-value="3" class="glyphicon glyphicon-star"></span><span data-value="4" class="glyphicon glyphicon-star"></span><span data-value="5" class="glyphicon glyphicon-star"></span> </span></div> <p>What a funny and entertaining film! I did not know what to expect, this is the fourth film in this vehicle's universe with the two Cars movies and then the first Planes movie. I was wondering if maybe Disney pushed it a little bit. However, Planes: Fire and Rescue is an entertaining film that is a fantastic sequel in this magical franchise. </p> <ins class="ab zmin sprite sprite-i-triangle block"></ins> </div> </div> </div> <div class="item"> <div class="col-md-4 col-sm-6"> <div class="block-text rel zmin"> <a title="" href="#">Hercules</a> <div class="mark">My rating: <span class="rating-input"><span data-value="0" class="glyphicon glyphicon-star"></span><span data-value="1" class="glyphicon glyphicon-star"></span><span data-value="2" class="glyphicon glyphicon-star"></span><span data-value="3" class="glyphicon glyphicon-star"></span><span data-value="4" class="glyphicon glyphicon-star-empty"></span><span data-value="5" class="glyphicon glyphicon-star-empty"></span> </span></div> <p>Never before has there been a good film portrayal of ancient Greece's favourite myth. So why would Hollywood start now? This latest attempt at bringing the son of Zeus to the big screen is brought to us by X-Men: The last Stand director Brett Ratner. If the name of the director wasn't enough to dissuade ...</p> <ins class="ab zmin sprite sprite-i-triangle block"></ins> </div> </div> <div class="col-md-4 col-sm-6 hidden-xs"> <div class="block-text rel zmin"> <a title="" href="#">The Purge: Anarchy</a> <div class="mark">My rating: <span class="rating-input"><span data-value="0" class="glyphicon glyphicon-star"></span><span data-value="1" class="glyphicon glyphicon-star"></span><span data-value="2" class="glyphicon glyphicon-star-empty"></span><span data-value="3" class="glyphicon glyphicon-star-empty"></span><span data-value="4" class="glyphicon glyphicon-star-empty"></span><span data-value="5" class="glyphicon glyphicon-star-empty"></span> </span></div> <p>The 2013 movie "The Purge" left a bad taste in all of our mouths as nothing more than a pseudo-slasher with a hamfisted plot, poor pacing, and a desperate attempt at "horror." Upon seeing the first trailer for "The Purge: Anarchy," my first and most immediate thought was "we really don't need another one of these." </p> <ins class="ab zmin sprite sprite-i-triangle block"></ins> </div> </div> <div class="col-md-4 col-sm-6 hidden-sm hidden-xs"> <div class="block-text rel zmin"> <a title="" href="#">Planes: Fire & Rescue</a> <div class="mark">My rating: <span class="rating-input"><span data-value="0" class="glyphicon glyphicon-star"></span><span data-value="1" class="glyphicon glyphicon-star"></span><span data-value="2" class="glyphicon glyphicon-star"></span><span data-value="3" class="glyphicon glyphicon-star"></span><span data-value="4" class="glyphicon glyphicon-star"></span><span data-value="5" class="glyphicon glyphicon-star"></span> </span></div> <p>What a funny and entertaining film! I did not know what to expect, this is the fourth film in this vehicle's universe with the two Cars movies and then the first Planes movie. I was wondering if maybe Disney pushed it a little bit. However, Planes: Fire and Rescue is an entertaining film that is a fantastic sequel in this magical franchise. </p> <ins class="ab zmin sprite sprite-i-triangle block"></ins> </div> </div> </div> </div> <a class="left carousel-control" href="#carousel-reviews" role="button" data-slide="prev"> <span class="glyphicon glyphicon-chevron-left"></span> </a> <a class="right carousel-control" href="#carousel-reviews" role="button" data-slide="next"> <span class="glyphicon glyphicon-chevron-right"></span> </a> </div> </div> </div> </div>
.carousel-control.left,.carousel-control.right {background:none; width:25px;} .carousel-control.left {left:-10px;} .carousel-control.right {right:-10px;} .broun-block { padding-bottom: 34px; } .block-text { background-color: #fff; color: #626262; font-size: 14px; margin-top: 27px; padding: 15px 18px; } .block-text a { color: #7d4702; font-size: 25px; font-weight: bold; line-height: 21px; text-decoration: none; text-shadow: 0 1px 2px rgba(0, 0, 0, 0.3); } .mark { padding: 12px 0;background:none; } .block-text p { color: #585858; font-family: Georgia; font-style: italic; line-height: 20px; } .block-text ins { bottom: -44px; left: 50%; margin-left: -60px; } .block { display: block; } .zmin { z-index: 1; } .ab { position: absolute; } .person-text { padding: 10px 0 0; text-align: center; z-index: 2; } .person-text a { color: #ffcc00; display: block; font-size: 14px; margin-top: 3px; text-decoration: underline; } .person-text i { color: #fff; font-family: Georgia; font-size: 13px; } .rel { position: relative; }

Related: See More


Questions / Comments: