<div class="tcb-product-slider">
<div class="container">
<div id="carousel-example-generic" class="carousel slide" data-ride="carousel">
<!-- Wrapper for slides -->
<div class="carousel-inner" role="listbox">
<div class="item active">
<div class="row">
<div class="col-xs-6 col-sm-3">
<div class="tcb-product-item">
<div class="tcb-product-photo">
<a href="#"><img src="https://i.imgur.com/Z7eqMnj.jpg" class="img-responsive" alt="a" /></a>
</div>
<div class="tcb-product-info">
<div class="tcb-product-title">
<h4><a href="#">Olympus Photo Camera </a></h4></div>
<div class="tcb-product-rating">
<i class="active glyphicon glyphicon-star"></i><i class="active glyphicon glyphicon-star"></i><i class="active glyphicon glyphicon-star"></i><i class="active glyphicon glyphicon-star"></i><i class="glyphicon glyphicon-star"></i>
<a href="#">(4,585 ratings)</a>
</div>
<div class="tcb-hline"></div>
<div class="tcb-product-price">
$ 495.00 (17% off)
</div>
</div>
</div>
</div>
<div class="col-xs-6 col-sm-3">
<div class="tcb-product-item">
<div class="tcb-product-photo">
<a href="#"><img src="https://i.imgur.com/fCrZot6.jpg" class="img-responsive" alt="a" /></a>
</div>
<div class="tcb-product-info">
<div class="tcb-product-title">
<h4><a href="#">Coca Cola Bottle</a></h4></div>
<div class="tcb-product-rating">
<i class="active glyphicon glyphicon-star"></i><i class="active glyphicon glyphicon-star"></i><i class="active glyphicon glyphicon-star"></i><i class="glyphicon glyphicon-star"></i><i class="glyphicon glyphicon-star"></i>
<a href="#">(245 ratings)</a>
</div>
<div class="tcb-hline"></div>
<div class="tcb-product-price">
$ 99.00 (21% off)
</div>
</div>
</div>
</div>
<div class="col-xs-6 col-sm-3">
<div class="tcb-product-item">
<div class="tcb-product-photo">
<a href="#"><img src="https://i.imgur.com/kTmJp8W.jpg" class="img-responsive" alt="a" /></a>
</div>
<div class="tcb-product-info">
<div class="tcb-product-title">
<h4><a href="#">Jewel from Italy</a></h4></div>
<div class="tcb-product-rating">
<i class="active glyphicon glyphicon-star"></i><i class="active glyphicon glyphicon-star"></i><i class="glyphicon glyphicon-star"></i><i class="glyphicon glyphicon-star"></i><i class="glyphicon glyphicon-star"></i>
<a href="#">(345 ratings)</a>
</div>
<div class="tcb-hline"></div>
<div class="tcb-product-price">
$ 999.00 (33% off)
</div>
</div>
</div>
</div>
<div class="col-xs-6 col-sm-3">
<div class="tcb-product-item">
<div class="tcb-product-photo">
<a href="#"><img src="https://i.imgur.com/sMwmKmh.jpg" class="img-responsive" alt="a" /></a>
</div>
<div class="tcb-product-info">
<div class="tcb-product-title">
<h4><a href="#">White Pepper</a></h4></div>
<div class="tcb-product-rating">
<i class="active glyphicon glyphicon-star"></i><i class="glyphicon glyphicon-star"></i><i class="glyphicon glyphicon-star"></i><i class="glyphicon glyphicon-star"></i><i class="glyphicon glyphicon-star"></i>
<a href="#">(45 ratings)</a>
</div>
<div class="tcb-hline"></div>
<div class="tcb-product-price">
$ 199.00 (37% off)
</div>
</div>
</div>
</div>
</div>
</div>
<div class="item">
<div class="row">
<div class="col-xs-6 col-sm-3">
<div class="tcb-product-item">
<div class="tcb-product-photo">
<a href="#"><img src="https://i.imgur.com/RuPhz54.jpg" class="img-responsive" alt="a" /></a>
</div>
<div class="tcb-product-info">
<div class="tcb-product-title">
<h4><a href="#">Belt Improted From Japan</a></h4></div>
<div class="tcb-product-rating">
<i class="active glyphicon glyphicon-star"></i><i class="active glyphicon glyphicon-star"></i><i class="active glyphicon glyphicon-star"></i><i class="glyphicon glyphicon-star"></i><i class="glyphicon glyphicon-star"></i>
<a href="#">(2,125 ratings)</a>
</div>
<div class="tcb-hline"></div>
<div class="tcb-product-price">
$ 49.00 (40% off)
</div>
</div>
</div>
</div>
<div class="col-xs-6 col-sm-3">
<div class="tcb-product-item">
<div class="tcb-product-photo">
<a href="#"><img src="https://i.imgur.com/e4ARfEJ.jpg" class="img-responsive" alt="a" /></a>
</div>
<div class="tcb-product-info">
<div class="tcb-product-title">
<h4><a href="#">Tomato</a></h4></div>
<div class="tcb-product-rating">
<i class="active glyphicon glyphicon-star"></i><i class="active glyphicon glyphicon-star"></i><i class="glyphicon glyphicon-star"></i><i class="glyphicon glyphicon-star"></i><i class="glyphicon glyphicon-star"></i>
<a href="#">(5 ratings)</a>
</div>
<div class="tcb-hline"></div>
<div class="tcb-product-price">
$ 9.00
</div>
</div>
</div>
</div>
<div class="col-xs-6 col-sm-3">
<div class="tcb-product-item">
<div class="tcb-product-photo">
<a href="#"><img src="https://i.imgur.com/ZlchtwK.jpg" class="img-responsive" alt="a" /></a>
</div>
<div class="tcb-product-info">
<div class="tcb-product-title">
<h4><a href="#">Tape Line</a></h4></div>
<div class="tcb-product-rating">
<i class="active glyphicon glyphicon-star"></i><i class="active glyphicon glyphicon-star"></i><i class="active glyphicon glyphicon-star"></i><i class="glyphicon glyphicon-star"></i><i class="glyphicon glyphicon-star"></i>
<a href="#">(215 ratings)</a>
</div>
<div class="tcb-hline"></div>
<div class="tcb-product-price">
$ 39.00 (15% off)
</div>
</div>
</div>
</div>
<div class="col-xs-6 col-sm-3">
<div class="tcb-product-item">
<div class="tcb-product-photo">
<a href="#"><img src="https://i.imgur.com/GRPrGN6.jpg" class="img-responsive" alt="a" /></a>
</div>
<div class="tcb-product-info">
<div class="tcb-product-title">
<h4><a href="#">Test Glasses For Lab</a></h4></div>
<div class="tcb-product-rating">
<i class="active glyphicon glyphicon-star"></i><i class="active glyphicon glyphicon-star"></i><i class="active glyphicon glyphicon-star"></i><i class="active glyphicon glyphicon-star"></i><i class="active glyphicon glyphicon-star"></i>
<a href="#">(10,345 ratings)</a>
</div>
<div class="tcb-hline"></div>
<div class="tcb-product-price">
$ 11,999.00 (37% off)
</div>
</div>
</div>
</div>
</div>
</div>
<div class="item">
<div class="row">
<div class="col-xs-6 col-sm-3">
<div class="tcb-product-item">
<div class="tcb-product-photo">
<a href="#"><img src="https://i.imgur.com/Ds5mtGy.jpg" class="img-responsive" alt="a" /></a>
</div>
<div class="tcb-product-info">
<div class="tcb-product-title">
<h4><a href="#">Jewel From India</a></h4></div>
<div class="tcb-product-rating">
<i class="active glyphicon glyphicon-star"></i><i class="active glyphicon glyphicon-star"></i><i class="glyphicon glyphicon-star"></i><i class="glyphicon glyphicon-star"></i><i class="glyphicon glyphicon-star"></i>
<a href="#">(945 ratings)</a>
</div>
<div class="tcb-hline"></div>
<div class="tcb-product-price">
$ 299.00 (54% off)
</div>
</div>
</div>
</div>
<div class="col-xs-6 col-sm-3">
<div class="tcb-product-item">
<div class="tcb-product-photo">
<a href="#"><img src="https://i.imgur.com/e7IYyso.jpg" class="img-responsive" alt="a" /></a>
</div>
<div class="tcb-product-info">
<div class="tcb-product-title">
<h4><a href="#">Red Pepper</a></h4></div>
<div class="tcb-product-rating">
<i class="active glyphicon glyphicon-star"></i><i class="glyphicon glyphicon-star"></i><i class="glyphicon glyphicon-star"></i><i class="glyphicon glyphicon-star"></i><i class="glyphicon glyphicon-star"></i>
<a href="#">(15 ratings)</a>
</div>
<div class="tcb-hline"></div>
<div class="tcb-product-price">
$ 5.00 (11% off)
</div>
</div>
</div>
</div>
<div class="col-xs-6 col-sm-3">
<div class="tcb-product-item">
<div class="tcb-product-photo">
<a href="#"><img src="https://i.imgur.com/vuRE1W6.jpg" class="img-responsive" alt="a" /></a>
</div>
<div class="tcb-product-info">
<div class="tcb-product-title">
<h4><a href="#">Pro Cell Batteries </a></h4></div>
<div class="tcb-product-rating">
<i class="active glyphicon glyphicon-star"></i><i class="active glyphicon glyphicon-star"></i><i class="active glyphicon glyphicon-star"></i><i class="active glyphicon glyphicon-star"></i><i class="glyphicon glyphicon-star"></i>
<a href="#">(745 ratings)</a>
</div>
<div class="tcb-hline"></div>
<div class="tcb-product-price">
$ 19.00 (63% off)
</div>
</div>
</div>
</div>
<div class="col-xs-6 col-sm-3">
<div class="tcb-product-item">
<div class="tcb-product-photo">
<a href="#"><img src="https://i.imgur.com/UibcRla.jpg" class="img-responsive" alt="a" /></a>
</div>
<div class="tcb-product-info">
<div class="tcb-product-title">
<h4><a href="#">Eye Glasses </a></h4></div>
<div class="tcb-product-rating">
<i class="active glyphicon glyphicon-star"></i><i class="active glyphicon glyphicon-star"></i><i class="active glyphicon glyphicon-star"></i><i class="glyphicon glyphicon-star"></i><i class="glyphicon glyphicon-star"></i>
<a href="#">(145 ratings)</a>
</div>
<div class="tcb-hline"></div>
<div class="tcb-product-price">
$ 129.00 (29% off)
</div>
</div>
</div>
</div>
</div>
</div>
</div>
<!-- Controls -->
<a class="left carousel-control" href="#carousel-example-generic" role="button" data-slide="prev">
<span class="glyphicon glyphicon-chevron-left" aria-hidden="true"></span>
<span class="sr-only">Previous</span>
</a>
<a class="right carousel-control" href="#carousel-example-generic" role="button" data-slide="next">
<span class="glyphicon glyphicon-chevron-right" aria-hidden="true"></span>
<span class="sr-only">Next</span>
</a>
</div>
</div>
</div>
<section class="details">
<h1>Bootstrap 3 Carousel Slider Explained</h1>
<div class="back-link"><a href="http://thecodeblock.com/beautiful-thumbnail-product-slider-in-bootstrap">
<svg version="1.1" id="Capa_1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px" width="20px" height="20px" viewBox="0 0 400.004 400.004" style="enable-background:new 0 0 400.004 400.004;" fill="rgb(234,234,234)" xml:space="preserve">
<g>
<path d="M382.688,182.686H59.116l77.209-77.214c6.764-6.76,6.764-17.726,0-24.485c-6.764-6.764-17.73-6.764-24.484,0L5.073,187.757
c-6.764,6.76-6.764,17.727,0,24.485l106.768,106.775c3.381,3.383,7.812,5.072,12.242,5.072c4.43,0,8.861-1.689,12.242-5.072
c6.764-6.76,6.764-17.726,0-24.484l-77.209-77.218h323.572c9.562,0,17.316-7.753,17.316-17.315
C400.004,190.438,392.251,182.686,382.688,182.686z"></path>
</g>
</svg>
Back to article</a></div>
</section>
.tcb-product-slider {
background: #333;
background-image: url(https://unsplash.it/1240/530?image=721);
background-size: cover;
background-repeat: no-repeat;
padding: 100px 0;
}
.tcb-product-slider .carousel-control {
width: 5%;
}
.tcb-product-item a {
color: #147196;
}
.tcb-product-item a:hover {
text-decoration: none;
}
.tcb-product-item .tcb-hline {
margin: 10px 0;
height: 1px;
background: #ccc;
}
@media all and (max-width: 768px) {
.tcb-product-item {
margin-bottom: 30px;
}
}
.tcb-product-photo {
text-align: center;
height: 180px;
background: #fff;
}
.tcb-product-photo img {
height: 100%;
display: inline-block;
}
.tcb-product-info {
background: #f0f0f0;
padding: 15px;
}
.tcb-product-title h4 {
margin-top: 0;
white-space: nowrap;
text-overflow: ellipsis;
overflow: hidden;
}
.tcb-product-rating {
color: #acacac;
}
.tcb-product-rating .active {
color: #FFB500;
}
.tcb-product-price {
color: firebrick;
font-size: 18px;
}
.details {
margin: 50px 0; }
.details h1 {
font-size: 32px;
text-align: center;
margin-bottom: 3px; }
.details .back-link {
text-align: center; }
.details .back-link a {
display: inline-block;
margin: 20px 0;
padding: 15px 30px;
background: #333;
color: #fff;
border-radius: 24px; }
.details .back-link a svg {
margin-right: 10px;
vertical-align: text-top;
display: inline-block; }
