<!-- ========== HERO ========== -->
<div class="bg-img-hero img-fluid bg-gradient-dark-1 mb-6 mb-xl-0" style="background-image: url(../../assets/img/900x506/img1.jpg);">
<div class="space-top-2 space-top-xl-4 px-4 px-md-5 px-lg-7 pb-lg-3">
<ul class="js-slick-carousel u-slick pl-0 mb-0" data-pagi-classes="text-center u-slick__pagination u-slick__pagination--v2 mt-6">
<li class="hero-slider">
<div class="d-block d-lg-flex media">
<div class="hero__body media-body align-self-center mb-4 mb-xl-0">
<p class="hero__pretitle text-uppercase text-gray-400 font-weight-bold">ONLY THIS WEEK</p>
<h2 class="hero__title font-size-15 d-flex mb-4">
<span class="hero__title--1 font-weight-normal d-block text-white">Big</span>
<span class="hero__title--2 font-weight-bold d-block text-white ml-3"> Sales</span>
</h2>
<a href="#" class="btn height-50 hero__btn bg-white text-dark rounded-0 btn-wide">Shop Now</a>
</div>
<img src="https://placehold.it/250x293" class="img-fluid">
</div>
</li>
<li class="hero-slider">
<div class="d-block d-lg-flex media">
<div class="hero__body media-body align-self-center mb-4 mb-xl-0">
<p class="hero__pretitle text-uppercase text-gray-400 font-weight-bold">ONLY THIS WEEK</p>
<h2 class="hero__title font-size-15 d-flex mb-4">
<span class="hero__title--1 font-weight-normal d-block text-white">Big</span>
<span class="hero__title--2 font-weight-bold d-block text-white ml-3"> Sales</span>
</h2>
<a href="#" class="btn height-50 hero__btn bg-white text-dark rounded-0 btn-wide">Shop Now</a>
</div>
<img src="https://placehold.it/250x293" class="img-fluid">
</div>
</li>
<li class="hero-slider">
<div class="d-block d-lg-flex media">
<div class="hero__body media-body align-self-center mb-4 mb-xl-0">
<p class="hero__pretitle text-uppercase text-gray-400 font-weight-bold">ONLY THIS WEEK</p>
<h2 class="hero__title font-size-15 d-flex m-4">
<span class="hero__title--1 font-weight-normal d-block text-white">Big</span>
<span class="hero__title--2 font-weight-bold d-block text-white ml-3"> Sales</span>
</h2>
<a href="#" class="btn height-50 hero__btn bg-white text-dark rounded-0 btn-wide">Shop Now</a>
</div>
<img src="https://placehold.it/250x293" class="img-fluid">
</div>
</li>
<li class="hero-slider">
<div class="d-block d-lg-flex media">
<div class="hero__body media-body align-self-center mb-4 mb-xl-0">
<p class="hero__pretitle text-uppercase text-gray-400 font-weight-bold">ONLY THIS WEEK</p>
<h2 class="hero__title font-size-15 d-flex mb-4">
<span class="hero__title--1 font-weight-normal d-block text-white">Big</span>
<span class="hero__title--2 font-weight-bold d-block text-white ml-3"> Sales</span>
</h2>
<a href="#" class="btn height-50 hero__btn bg-white text-dark rounded-0 btn-wide">Shop Now</a>
</div>
<img src="https://placehold.it/250x293" class="img-fluid">
</div>
</li>
</ul>
</div>
</div>
<!-- ========== END HERO ========== -->
<!-- CSS Implementing Plugins -->
<link rel="stylesheet" href="../../assets/vendor/slick-carousel/slick/slick.css">
<!-- JS Implementing Plugins -->
<script src="../../assets/vendor/slick-carousel/slick/slick.js"></script>
<!-- JS Bookworm -->
<script src="../../assets/js/components/hs.slick-carousel.js"></script>
<!-- JS Plugins Init. -->
<script>
$(document).on('ready', function () {
// initialization of slick carousel
$.HSCore.components.HSSlickCarousel.init('.js-slick-carousel');
});
</script>