
Product Slider is very useful for any eCommerce website. An Owl Carousel slider or Product Slider is basically used to display product features such as size, color, Care Instructions, etc. On any company eCommerce website. You can also display the customer rating of the product and discounted offered rate.
With the help of the product slider, you can display more products in any small place on your website. Owl Carousel slider or Product Slider helps eCommerce websites to increase products to sell.
So in this tutorial, I am going to explain how to create an Owl Carousel slider or Product Slider using HTML, CSS, and the Owl Carousel library.
This Product slider design is very simple to use on any eCommerce website. If you know the basic HTML and CSS. Then you can easily use it on any website and this Owl Carousel slider design is fully responsive and supported by all browsers. This star rating system with product design, create using HTML, CSS and Owl carousel.
Before starting the HTML code, we need to add the bootstrap CSS and the font Awesome library to the head section of your website.
1 2 3 4 |
<link href="https://cdn.jsdelivr.net/npm/bootstrap@5.0.2/dist/css/bootstrap.min.css" rel="stylesheet"> <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css"> <link rel="stylesheet" type="text/css" href="css/owl.carousel.min.css"> <link rel="stylesheet" type="text/css" href="css/styles.css"><gwmw style="display:none;"><gwmw style="display:none;"><gwmw style="display:none;"></gwmw><gwmw style="display:none;"> |
This section will contain all the HTML codes that will help you create the basic structure of the Owl Carousel slider or Product Slider design.
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59 60 61 62 63 64 65 66 67 68 69 70 71 72 73 74 75 76 77 78 79 80 81 82 83 84 85 86 87 88 89 90 91 92 93 94 95 96 97 98 99 100 101 102 103 104 105 106 107 108 109 110 111 112 113 114 115 116 117 |
<section id="slider" class="pt-5" style="margin-bottom: 300px;"> <div class="container"> <h1 class="text-center" style="margin-bottom: 45px;"><b>Responsive Owl Carousel | Product Slider</b></h1> <div class="slider"> <div class="owl-carousel row"> <div class="slider-card"> <div class="product-card bg-white mb-4 overflow-hidden d-lg-flex flex-column rounded-lg position-relative"> <div class="post-labels"> <ul class="clearfix"> <li class="bg-primary">new</li> <li class="bg-danger">-50%</li> </ul> </div> <div class="product-image overflow-hidden"> <img src="images/product1.jpg" alt="" class="product-thumbnail rounded-lg"> </div> <div class="p-4 product-details"> <h4 class="font-weight-bold d-flex justify-content-between"> <a href="#!" class="text-dark text-truncate--2" title="EFrench afternoon dress, circa "> French afternoon dress </a> <a href="#!" class="ml-2 text-muted"><i class="fa fa-heart-o"></i></a> </h4> <a href="#!" class="text-uppercase py-0 px-2 rounded-lg border mb-2 d-inline-block"> <small class="font-weight-bold">Gown</small> </a> <div class="d-flex align-items-center mb-2"> <div class="rating-stars"> <img src="images/grey-star.svg" alt=""> <div class="filled-star" style="width:86%"></div> </div> <a href="#!" class="ml-2 text-muted">(245)</a> </div> <div class="d-flex align-items-baseline mb-2"> <h2 class="mr-2">$15.99</h2> <h5 class="text-striked text-muted mr-3 font-weight-regular">$20</h5> <h5 class="text-success">42% off</h5> </div> <button class="btn btn-outline-primary"><i class="fa fa-shopping-cart" aria-hidden="true"></i> Add to cart</button> </div> </div> </div> <!-- Start Card --> <div class="slider-card"> <div class="product-card bg-white mb-4 overflow-hidden d-lg-flex flex-column rounded-lg position-relative"> <div class="post-labels"> <ul class="clearfix"> <li class="bg-danger">-50%</li> <li class="bg-success">best seller</li> </ul> </div> <div class="product-image overflow-hidden"> <img src="images/product2.jpg" alt="" class="product-thumbnail rounded-lg"> </div> <div class="p-4 product-details"> <h4 class="font-weight-bold d-flex justify-content-between"> <a href="#!" class="text-dark text-truncate--2" title="Elegant designed coffee plant for desktop decoration"> Elegant designer Gown </a> <a href="#!" class="ml-2 text-muted"><i class="fa fa-heart-o"></i></a> </h4> <a href="#!" class="text-uppercase py-0 px-2 rounded-lg border mb-2 d-inline-block"> <small class="font-weight-bold">Gown</small> </a> <div class="d-flex align-items-center mb-2"> <div class="rating-stars"> <img src="images/grey-star.svg" alt=""> <div class="filled-star" style="width:86%"></div> </div> <a href="#!" class="ml-2 text-muted">(245)</a> </div> <div class="d-flex align-items-baseline mb-2"> <h2 class="mr-2">$15.99</h2> <h5 class="text-striked text-muted mr-3 font-weight-regular">$20</h5> <h5 class="text-success">42% off</h5> </div> <button class="btn btn-outline-primary"><i class="fa fa-shopping-cart" aria-hidden="true"></i> Add to cart</button> </div> </div> </div> <!-- Start Card --> <div class="slider-card"> <div class="product-card bg-white mb-4 overflow-hidden d-lg-flex flex-column rounded-lg position-relative"> <div class="post-labels"> <ul class="clearfix"> <li class="bg-danger">-50%</li> </ul> </div> <div class="product-image overflow-hidden"> <img src="images/product3.jpg" alt="" class="product-thumbnail rounded-lg"> </div> <div class="p-4 product-details"> <h4 class="font-weight-bold d-flex justify-content-between"> <a href="#!" class="text-dark text-truncate--2" title="Elegant designed coffee plant for desktop decoration"> Designer Long Gown </a> <a href="#!" class="ml-2 text-muted"><i class="fa fa-heart-o"></i></a> </h4> <a href="#!" class="text-uppercase py-0 px-2 rounded-lg border mb-2 d-inline-block"> <small class="font-weight-bold">Gown</small> </a> <div class="d-flex align-items-center mb-2"> <div class="rating-stars"> <img src="images/grey-star.svg" alt=""> <div class="filled-star" style="width:86%"></div> </div> <a href="#!" class="ml-2 text-muted">(245)</a> </div> <div class="d-flex align-items-baseline mb-2"> <h2 class="mr-2">$15.99</h2> <h5 class="text-striked text-muted mr-3 font-weight-regular">$20</h5> <h5 class="text-success">42% off</h5> </div> <button class="btn btn-outline-primary"><i class="fa fa-shopping-cart" aria-hidden="true"></i> Add to cart</button> </div> </div> </div> <!-- Start Card --> <div class="slider-card"> <div class="product-card bg-white mb-4 overflow-hidden d-lg-flex flex-column rounded-lg position-relative"> <div class="post-labels"> <ul class="clearfix"> <li class="bg-danger">-50%</li> <li class="bg-success">best seller</li> </ul> </div> <div class="product-image overflow-hidden"> <img src="images/product4.jpg" alt="" class="product-thumbnail rounded-lg"> </div> <div class="p-4 product-details"> <h4 class="font-weight-bold d-flex justify-content-between"> <a href="#!" class="text-dark text-truncate--2" title="Elegant designed coffee plant for desktop decoration"> Elegant Designer Gown </a> <a href="#!" class="ml-2 text-muted"><i class="fa fa-heart-o"></i></a> </h4> <a href="#!" class="text-uppercase py-0 px-2 rounded-lg border mb-2 d-inline-block"> <small class="font-weight-bold">Gown</small> </a> <div class="d-flex align-items-center mb-2"> <div class="rating-stars"> <img src="images/grey-star.svg" alt=""> <div class="filled-star" style="width:86%"></div> </div> <a href="#!" class="ml-2 text-muted">(245)</a> </div> <div class="d-flex align-items-baseline mb-2"> <h2 class="mr-2">$15.99</h2> <h5 class="text-striked text-muted mr-3 font-weight-regular">$20</h5> <h5 class="text-success">42% off</h5> </div> <button class="btn btn-outline-primary"><i class="fa fa-shopping-cart" aria-hidden="true"></i> Add to cart</button> </div> </div> </div> </div> </div> </div> </section><gwmw style="display:none;"><gwmw style="display:none;"></gwmw><gwmw style="display:none;"> |
This section will help you to provide the style of your product slider. So kindly just create a style.css page and copy the below css style and paste it on your style page.
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59 60 61 62 63 64 65 66 67 68 69 70 71 72 73 74 75 76 77 78 79 80 81 82 83 84 85 86 87 88 89 90 91 92 93 94 95 96 97 98 99 100 101 102 103 104 105 106 107 108 109 110 111 112 113 114 115 116 117 118 119 120 121 122 123 124 125 126 127 128 129 130 131 132 133 134 135 136 137 138 139 140 141 142 143 144 145 146 147 148 149 150 151 152 153 154 155 156 157 158 159 160 161 162 163 164 165 166 167 168 169 170 171 172 173 174 175 176 177 178 |
@import url("https://fonts.googleapis.com/css?family=Roboto:300,400,500,700&display=swap"); body { font-family: "Roboto", sans-serif; background: #f9f9f9; } a { color: #007bff; text-decoration: none; background-color: transparent; } .fa-heart-o:hover { color: #E83316; transform: scale(1.1) } .post-labels { top: 10px; left: 10px; position: absolute; } .post-labels { z-index: 1; } .post-labels ul { margin: 0px; padding: 0px; } .post-labels ul li { display: table; font-size: 14px; font-weight: 500; list-style: none; padding: 3px 8px; position: relative; border-radius: 3px; text-align: center; margin-bottom: 12px; color: #ffffff; background-color: blue; text-transform: uppercase; border-bottom-right-radius: 0px; } .post-labels ul .bg-primary:after { border-right: 8px solid #007bff; } .post-labels ul .bg-success:after { border-right: 8px solid #198754; } .post-labels ul li:after { right: 0; width: 0px; height: 0px; content: ''; bottom: -8px; position: absolute; border-top: 8px solid transparent; border-left: 8px solid transparent; border-bottom: 8px solid transparent; } .post-labels ul .bg-danger:after { border-right: 8px solid #dc3545; } .slider { margin-bottom: 30px; position: relative; } .slider .owl-item.active.center .slider-card { opacity: 1; background: #ff9966; /* fallback for old browsers */ background: -webkit-linear-gradient(to bottom, #ff5e62, #ff9966); /* Chrome 10-25, Safari 5.1-6 */ background: linear-gradient(to bottom, #ff5e62, #ff9966); /* W3C, IE 10+/ Edge, Firefox 16+, Chrome 26+, Opera 12+, Safari 7+ */ color: #fff; } .slider-card { background: #fff; padding: 0px 0px; margin: 15px 10px 15px 5px; border-radius: 5px; box-shadow: 0 15px 20px -15px rgb(0 0 0 / 73%); transform: scale(1); opacity: 1; transition: all 0.3s; } .section-100 { padding: 100px 0; } .text-striked { text-decoration: line-through; } .product-card { box-shadow: 0 12px 17px rgba(129, 140, 151, 0.1); } .product-card .product-image { height: 300px; position: relative; } .product-card .product-image .product-thumbnail { width: 100%; height: 100%; object-fit: cover; } .product-card .product-details { position: relative; } .product-card .product-details a:hover { text-decoration: none; color: #0062cc; } .text-truncate--2 { display: -webkit-box !important; -webkit-line-clamp: 2; -webkit-box-orient: vertical; white-space: normal; overflow: hidden; } .rating-stars { display: inline-block; position: relative; width: 90px; } .rating-stars:before { content: ""; position: absolute; left: 0; top: 0; width: 100%; height: 100%; background: #eee; } .rating-stars .filled-star { position: absolute; left: 0; top: 0; width: 100%; height: 100%; background: #ffc107; } .rating-stars img { height: 100%; width: 100%; display: block; position: relative; z-index: 1; } .owl-nav { top: -35px; right: -2px; display: table; position: absolute; } .owl-nav .owl-next, .owl-nav .owl-prev { width: 35px; height: 35px; padding: 0px; margin: 0px 2px; overflow: hidden; border-radius: 3px; position: relative; color: transparent; background: #ccc !important; } .owl-nav .owl-next:hover, .owl-nav .owl-prev:hover { background: #ffb207 !important; } .owl-dots { text-align: center; } .owl-dots .owl-dot { height: 10px; width: 10px; border-radius: 10px; background: #ccc !important; margin-left: 3px; margin-right: 3px; outline: none; } .owl-dots .owl-dot.active { background: #ffb207 !important; } |
The javascript code will help you to provide the slider feature on your product slider.
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 |
// Owlcarousel $(document).ready(function(){ $(".owl-carousel").owlCarousel({ loop:true, margin:10, nav:true, autoplay:false, autoplayTimeout:3000, autoplayHoverPause:true, center: false, navText: [ "<i class='fa fa-angle-left'></i>", "<i class='fa fa-angle-right'></i>" ], responsive:{ 0:{ items:1 }, 600:{ items:1 }, 1000:{ items:3 } } }); }); |
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59 60 61 62 63 64 65 66 67 68 69 70 71 72 73 74 75 76 77 78 79 80 81 82 83 84 85 86 87 88 89 90 91 92 93 94 95 96 97 98 99 100 101 102 103 104 105 106 107 108 109 110 111 112 113 114 115 116 117 118 119 120 121 122 123 124 125 126 127 128 129 130 131 132 133 134 135 136 137 |
<!doctype html> <html> <head> <meta charset="utf-8"> <title>Responsive Owl Carousel | Free Download</title> <meta content="width=device-width, initial-scale=1, maximum-scale=1, user-scalable=no" name="viewport"> <link href="https://cdn.jsdelivr.net/npm/bootstrap@5.0.2/dist/css/bootstrap.min.css" rel="stylesheet"> <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css"> <link rel="stylesheet" type="text/css" href="css/owl.carousel.min.css"> <link rel="stylesheet" type="text/css" href="css/styles.css"> </head> <body> <section id="slider" class="pt-5" style="margin-bottom: 300px;"> <div class="container"> <h1 class="text-center" style="margin-bottom: 45px;"><b>Responsive Owl Carousel | Product Slider</b></h1> <div class="slider"> <div class="owl-carousel row"> <div class="slider-card"> <div class="product-card bg-white mb-4 overflow-hidden d-lg-flex flex-column rounded-lg position-relative"> <div class="post-labels"> <ul class="clearfix"> <li class="bg-primary">new</li> <li class="bg-danger">-50%</li> </ul> </div> <div class="product-image overflow-hidden"> <img src="images/product1.jpg" alt="" class="product-thumbnail rounded-lg"> </div> <div class="p-4 product-details"> <h4 class="font-weight-bold d-flex justify-content-between"> <a href="#!" class="text-dark text-truncate--2" title="EFrench afternoon dress, circa "> French afternoon dress </a> <a href="#!" class="ml-2 text-muted"><i class="fa fa-heart-o"></i></a> </h4> <a href="#!" class="text-uppercase py-0 px-2 rounded-lg border mb-2 d-inline-block"> <small class="font-weight-bold">Gown</small> </a> <div class="d-flex align-items-center mb-2"> <div class="rating-stars"> <img src="images/grey-star.svg" alt=""> <div class="filled-star" style="width:86%"></div> </div> <a href="#!" class="ml-2 text-muted">(245)</a> </div> <div class="d-flex align-items-baseline mb-2"> <h2 class="mr-2">$15.99</h2> <h5 class="text-striked text-muted mr-3 font-weight-regular">$20</h5> <h5 class="text-success">42% off</h5> </div> <button class="btn btn-outline-primary"><i class="fa fa-shopping-cart" aria-hidden="true"></i> Add to cart</button> </div> </div> </div> <!-- Start Card --> <div class="slider-card"> <div class="product-card bg-white mb-4 overflow-hidden d-lg-flex flex-column rounded-lg position-relative"> <div class="post-labels"> <ul class="clearfix"> <li class="bg-danger">-50%</li> <li class="bg-success">best seller</li> </ul> </div> <div class="product-image overflow-hidden"> <img src="images/product2.jpg" alt="" class="product-thumbnail rounded-lg"> </div> <div class="p-4 product-details"> <h4 class="font-weight-bold d-flex justify-content-between"> <a href="#!" class="text-dark text-truncate--2" title="Elegant designed coffee plant for desktop decoration"> Elegant designer Gown </a> <a href="#!" class="ml-2 text-muted"><i class="fa fa-heart-o"></i></a> </h4> <a href="#!" class="text-uppercase py-0 px-2 rounded-lg border mb-2 d-inline-block"> <small class="font-weight-bold">Gown</small> </a> <div class="d-flex align-items-center mb-2"> <div class="rating-stars"> <img src="images/grey-star.svg" alt=""> <div class="filled-star" style="width:86%"></div> </div> <a href="#!" class="ml-2 text-muted">(245)</a> </div> <div class="d-flex align-items-baseline mb-2"> <h2 class="mr-2">$15.99</h2> <h5 class="text-striked text-muted mr-3 font-weight-regular">$20</h5> <h5 class="text-success">42% off</h5> </div> <button class="btn btn-outline-primary"><i class="fa fa-shopping-cart" aria-hidden="true"></i> Add to cart</button> </div> </div> </div> <!-- Start Card --> <div class="slider-card"> <div class="product-card bg-white mb-4 overflow-hidden d-lg-flex flex-column rounded-lg position-relative"> <div class="post-labels"> <ul class="clearfix"> <li class="bg-danger">-50%</li> </ul> </div> <div class="product-image overflow-hidden"> <img src="images/product3.jpg" alt="" class="product-thumbnail rounded-lg"> </div> <div class="p-4 product-details"> <h4 class="font-weight-bold d-flex justify-content-between"> <a href="#!" class="text-dark text-truncate--2" title="Elegant designed coffee plant for desktop decoration"> Designer Long Gown </a> <a href="#!" class="ml-2 text-muted"><i class="fa fa-heart-o"></i></a> </h4> <a href="#!" class="text-uppercase py-0 px-2 rounded-lg border mb-2 d-inline-block"> <small class="font-weight-bold">Gown</small> </a> <div class="d-flex align-items-center mb-2"> <div class="rating-stars"> <img src="images/grey-star.svg" alt=""> <div class="filled-star" style="width:86%"></div> </div> <a href="#!" class="ml-2 text-muted">(245)</a> </div> <div class="d-flex align-items-baseline mb-2"> <h2 class="mr-2">$15.99</h2> <h5 class="text-striked text-muted mr-3 font-weight-regular">$20</h5> <h5 class="text-success">42% off</h5> </div> <button class="btn btn-outline-primary"><i class="fa fa-shopping-cart" aria-hidden="true"></i> Add to cart</button> </div> </div> </div> <!-- Start Card --> <div class="slider-card"> <div class="product-card bg-white mb-4 overflow-hidden d-lg-flex flex-column rounded-lg position-relative"> <div class="post-labels"> <ul class="clearfix"> <li class="bg-danger">-50%</li> <li class="bg-success">best seller</li> </ul> </div> <div class="product-image overflow-hidden"> <img src="images/product4.jpg" alt="" class="product-thumbnail rounded-lg"> </div> <div class="p-4 product-details"> <h4 class="font-weight-bold d-flex justify-content-between"> <a href="#!" class="text-dark text-truncate--2" title="Elegant designed coffee plant for desktop decoration"> Elegant Designer Gown </a> <a href="#!" class="ml-2 text-muted"><i class="fa fa-heart-o"></i></a> </h4> <a href="#!" class="text-uppercase py-0 px-2 rounded-lg border mb-2 d-inline-block"> <small class="font-weight-bold">Gown</small> </a> <div class="d-flex align-items-center mb-2"> <div class="rating-stars"> <img src="images/grey-star.svg" alt=""> <div class="filled-star" style="width:86%"></div> </div> <a href="#!" class="ml-2 text-muted">(245)</a> </div> <div class="d-flex align-items-baseline mb-2"> <h2 class="mr-2">$15.99</h2> <h5 class="text-striked text-muted mr-3 font-weight-regular">$20</h5> <h5 class="text-success">42% off</h5> </div> <button class="btn btn-outline-primary"><i class="fa fa-shopping-cart" aria-hidden="true"></i> Add to cart</button> </div> </div> </div> </div> </div> </div> </section> <script src="https://code.jquery.com/jquery-3.2.1.min.js"></script> <script src="https://cdn.jsdelivr.net/npm/@popperjs/core@2.9.2/dist/umd/popper.min.js" ></script> <script src="https://cdn.jsdelivr.net/npm/bootstrap@5.0.2/dist/js/bootstrap.min.js" ></script> <script src="js/owl.carousel.min.js"></script> <script src="js/script.js"></script> </body> </html> |