Related-Product

                
<!--on sale area srart-->
<div class="on-sale-area">
    <div class="shop-shadow2">
        <div class="col-lg-12">
            <div class="catagory-title mb-20">
                <h3>
                    On Sale
                </h3>
            </div>
        </div>
        <div class="total-onsale-product carsoule-btn cb-3 cb-3-small">
            <div class="col-12">
                <!-- single product start-->
                <div class="single-product single-product-2">
                    <div class="product-label">
                        <div class="new">Sale</div>
                    </div>
                    <div class="product-img">
                        <div class="single-product-img">
                            <a href="#"> <img alt="" src="images/product/shop/01-350x437.jpg"
                                    class="primary-image"> <img alt="" src="images/product/shop/02-350x437.jpg"
                                    class="secondary-image"> </a>
                        </div>
                    </div>
                    <div class="product-text">
                        <div class="prodcut-name"> <a href="#">Wuisque Ringilla</a>
                        </div>
                        <div class="prodcut-price">
                            <div class="old-price"> <del>$250</del> </div>
                            <div class="new-price"> $196 </div>
                        </div>
                        <div class="prodcut-ratting-price">
                            <div class="prodcut-ratting"> <a href="#"><i class="fa fa-star"></i></a>
                                <a href="#"><i class="fa fa-star"></i></a> <a href="#"><i
                                        class="fa fa-star"></i></a> <a href="#"><i
                                        class="fa fa-star"></i></a> <a href="#"><i
                                        class="fa fa-star-o"></i></a> </div>
                        </div>
                    </div>
                </div>
                <!-- single product end-->
            </div>
            <div class="col-12">
                <!-- single product start-->
                <div class="single-product single-product-2">
                    <div class="product-label">
                        <div class="new">Sale</div>
                    </div>
                    <div class="product-img">
                        <div class="single-product-img">
                            <a href="#"> <img alt="" src="images/product/shop/04-350x437.jpg"
                                    class="primary-image"> <img alt="" src="images/product/shop/05-350x437.jpg"
                                    class="secondary-image"> </a>
                        </div>
                    </div>
                    <div class="product-text">
                        <div class="prodcut-name"> <a href="#">Kewrmaquer Balkeri</a>
                        </div>
                        <div class="prodcut-price">
                            <div class="old-price"> <del>$250</del> </div>
                            <div class="new-price"> $165 </div>
                        </div>
                        <div class="prodcut-ratting-price">
                            <div class="prodcut-ratting"> <a href="#"><i class="fa fa-star"></i></a>
                                <a href="#"><i class="fa fa-star"></i></a> <a href="#"><i
                                        class="fa fa-star"></i></a> <a href="#"><i
                                        class="fa fa-star"></i></a> <a href="#"><i
                                        class="fa fa-star-o"></i></a> </div>
                        </div>
                    </div>
                </div>
                <!-- single product end-->
            </div>
            <div class="col-12">
                <!-- single product start-->
                <div class="single-product single-product-2">
                    <div class="product-label">
                        <div class="new">Sale</div>
                    </div>
                    <div class="product-img">
                        <div class="single-product-img">
                            <a href="#"> <img alt="" src="images/product/shop/06-350x437.jpg"
                                    class="primary-image"> <img alt="" src="images/product/shop/07-350x437.jpg"
                                    class="secondary-image"> </a>
                        </div>
                    </div>
                    <div class="product-text">
                        <div class="prodcut-name"> <a href="#">Melkderfse Nalkeri</a>
                        </div>
                        <div class="prodcut-price">
                            <div class="old-price"> <del>$295</del> </div>
                            <div class="new-price"> $134 </div>
                        </div>
                        <div class="prodcut-ratting-price">
                            <div class="prodcut-ratting"> <a href="#"><i class="fa fa-star"></i></a>
                                <a href="#"><i class="fa fa-star"></i></a> <a href="#"><i
                                        class="fa fa-star"></i></a> <a href="#"><i
                                        class="fa fa-star"></i></a> <a href="#"><i
                                        class="fa fa-star-o"></i></a> </div>
                        </div>
                    </div>
                </div>
                <!-- single product end-->
            </div>
            <div class="col-12">
                <!-- single product start-->
                <div class="single-product single-product-2">
                    <div class="product-label">
                        <div class="new">Sale</div>
                    </div>
                    <div class="product-img">
                        <div class="single-product-img">
                            <a href="#"> <img alt="" src="images/product/shop/08-350x437.jpg"
                                    class="primary-image"> <img alt="" src="images/product/shop/09-350x437.jpg"
                                    class="secondary-image"> </a>
                        </div>
                    </div>
                    <div class="product-text">
                        <div class="prodcut-name"> <a href="#">Wuisque Ringilla</a>
                        </div>
                        <div class="prodcut-price">
                            <div class="old-price"> <del>$250</del> </div>
                            <div class="new-price"> $196 </div>
                        </div>
                        <div class="prodcut-ratting-price">
                            <div class="prodcut-ratting"> <a href="#"><i class="fa fa-star"></i></a>
                                <a href="#"><i class="fa fa-star"></i></a> <a href="#"><i
                                        class="fa fa-star"></i></a> <a href="#"><i
                                        class="fa fa-star"></i></a> <a href="#"><i
                                        class="fa fa-star-o"></i></a> </div>
                        </div>
                    </div>
                </div>
                <!-- single product end-->
            </div>
            <div class="col-12">
                <!-- single product start-->
                <div class="single-product single-product-2">
                    <div class="product-label">
                        <div class="new">Sale</div>
                    </div>
                    <div class="product-img">
                        <div class="single-product-img">
                            <a href="#"> <img alt="" src="images/product/shop/10-350x437.jpg"
                                    class="primary-image"> <img alt="" src="images/product/shop/11-350x437.jpg"
                                    class="secondary-image"> </a>
                        </div>
                    </div>
                    <div class="product-text">
                        <div class="prodcut-name"> <a href="#">Kewrmaquer Balkeri</a>
                        </div>
                        <div class="prodcut-price">
                            <div class="old-price"> <del>$250</del> </div>
                            <div class="new-price"> $165 </div>
                        </div>
                        <div class="prodcut-ratting-price">
                            <div class="prodcut-ratting"> <a href="#"><i class="fa fa-star"></i></a>
                                <a href="#"><i class="fa fa-star"></i></a> <a href="#"><i
                                        class="fa fa-star"></i></a> <a href="#"><i
                                        class="fa fa-star"></i></a> <a href="#"><i
                                        class="fa fa-star-o"></i></a> </div>
                        </div>
                    </div>
                </div>
                <!-- single product end-->
            </div>
            <div class="col-12">
                <!-- single product start-->
                <div class="single-product single-product-2">
                    <div class="product-label">
                        <div class="new">Sale</div>
                    </div>
                    <div class="product-img">
                        <div class="single-product-img">
                            <a href="#"> <img alt="" src="images/product/shop/12-350x437.jpg"
                                    class="primary-image"> <img alt="" src="images/product/shop/13-350x437.jpg"
                                    class="secondary-image"> </a>
                        </div>
                    </div>
                    <div class="product-text">
                        <div class="prodcut-name"> <a href="#">Melkderfse Nalkeri</a>
                        </div>
                        <div class="prodcut-price">
                            <div class="old-price"> <del>$295</del> </div>
                            <div class="new-price"> $134 </div>
                        </div>
                        <div class="prodcut-ratting-price">
                            <div class="prodcut-ratting"> <a href="#"><i class="fa fa-star"></i></a>
                                <a href="#"><i class="fa fa-star"></i></a> <a href="#"><i
                                        class="fa fa-star"></i></a> <a href="#"><i
                                        class="fa fa-star"></i></a> <a href="#"><i
                                        class="fa fa-star-o"></i></a> </div>
                        </div>
                    </div>
                </div>
                <!-- single product end-->
            </div>
        </div>
    </div>
