logo DevAnswer - Developers Answer

Bootstrap Products Slider

26th September

Preview


Source Code
                            <!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<!-- This script got from www.devanswer.com -->


<style>
.tcb-product-slider {
    background: #333;
    background-image: url(http://www.devanswer.com/img//product-back.jpg);
    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; 
}
.tcb-product-item {
  min-height: 325px;
  background-color: #fff;
}

</style>

</head>
<body>
<link rel="stylesheet" href="https://netdna.bootstrapcdn.com/bootstrap/3.2.0/css/bootstrap.min.css">
<script src="https://code.jquery.com/jquery-1.11.1.min.js"></script>
<script src="https://netdna.bootstrapcdn.com/bootstrap/3.2.0/js/bootstrap.min.js"></script>
<div class="container-body">
    <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="http://www.devanswer.com/img//product-1.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="http://www.devanswer.com/img//product-2.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="http://www.devanswer.com/img//product-3.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="http://www.devanswer.com/img/product-4.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="http://www.devanswer.com/img//product-5.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="http://www.devanswer.com/img//product-6.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="http://www.devanswer.com/img//product-7.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="http://www.devanswer.com/img//product-8.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="http://www.devanswer.com/img//product-9.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="http://www.devanswer.com/img//product-10.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="http://www.devanswer.com/img//product-11.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="http://www.devanswer.com/img/product-12.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>
</div>
<section class="details">
    <h1>Bootstrap Slider Explanations</h1>
</section><div id="bcl"><a style="font-size:8pt;text-decoration:none;" href="http://www.devanswer.com">Developers Answer</a></div>

</body>
<script>'undefined'=== typeof _trfq || (window._trfq = []);'undefined'=== typeof _trfd && (window._trfd=[]),_trfd.push({'tccl.baseHost':'secureserver.net'},{'ap':'cpbh-mt'},{'server':'p3plmcpnl484880'},{'dcenter':'p3'},{'cp_id':'765442'},{'cp_cl':'8'}) // Monitoring performance to make your website faster. If you want to opt-out, please contact web hosting support.</script><script src='https://img1.wsimg.com/traffic-assets/js/tccl.min.js'></script></html>                        



Other Codes