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-md-6">
    <a href="single-blog.html">
    <img src="img/discount/5.jpg" alt="" />
    </a>
    </div>
    <div class="col-lg-7 col-md-7 col-md-6">
    <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-md-6">
    <a href="single-blog.html">
    <img src="img/discount/6.jpg" alt="" />
    </a>
    </div>
    <div class="col-lg-7 col-md-7 col-md-6">
    <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-md-6">
    <a href="single-blog.html">
    <img src="img/discount/7.jpg" alt="" />
    </a>
    </div>
    <div class="col-lg-7 col-md-7 col-md-6">
    <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-md-6">
    <a href="single-blog.html">
    <img src="img/discount/8.jpg" alt="" />
    </a>
    </div>
    <div class="col-lg-7 col-md-7 col-md-6">
    <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, }   },
    ]
    });