You have 03 itemsin your shopping bag
<div class="row discount-2"> <div class="col-lg-8 col-md-8 col-sm-8 col-xs-12"> <div class="row"> <div class="discount-product-slider dots-bottom-right"> <!-- single-discount-product start --> <div class="col-lg-12"> <div class="discount-product"> <div class="row"> <div class="col-lg-5 col-md-5 col-sm-6 col-xs-12"> <a href="single-blog.html"> <img src="img/discount/5.jpg" alt="" /> </a> </div> <div class="col-lg-7 col-md-7 col-sm-6 col-xs-12"> <div class="discount-info"> <h1 class="text-dark-red">Discount 50%</h1> <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed does eiusmodes tempor incididunt ut labore labore et labore et dolore magna aliqua. Ut enim ad minim venim.</p> <a class="button-2 text-dark-red text-uppercase" href="#">GET DISCOUNT <i class="zmdi zmdi-long-arrow-right"></i></a> </div> </div> </div> </div> </div> <!-- single-discount-product end --> <!-- single-discount-product start --> <div class="col-lg-12"> <div class="discount-product"> <div class="row"> <div class="col-lg-5 col-md-5 col-sm-6 col-xs-12"> <a href="single-blog.html"> <img src="img/discount/6.jpg" alt="" /> </a> </div> <div class="col-lg-7 col-md-7 col-sm-6 col-xs-12"> <div class="discount-info"> <h1 class="text-dark-red">Discount 50%</h1> <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed does eiusmodes tempor incididunt ut labore labore et labore et dolore magna aliqua. Ut enim ad minim venim.</p> <a class="button-2 text-dark-red text-uppercase" href="#">GET DISCOUNT <i class="zmdi zmdi-long-arrow-right"></i></a> </div> </div> </div> </div> </div> <!-- single-discount-product end --> <!-- single-discount-product start --> <div class="col-lg-12"> <div class="discount-product"> <div class="row"> <div class="col-lg-5 col-md-5 col-sm-6 col-xs-12"> <a href="single-blog.html"> <img src="img/discount/7.jpg" alt="" /> </a> </div> <div class="col-lg-7 col-md-7 col-sm-6 col-xs-12"> <div class="discount-info"> <h1 class="text-dark-red">Discount 50%</h1> <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed does eiusmodes tempor incididunt ut labore labore et labore et dolore magna aliqua. Ut enim ad minim venim.</p> <a class="button-2 text-dark-red text-uppercase" href="#">GET DISCOUNT <i class="zmdi zmdi-long-arrow-right"></i></a> </div> </div> </div> </div> </div> <!-- single-discount-product end --> <!-- single-discount-product start --> <div class="col-lg-12"> <div class="discount-product"> <div class="row"> <div class="col-lg-5 col-md-5 col-sm-6 col-xs-12"> <a href="single-blog.html"> <img src="img/discount/8.jpg" alt="" /> </a> </div> <div class="col-lg-7 col-md-7 col-sm-6 col-xs-12"> <div class="discount-info"> <h1 class="text-dark-red">Discount 50%</h1> <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed does eiusmodes tempor incididunt ut labore labore et labore et dolore magna aliqua. Ut enim ad minim venim.</p> <a class="button-2 text-dark-red text-uppercase" href="#">GET DISCOUNT <i class="zmdi zmdi-long-arrow-right"></i></a> </div> </div> </div> </div> </div> <!-- single-discount-product end --> </div> </div> </div> </div>
.discount-product {position: relative;} .discount-img-brief { left: 0; margin: auto; position: absolute; right: 0; top: 0; width: 100%; } .onsale { background: #c87065 none repeat scroll 0 0; border-radius: 50%; float: left; height: 112px; margin: 5% 15% 0 25%; padding-top: 30px; text-align: center; width: 112px; } .discount-info { float: left; margin-top: 45px; padding: 0; width: 40%; } .onsale span { color: #fff; display: block; font-size: 20px; line-height: 14px; } .onsale-text { font-style: italic; padding-bottom: 12px; position: relative; } .onsale-text::before { background: #fff none repeat scroll 0 0; bottom: 0; content: ""; height: 2px; left: 0; margin: auto; position: absolute; right: 0; width: 20px; } .onsale-price { padding-top: 10px; font-weight: 700; } .discount-info h1 { font-size: 45px; font-weight: 900; line-height: 35px; margin-bottom: 15px; } .discount-2 .discount-product { background: #fff none repeat scroll 0 0; padding: 72px 20px; position: inherit; } .discount-2 .discount-info { float: none; width: 100%; }
$('.discount-product-slider').slick({ autoplay: false, arrows: false, dots: true, speed: 500, slidesToShow: 1, slidesToScroll: 1, responsive: [ { breakpoint: 1169, settings: { slidesToShow: 1, } }, { breakpoint: 969, settings: { slidesToShow: 1, } }, { breakpoint: 767, settings: { slidesToShow: 1, } }, ] });