Today, We want to share with you bootstrap product slider responsive.In this post we will show you ecommerce product slider bootstrap, hear for multiple item product carousel bootstrap we will give you demo and example for implement.In this post, we will learn about bootstrap image slider with thumbnail with an example.
bootstrap 4 product slider with thumbnail slider
here you can learn to all source code for “Bootstrap 4 Best selling products with carousel slider Example”.
Beautiful Thumbnail Product Slider In Bootstrap
Added External libs
https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/css/bootstrap.min.css https://cdnjs.cloudflare.com/ajax/libs/jquery/2.1.3/jquery.min.js https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/js/bootstrap.min.js
HTML Code
<div class="indiabix-item-slider">
<div class="container">
<div id="carousel-example-generic" class="carousel slide" data-ride="carousel">
<div class="carousel-inner" role="listbox">
<div class="item active">
<div class="row">
<div class="col-xs-6 col-sm-3">
<div class="indiabix-item-item">
<div class="indiabix-item-photo">
<a href="#"><img src="https://i.imgur.com/Z7eqMnj.jpg" class="img-responsive" alt="a" /></a>
</div>
<div class="indiabix-item-info">
<div class="indiabix-item-title">
<h4><a href="#">Olympus Photo Camera </a></h4></div>
<div class="indiabix-item-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 reviews)</a>
</div>
<div class="indiabix-hline"></div>
<div class="indiabix-item-price">
$ 495.00 (17% off)
</div>
</div>
</div>
</div>
<div class="col-xs-6 col-sm-3">
<div class="indiabix-item-item">
<div class="indiabix-item-photo">
<a href="#"><img src="https://i.imgur.com/fCrZot6.jpg" class="img-responsive" alt="a" /></a>
</div>
<div class="indiabix-item-info">
<div class="indiabix-item-title">
<h4><a href="#">Coca Cola Bottle</a></h4></div>
<div class="indiabix-item-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 reviews)</a>
</div>
<div class="indiabix-hline"></div>
<div class="indiabix-item-price">
$ 99.00 (21% off)
</div>
</div>
</div>
</div>
<div class="col-xs-6 col-sm-3">
<div class="indiabix-item-item">
<div class="indiabix-item-photo">
<a href="#"><img src="https://i.imgur.com/kTmJp8W.jpg" class="img-responsive" alt="a" /></a>
</div>
<div class="indiabix-item-info">
<div class="indiabix-item-title">
<h4><a href="#">Jewel from Italy</a></h4></div>
<div class="indiabix-item-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 reviews)</a>
</div>
<div class="indiabix-hline"></div>
<div class="indiabix-item-price">
$ 999.00 (33% off)
</div>
</div>
</div>
</div>
<div class="col-xs-6 col-sm-3">
<div class="indiabix-item-item">
<div class="indiabix-item-photo">
<a href="#"><img src="https://i.imgur.com/sMwmKmh.jpg" class="img-responsive" alt="a" /></a>
</div>
<div class="indiabix-item-info">
<div class="indiabix-item-title">
<h4><a href="#">White Pepper</a></h4></div>
<div class="indiabix-item-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 reviews)</a>
</div>
<div class="indiabix-hline"></div>
<div class="indiabix-item-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="indiabix-item-item">
<div class="indiabix-item-photo">
<a href="#"><img src="https://i.imgur.com/RuPhz54.jpg" class="img-responsive" alt="a" /></a>
</div>
<div class="indiabix-item-info">
<div class="indiabix-item-title">
<h4><a href="#">Belt Improted From Japan</a></h4></div>
<div class="indiabix-item-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 reviews)</a>
</div>
<div class="indiabix-hline"></div>
<div class="indiabix-item-price">
$ 49.00 (40% off)
</div>
</div>
</div>
</div>
<div class="col-xs-6 col-sm-3">
<div class="indiabix-item-item">
<div class="indiabix-item-photo">
<a href="#"><img src="https://i.imgur.com/e4ARfEJ.jpg" class="img-responsive" alt="a" /></a>
</div>
<div class="indiabix-item-info">
<div class="indiabix-item-title">
<h4><a href="#">Tomato</a></h4></div>
<div class="indiabix-item-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 reviews)</a>
</div>
<div class="indiabix-hline"></div>
<div class="indiabix-item-price">
$ 9.00
</div>
</div>
</div>
</div>
<div class="col-xs-6 col-sm-3">
<div class="indiabix-item-item">
<div class="indiabix-item-photo">
<a href="#"><img src="https://i.imgur.com/ZlchtwK.jpg" class="img-responsive" alt="a" /></a>
</div>
<div class="indiabix-item-info">
<div class="indiabix-item-title">
<h4><a href="#">Tape Line</a></h4></div>
<div class="indiabix-item-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 reviews)</a>
</div>
<div class="indiabix-hline"></div>
<div class="indiabix-item-price">
$ 39.00 (15% off)
</div>
</div>
</div>
</div>
<div class="col-xs-6 col-sm-3">
<div class="indiabix-item-item">
<div class="indiabix-item-photo">
<a href="#"><img src="https://i.imgur.com/GRPrGN6.jpg" class="img-responsive" alt="a" /></a>
</div>
<div class="indiabix-item-info">
<div class="indiabix-item-title">
<h4><a href="#">Test Glasses For Lab</a></h4></div>
<div class="indiabix-item-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 reviews)</a>
</div>
<div class="indiabix-hline"></div>
<div class="indiabix-item-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="indiabix-item-item">
<div class="indiabix-item-photo">
<a href="#"><img src="https://i.imgur.com/Ds5mtGy.jpg" class="img-responsive" alt="a" /></a>
</div>
<div class="indiabix-item-info">
<div class="indiabix-item-title">
<h4><a href="#">Jewel From India</a></h4></div>
<div class="indiabix-item-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 reviews)</a>
</div>
<div class="indiabix-hline"></div>
<div class="indiabix-item-price">
$ 299.00 (54% off)
</div>
</div>
</div>
</div>
<div class="col-xs-6 col-sm-3">
<div class="indiabix-item-item">
<div class="indiabix-item-photo">
<a href="#"><img src="https://i.imgur.com/e7IYyso.jpg" class="img-responsive" alt="a" /></a>
</div>
<div class="indiabix-item-info">
<div class="indiabix-item-title">
<h4><a href="#">Red Pepper</a></h4></div>
<div class="indiabix-item-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 reviews)</a>
</div>
<div class="indiabix-hline"></div>
<div class="indiabix-item-price">
$ 5.00 (11% off)
</div>
</div>
</div>
</div>
<div class="col-xs-6 col-sm-3">
<div class="indiabix-item-item">
<div class="indiabix-item-photo">
<a href="#"><img src="https://i.imgur.com/vuRE1W6.jpg" class="img-responsive" alt="a" /></a>
</div>
<div class="indiabix-item-info">
<div class="indiabix-item-title">
<h4><a href="#">Pro Cell Batteries </a></h4></div>
<div class="indiabix-item-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 reviews)</a>
</div>
<div class="indiabix-hline"></div>
<div class="indiabix-item-price">
$ 19.00 (63% off)
</div>
</div>
</div>
</div>
<div class="col-xs-6 col-sm-3">
<div class="indiabix-item-item">
<div class="indiabix-item-photo">
<a href="#"><img src="https://i.imgur.com/UibcRla.jpg" class="img-responsive" alt="a" /></a>
</div>
<div class="indiabix-item-info">
<div class="indiabix-item-title">
<h4><a href="#">Eye Glasses </a></h4></div>
<div class="indiabix-item-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 reviews)</a>
</div>
<div class="indiabix-hline"></div>
<div class="indiabix-item-price">
$ 129.00 (29% off)
</div>
</div>
</div>
</div>
</div>
</div>
</div>
<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">
<h2>Bootstrap 3 Carousel Slider Explained</h2>
<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>
CSS Code
.indiabix-item-slider {
background: #333;
background-image: url(https://unsplash.it/1240/530?image=721);
background-size: cover;
background-repeat: no-repeat;
padding: 100px 0;
}
.indiabix-item-slider .carousel-control {
width: 5%;
}
.indiabix-item-item a {
color: #147196;
}
.indiabix-item-item a:hover {
text-decoration: none;
}
.indiabix-item-item .indiabix-hline {
margin: 10px 0;
height: 1px;
background: #ccc;
}
@media all and (max-width: 768px) {
.indiabix-item-item {
margin-bottom: 30px;
}
}
.indiabix-item-photo {
text-align: center;
height: 180px;
background: #fff;
}
.indiabix-item-photo img {
height: 100%;
display: inline-block;
}
.indiabix-item-info {
background: #f0f0f0;
padding: 15px;
}
.indiabix-item-title h4 {
margin-top: 0;
white-space: nowrap;
text-overflow: ellipsis;
overflow: hidden;
}
.indiabix-item-rating {
color: #acacac;
}
.indiabix-item-rating .active {
color: #FFB500;
}
.indiabix-item-price {
color: firebrick;
font-size: 18px;
}
.details {
margin: 50px 0; }
.details h2 {
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; }
I hope you get an idea about product slider bootsnipp.
I would like to have feedback on my infinityknow.com blog.
Your valuable feedback, question, or comments about this article are always welcome.
If you enjoyed and liked this post, don’t forget to share.