Product Carousel

Carousel style 2

<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, }   },    ]    });