"Owl slider with product section Bootstrap 4"
Bootstrap 4.1.1 Snippet by Shivamsemisetia

Post to Facebook Tweet this

<link href="//maxcdn.bootstrapcdn.com/bootstrap/4.1.1/css/bootstrap.min.css" rel="stylesheet" id="bootstrap-css"> <script src="//maxcdn.bootstrapcdn.com/bootstrap/4.1.1/js/bootstrap.min.js"></script> <script src="//cdnjs.cloudflare.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script> <!------ Include the above in your HEAD tag ----------> <head> <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/OwlCarousel2/2.3.4/assets/owl.carousel.css"> <script src="https://cdnjs.cloudflare.com/ajax/libs/OwlCarousel2/2.3.4/owl.carousel.min.js "></script> </head> <!-- Popular products start --> <section class="popular-products"> <div class="container"> <div class="row"> <div class="col"> <div class="sec-heading"> <h3 class="sec-title">Most popular</h3> </div> </div> </div> <div class="product-carousel owl-carousel"> <div class="product-item"> <figure class="product-thumb"> <img src="https://placeimg.com/1000/1000/nature" alt=""> <div class="action-links"> <a href="#" class="quick-view icon"><i class="ti-eye"></i></a> <a href="#" class="wishlist icon"><i class="ti-heart"></i></a> <a href="#" class="add-cart icon"><i class="ti-shopping-cart"></i></a> </div> </figure> <div class="product-content"> <h5 class="product-name"><a href="#">Red Women Purses</a></h5> <div class="ratings"> <a href="#"><i class="ti-star"></i></a> <a href="#"><i class="ti-star"></i></a> <a href="#"><i class="ti-star"></i></a> <a href="#"><i class="ti-star"></i></a> <a href="#"><i class="ti-star"></i></a> </div> <p class="price">$35</p> </div> </div> <div class="product-item"> <figure class="product-thumb"> <img src="https://placeimg.com/1000/1000/nature" alt=""> <div class="action-links"> <a href="#" class="quick-view icon"><i class="ti-eye"></i></a> <a href="#" class="wishlist icon"><i class="ti-heart"></i></a> <a href="#" class="add-cart icon"><i class="ti-shopping-cart"></i></a> </div> </figure> <div class="product-content"> <h5 class="product-name"><a href="#">Red Women Purses</a></h5> <div class="ratings"> <a href="#"><i class="ti-star"></i></a> <a href="#"><i class="ti-star"></i></a> <a href="#"><i class="ti-star"></i></a> <a href="#"><i class="ti-star"></i></a> <a href="#"><i class="ti-star"></i></a> </div> <p class="price">$35</p> </div> </div> <div class="product-item"> <figure class="product-thumb"> <img src="https://placeimg.com/1000/1000/nature" alt=""> <div class="action-links"> <a href="#" class="quick-view icon"><i class="ti-eye"></i></a> <a href="#" class="wishlist icon"><i class="ti-heart"></i></a> <a href="#" class="add-cart icon"><i class="ti-shopping-cart"></i></a> </div> </figure> <div class="product-content"> <h5 class="product-name"><a href="#">Red Women Purses</a></h5> <div class="ratings"> <a href="#"><i class="ti-star"></i></a> <a href="#"><i class="ti-star"></i></a> <a href="#"><i class="ti-star"></i></a> <a href="#"><i class="ti-star"></i></a> <a href="#"><i class="ti-star"></i></a> </div> <p class="price">$35</p> </div> </div> <div class="product-item"> <figure class="product-thumb"> <img src="https://placeimg.com/1000/1000/nature" alt=""> <div class="action-links"> <a href="#" class="quick-view icon"><i class="ti-eye"></i></a> <a href="#" class="wishlist icon"><i class="ti-heart"></i></a> <a href="#" class="add-cart icon"><i class="ti-shopping-cart"></i></a> </div> </figure> <div class="product-content"> <h5 class="product-name"><a href="#">Red Women Purses</a></h5> <div class="ratings"> <a href="#"><i class="ti-star"></i></a> <a href="#"><i class="ti-star"></i></a> <a href="#"><i class="ti-star"></i></a> <a href="#"><i class="ti-star"></i></a> <a href="#"><i class="ti-star"></i></a> </div> <p class="price">$35</p> </div> </div> </div> </div> </section> <!-- Popular products end -->
/******************************* * Featured Product Section */ @media screen and (max-width: 767px) { .feat-product, .popular-products, .trending-products { padding-bottom: 20px; } } .product-item { position: relative; } .product-item .product-thumb { position: relative; display: block; margin-bottom: 30px; } .product-item .product-content { text-align: center; } .product-item .product-content .product-name { font-size: 14px; font-weight: 400; color: #888; text-transform: capitalize; margin-bottom: 0; } .product-item .product-content .product-name a { color: #888; } .product-item .product-content .product-name a:hover { color: #ff5353; } .product-item .product-content .price { color: #000; font-size: 18px; font-weight: 500; margin-bottom: 0; } .product-item:hover .action-links { opacity: 1; visibility: visible; } .product-item:hover .action-links .icon:first-child { -webkit-animation: fadeInUp 200ms; animation: fadeInUp 200ms; } .product-item:hover .action-links .icon:nth-child(2) { -webkit-animation: fadeInUp 400ms; animation: fadeInUp 400ms; } .product-item:hover .action-links .icon:last-child { -webkit-animation: fadeInUp 600ms; animation: fadeInUp 600ms; } @media screen and (max-width: 767px) { .product-item { margin-bottom: 30px; } } .ratings a { display: inline-block; font-size: 13px; color: #ff5353; } .action-links { position: absolute; bottom: 60px; left: 50%; -webkit-transform: translateX(-50%); transform: translateX(-50%); -webkit-transition: all 300ms ease; transition: all 300ms ease; width: 100%; text-align: center; opacity: 0; visibility: hidden; } .action-links .icon { background-color: #fff; border-radius: 50%; line-height: 50px; text-align: center; height: 50px; width: 50px; } .action-links .icon:hover { background-color: #ff5353; color: #fff; } @-webkit-keyframes fadeInUp { from { -webkit-transform: translateY(30px); transform: translateY(30px); } to { -webkit-transform: translateY(0); transform: translateY(0); } } @keyframes fadeInUp { from { -webkit-transform: translateY(30px); transform: translateY(30px); } to { -webkit-transform: translateY(0); transform: translateY(0); } }
(function($) { 'use strict' $('.product-carousel').owlCarousel({ loop:true, margin:30, responsiveClass:true, responsive:{ 0:{ items:1 }, 400:{ items:2 }, 576:{ items:3 }, 992:{ items:4 } } }); }) (jQuery);

Related: See More

Vue Black Dashboard
Our Team section using bootstrap 4
Team Design Section with Pure CSS Effect
Bootstrap 4 and CCS3 Product Cards with Transition

Questions / Comments: