Product Carousel

Carousel style 2

Discount 50%

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.

GET DISCOUNT

Discount 50%

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.

GET DISCOUNT

Discount 50%

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.

GET DISCOUNT

Discount 50%

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.

GET DISCOUNT

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