</div>
<!--on sale area end-->

            
            

		
$('.total-onsale-product').slick({
slidesToShow: 4,
slidesToScroll: 1,
autoplay: false,
autoplaySpeed: 5000,
dots: false,
arrows: true,
prevArrow: '
',
nextArrow: '
',
responsive: [
{  breakpoint: 1169,  settings: { slidesToShow: 4,  }  },
{  breakpoint: 969,   settings: { slidesToShow: 3,  }  },
{  breakpoint: 767,   settings: { slidesToShow: 2, }   },
{  breakpoint: 479,   settings: { slidesToShow: 1, }   },
]
});
		
	

                
<!--on sale area srart-->
<div class="on-sale-area mb-30">
<div class="shop-shadow2">
<div class="col-lg-12">
<div class="catagory-title mb-20">
<h3>
On Sale
</h3>
</div>
</div>
<div class="clearfix"></div>
<div class="total-onsale-product carsoule-btn cb-3 cb-3-small">
<div class="col-12">
<!-- single product start-->
<div class="single-product single-product-2">
<div class="product-label">
<div class="new">Sale</div>
</div>
<div class="product-img">
<div class="single-product-img">
<a href="#"> <img alt="" src="images/product/shop/01-350x437.jpg" class="primary-image"> <img alt="" src="images/product/shop/02-350x437.jpg" class="secondary-image"> </a>
</div>
</div>
<div class="product-text">
<div class="prodcut-name"> <a href="#">Wuisque Ringilla</a> </div>
<div class="prodcut-price">
<div class="old-price"> <del>$250</del> </div>
<div class="new-price"> $196 </div>
</div>
<div class="prodcut-ratting-price">
<div class="prodcut-ratting"> <a href="#"><i class="fa fa-star"></i></a> <a href="#"><i class="fa fa-star"></i></a> <a href="#"><i class="fa fa-star"></i></a> <a href="#"><i class="fa fa-star"></i></a> <a href="#"><i class="fa fa-star-o"></i></a> </div>
</div>
</div>
</div>
<!-- single product end-->
</div>
<div class="col-12">
<!-- single product start-->
<div class="single-product single-product-2">
<div class="product-label">
<div class="new">Sale</div>
</div>
<div class="product-img">
<div class="single-product-img">
<a href="#"> <img alt="" src="images/product/shop/04-350x437.jpg" class="primary-image"> <img alt="" src="images/product/shop/05-350x437.jpg" class="secondary-image"> </a>
</div>
</div>
<div class="product-text">
<div class="prodcut-name"> <a href="#">Kewrmaquer Balkeri</a> </div>
<div class="prodcut-price">
<div class="old-price"> <del>$250</del> </div>
<div class="new-price"> $165 </div>
</div>
<div class="prodcut-ratting-price">
<div class="prodcut-ratting"> <a href="#"><i class="fa fa-star"></i></a> <a href="#"><i class="fa fa-star"></i></a> <a href="#"><i class="fa fa-star"></i></a> <a href="#"><i class="fa fa-star"></i></a> <a href="#"><i class="fa fa-star-o"></i></a> </div>
</div>
</div>
</div>
<!-- single product end-->
</div>
<div class="col-12">
<!-- single product start-->
<div class="single-product single-product-2">
<div class="product-label">
<div class="new">Sale</div>
</div>
<div class="product-img">
<div class="single-product-img">
<a href="#"> <img alt="" src="images/product/shop/06-350x437.jpg" class="primary-image"> <img alt="" src="images/product/shop/07-350x437.jpg" class="secondary-image"> </a>
</div>
</div>
<div class="product-text">
<div class="prodcut-name"> <a href="#">Melkderfse Nalkeri</a> </div>
<div class="prodcut-price">
<div class="old-price"> <del>$295</del> </div>
<div class="new-price"> $134 </div>
</div>
<div class="prodcut-ratting-price">
<div class="prodcut-ratting"> <a href="#"><i class="fa fa-star"></i></a> <a href="#"><i class="fa fa-star"></i></a> <a href="#"><i class="fa fa-star"></i></a> <a href="#"><i class="fa fa-star"></i></a> <a href="#"><i class="fa fa-star-o"></i></a> </div>
</div>
</div>
</div>
<!-- single product end-->
</div>
<div class="col-12">
<!-- single product start-->
<div class="single-product single-product-2">
<div class="product-label">
<div class="new">Sale</div>
</div>
<div class="product-img">
<div class="single-product-img">
<a href="#"> <img alt="" src="images/product/shop/08-350x437.jpg" class="primary-image"> <img alt="" src="images/product/shop/09-350x437.jpg" class="secondary-image"> </a>
</div>
</div>
<div class="product-text">
<div class="prodcut-name"> <a href="#">Wuisque Ringilla</a> </div>
<div class="prodcut-price">
<div class="old-price"> <del>$250</del> </div>
<div class="new-price"> $196 </div>
</div>
<div class="prodcut-ratting-price">
<div class="prodcut-ratting"> <a href="#"><i class="fa fa-star"></i></a> <a href="#"><i class="fa fa-star"></i></a> <a href="#"><i class="fa fa-star"></i></a> <a href="#"><i class="fa fa-star"></i></a> <a href="#"><i class="fa fa-star-o"></i></a> </div>
</div>
</div>
</div>
<!-- single product end-->
</div>
<div class="col-12">
<!-- single product start-->
<div class="single-product single-product-2">
<div class="product-label">
<div class="new">Sale</div>
</div>
<div class="product-img">
<div class="single-product-img">
<a href="#"> <img alt="" src="images/product/shop/10-350x437.jpg" class="primary-image"> <img alt="" src="images/product/shop/11-350x437.jpg" class="secondary-image"> </a>
</div>
</div>
<div class="product-text">
<div class="prodcut-name"> <a href="#">Kewrmaquer Balkeri</a> </div>
<div class="prodcut-price">
<div class="old-price"> <del>$250</del> </div>
<div class="new-price"> $165 </div>
</div>
<div class="prodcut-ratting-price">
<div class="prodcut-ratting"> <a href="#"><i class="fa fa-star"></i></a> <a href="#"><i class="fa fa-star"></i></a> <a href="#"><i class="fa fa-star"></i></a> <a href="#"><i class="fa fa-star"></i></a> <a href="#"><i class="fa fa-star-o"></i></a> </div>
</div>
</div>
</div>
<!-- single product end-->
</div>
<div class="col-12">
<!-- single product start-->
<div class="single-product single-product-2">
<div class="product-label">
<div class="new">Sale</div>
</div>
<div class="product-img">
<div class="single-product-img">
<a href="#"> <img alt="" src="images/product/shop/12-350x437.jpg" class="primary-image"> <img alt="" src="images/product/shop/13-350x437.jpg" class="secondary-image"> </a>
</div>
</div>
<div class="product-text">
<div class="prodcut-name"> <a href="#">Melkderfse Nalkeri</a> </div>
<div class="prodcut-price">
<div class="old-price"> <del>$295</del> </div>
<div class="new-price"> $134 </div>
</div>
<div class="prodcut-ratting-price">
<div class="prodcut-ratting"> <a href="#"><i class="fa fa-star"></i></a> <a href="#"><i class="fa fa-star"></i></a> <a href="#"><i class="fa fa-star"></i></a> <a href="#"><i class="fa fa-star"></i></a> <a href="#"><i class="fa fa-star-o"></i></a> </div>
</div>
</div>
</div>
<!-- single product end-->
</div>
</div>
</div>
</div>
<!--on sale area end-->

            
            

		
$('.total-onsale-product-2').slick({
slidesToShow: 4,
slidesToScroll: 1,
autoplay: false,
autoplaySpeed: 5000,
dots: true,
arrows: false,
responsive: [
{  breakpoint: 1169,  settings: { slidesToShow: 4,  }  },
{  breakpoint: 969,   settings: { slidesToShow: 3,  }  },
{  breakpoint: 767,   settings: { slidesToShow: 2, }   },
{  breakpoint: 479,   settings: { slidesToShow: 1, }   },
]
});