<!--Hero Slider -->
<section class="mb-6 pb-xl-1">
<div class="js-slick-carousel"
data-hs-slick-carousel-options='{
"dots": true,
"dotsClass": "slick-pagination slick-pagination-v2 mt-2"
}'>
<div class="bg-img-hero min-h-320" style="background-image: url(../../assets/img/1130x320/img1.jpg); height: 320px;">
<div class="container space-top-2 px-md-7">
<div class="pt-2">
<div class="display-13 font-weight-semi-bold mb-1 pb-1">
<a href="#" class="text-red-3">Marco Polo</a>
</div>
<div class="mb-3">
<ul class="list-unstyled nav nav-meta flex-nowrap flex-md-wrap overflow-auto overflow-md-hidden justify-content-start">
<li class="font-size-13 flex-shrink-0 flex-shrink-md-1">
<a href="#" class="text-dark">Adventures</a>
<a href="#" class="text-dark">Drama</a>
<a href="#" class="text-dark">History</a>
</li>
<li class="font-size-13 flex-shrink-0 flex-shrink-md-1">2020</li>
<li class="font-size-13 flex-shrink-0 flex-shrink-md-1 font-secondary">10 Episodes</li>
</ul>
</div>
<div class="d-md-flex">
<a href="#" class="btn btn-primary d-flex align-items-center justify-content-center h-52rem
w-100 w-md-173rem mb-3 mb-md-0" tabindex="0">WATCH NOW</a>
<a href="#" class="btn btn-outline-light ml-md-3 d-flex align-items-center justify-content-center h-52rem
w-100 w-md-173rem" tabindex="0">+ PLAYLIST</a>
</div>
</div>
</div>
</div>
<div class="bg-img-hero min-h-320" style="background-image: url(../../assets/img/1130x320/img2.jpg); height: 320px;">
<div class="container space-top-2 px-md-7">
<div class="pt-2">
<div class="display-13 font-weight-semi-bold mb-1 pb-1">
<a href="#" class="text-red-3">Home Land</a>
</div>
<div class="mb-3">
<ul class="list-unstyled nav nav-meta flex-nowrap flex-md-wrap overflow-auto overflow-md-hidden justify-content-start">
<li class="font-size-13 flex-shrink-0 flex-shrink-md-1">
<a href="#" class="text-dark">Crime</a>
<a href="#" class="text-dark">Drama</a>
</li>
<li class="font-size-13 flex-shrink-0 flex-shrink-md-1">2020</li>
<li class="font-size-13 flex-shrink-0 flex-shrink-md-1 font-secondary">10 Episodes</li>
</ul>
</div>
<div class="d-md-flex">
<a href="#" class="btn btn-primary d-flex align-items-center justify-content-center h-52rem w-100 w-md-173rem mb-3 mb-md-0" tabindex="0">WATCH NOW</a>
<a href="#" class="btn btn-outline-light ml-md-3 d-flex align-items-center justify-content-center h-52rem w-100 w-md-173rem" tabindex="0">+ PLAYLIST</a>
</div>
</div>
</div>
</div>
<div class="bg-img-hero min-h-320" style="background-image: url(../../assets/img/1130x320/img3.jpg); height: 320px;">
<div class="container space-top-2 px-md-7">
<div class="pt-2">
<div class="display-13 font-weight-semi-bold mb-1 pb-1">
<a href="#" class="text-red-3">Sherlock</a>
</div>
<div class="mb-3">
<ul class="list-unstyled nav nav-meta flex-nowrap flex-md-wrap overflow-auto overflow-md-hidden justify-content-start">
<li class="font-size-13 flex-shrink-0 flex-shrink-md-1">
<a href="#" class="text-dark">Crime</a>
<a href="#" class="text-dark">Drama</a>
<a href="#" class="text-dark">Mystery</a>
</li>
<li class="font-size-13 flex-shrink-0 flex-shrink-md-1">2020</li>
<li class="font-size-13 flex-shrink-0 flex-shrink-md-1 font-secondary">6 Episodes</li>
</ul>
</div>
<div class="d-md-flex">
<a href="#" class="btn btn-primary d-flex align-items-center justify-content-center h-52rem w-100 w-md-173rem mb-3 mb-md-0" tabindex="0">WATCH NOW</a>
<a href="#" class="btn btn-outline-light ml-md-3 d-flex align-items-center justify-content-center h-52rem w-100 w-md-173rem" tabindex="0">+ PLAYLIST</a>
</div>
</div>
</div>
</div>
<div class="bg-img-hero min-h-320" style="background-image: url(../../assets/img/1130x320/img4.jpg); height: 320px;">
<div class="container space-top-2 px-md-7">
<div class="pt-2">
<div class="display-13 font-weight-semi-bold mb-1 pb-1">
<a href="#" class="text-red-3">Breaking Bad</a>
</div>
<div class="mb-3">
<ul class="list-unstyled nav nav-meta flex-nowrap flex-md-wrap overflow-auto overflow-md-hidden justify-content-start">
<li class="font-size-13 flex-shrink-0 flex-shrink-md-1">
<a href="#" class="text-dark">Crime</a>
<a href="#" class="text-dark">Drama</a>
</li>
<li class="font-size-13 flex-shrink-0 flex-shrink-md-1">2020</li>
<li class="font-size-13 flex-shrink-0 flex-shrink-md-1 font-secondary">10 Episodes</li>
</ul>
</div>
<div class="d-md-flex">
<a href="#" class="btn btn-primary d-flex align-items-center justify-content-center h-52rem w-100 w-md-173rem mb-3 mb-md-0" tabindex="0">WATCH NOW</a>
<a href="#" class="btn btn-outline-light ml-md-3 d-flex align-items-center justify-content-center h-52rem w-100 w-md-173rem" tabindex="0">+ PLAYLIST</a>
</div>
</div>
</div>
</div>
</div>
</section>
<!--End Hero Slider -->
<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 Vodi -->
<script src="../../assets/js/hs.slick-carousel.js"></script>
<!-- JS Plugins Init. -->
<script>
$(document).on('ready', function () {
// initialization of slick carousel
$('.js-slick-carousel').each(function() {
var slickCarousel = $.HSCore.components.HSSlickCarousel.init($(this));
});
});
</script>