<!-- Hero Slider -->
<div class="home-slider position-relative overflow-hidden">
<div id="sliderSyncingNav" class="js-slick-carousel slick"
data-hs-slick-carousel-options='{
"dots": true,
"dotsClass": "d-xl-none slick-pagination mb-3 position-absolute right-0 left-0 bottom-0 ",
"infinite": true,
"asNavFor": "#sliderSyncingThumb"
}'>
<div class="bg-img-hero d-flex align-items-center min-h-676rem slider-gradient" style="background-image: url(../../assets/img/1280x645/img1.jpg);">
<div class="mx-3 mx-md-5 mx-lg-10 col-xl-5 px-0">
<div class="mb-3 pb-1">
<ul class="list-unstyled nav nav-meta nav-meta__white">
<li class="">2020</li>
<li class=""><a href="#">Action,Animation,Family</a></li>
<li class="">2hr 13 mins</li>
</ul>
</div><h1 class="display-12 text-lh-1dot1 mb-6 max-w-565"><a href="#" class="h-w-primary">Fantastic Beasts and Where to Find Them</a></h1>
<div class="d-flex flex-column flex-md-row">
<a href="#" class="btn btn-primary px-6 py-3d btn-sm mb-3 mb-md-0">WATCH NOW</a>
<a href="#" class="btn btn-outline-light ml-md-4 px-6 py-3d btn-sm">+ PLAYLIST</a>
</div>
</div>
</div>
<div class="bg-img-hero d-flex align-items-center min-h-676rem slider-gradient" style="background-image: url(../../assets/img/1280x645/img2.jpg);">
<div class="mx-3 mx-md-5 mx-lg-10 ol-xl-6 px-0">
<div class="mb-3 pb-1">
<ul class="list-unstyled nav nav-meta nav-meta__white">
<li class="">2020</li>
<li class=""><a href="#">Action,Adventure,Romance</a></li>
<li class="">1hr 55 mins</li>
</ul>
</div>
<h1 class="display-12 text-lh-1dot1 max-w-565 mb-6"><a href="#" class="h-w-primary">The Convenient Groom</a></h1>
<div class="d-flex flex-column flex-md-row">
<a href="#" class="btn btn-primary px-6 py-3d btn-sm mb-3 mb-md-0">WATCH NOW</a>
<a href="#" class="btn btn-outline-light ml-md-4 px-6 py-3d btn-sm">+ PLAYLIST</a>
</div>
</div>
</div>
<div class="bg-img-hero d-flex align-items-center min-h-676rem slider-gradient" style="background-image: url(../../assets/img/1280x645/img3.jpg);">
<div class="mx-3 mx-md-5 mx-lg-10 col-xl-5 px-0">
<div class="mb-3 pb-1">
<ul class="list-unstyled nav nav-meta nav-meta__white">
<li class="">2020</li>
<li class=""><a href="#">Action,Sci-Fi</a></li>
<li class="">1hr 55 mins</li>
</ul>
</div>
<h1 class="display-12 text-lh-1dot1 max-w-565 mb-6"><a href="#" class="h-w-primary">Pacific Rim: Uprising</a></h1>
<div class="d-flexs flex-column flex-md-row">
<a href="#" class="btn btn-primary px-6 py-3d btn-sm mb-3 mb-md-0">WATCH NOW</a>
<a href="#" class="btn btn-outline-light ml-md-4 px-6 py-3d btn-sm">+ PLAYLIST</a>
</div>
</div>
</div>
<div class="bg-img-hero d-flex align-items-center min-h-676rem slider-gradient" style="background-image: url(../../assets/img/1280x645/img5.jpg);">
<div class="mx-3 mx-md-5 mx-lg-10 col-xl-5 px-0">
<div class="mb-3 pb-1">
<ul class="list-unstyled nav nav-meta nav-meta__white">
<li class="">2020</li>
<li class=""><a href="#">Action,documentry</a></li>
<li class="">1hr 55 mins</li>
</ul>
</div>
<h1 class="display-12 text-lh-1dot1 max-w-565 mb-6"><a href="#" class="h-w-primary">Paradigm Lost</a></h1>
<div class="d-flex flex-column flex-md-row">
<a href="#" class="btn btn-primary px-6 py-3d btn-sm mb-3 mb-md-0">WATCH NOW</a>
<a href="#" class="btn btn-outline-light ml-md-4 px-6 py-3d btn-sm">+ PLAYLIST</a>
</div>
</div>
</div>
<div class="bg-img-hero d-flex align-items-center min-h-676rem slider-gradient" style="background-image: url(../../assets/img/1280x645/img6.jpg);">
<div class="mx-3 mx-md-5 mx-lg-10 col-xl-5 px-0">
<div class="mb-3 pb-1">
<ul class="list-unstyled nav nav-meta nav-meta__white">
<li class="">2020</li>
<li class=""><a href="#">Action,Adventure,Crime</a></li>
<li class="">1hr 55 mins</li>
</ul>
</div>
<h1 class="display-12 text-lh-1dot1 max-w-565 mb-6"><a href="#" class="h-w-primary">A Walk Among The Tombstones</a></h1>
<div class="d-flex flex-column flex-md-row">
<a href="#" class="btn btn-primary px-6 py-3d btn-sm mb-3 mb-md-0">WATCH NOW</a>
<a href="#" class="btn btn-outline-light ml-md-4 px-6 py-3d btn-sm">+ PLAYLIST</a>
</div>
</div>
</div>
<div class="bg-img-hero d-flex align-items-center min-h-676rem slider-gradient" style="background-image: url(../../assets/img/1280x645/img4.jpg);">
<div class="mx-3 mx-md-5 mx-lg-10 col-xl-6 px-0">
<div class="mb-3 pb-1">
<ul class="list-unstyled nav nav-meta nav-meta__white">
<li class="">2020</li>
<li class=""><a href="#">Action,Comedy</a></li>
<li class="">1hr 55 mins</li>
</ul>
</div>
<h1 class="display-12 text-lh-1dot1 max-w-565 mb-6"><a href="#" class="h-w-primary">The Accountant</a></h1>
<div class="d-flex flex-column flex-md-row">
<a href="#" class="btn btn-primary px-6 py-3d btn-sm mb-3 mb-md-0">WATCH NOW</a>
<a href="#" class="btn btn-outline-light ml-md-4 px-6 py-3d btn-sm">+ PLAYLIST</a>
</div>
</div>
</div>
</div>
<div class="d-none d-xl-flex justify-content-center position-xl-absolute col-xl-7 col-wd-8 right-0 bottom-0 mb-xl-10 pb-xl-1">
<div id="sliderSyncingThumb" class="js-slick-carousel slick u-slick-bordered-primary slick-gutters-1 slick-transform-off"
data-hs-slick-carousel-options='{
"infinite": true,
"slidesToShow": 6,
"isThumbs": true,
"asNavFor": "#sliderSyncingNav",
"responsive": [{
"breakpoint": 1199,
"settings": {
"slidesToShow": 2
},
"breakpoint": 768,
"settings": {
"slidesToShow": 2
}
}]
}'>
<div class="my-1d position-relative" style="cursor: pointer;">
<div class="thumb-img">
<img class="img-fluid" style="height: 195px;" src="../../assets/img/78x118/img1.jpg" alt="Image Description">
</div>
</div>
<div class="my-1d position-relative" style="cursor: pointer;">
<div class="thumb-img">
<img class="img-fluid" style="height: 195px;" src="../../assets/img/78x118/img2.jpg" alt="Image Description">
</div>
</div>
<div class="my-1d position-relative" style="cursor: pointer;">
<div class="thumb-img">
<img class="img-fluid" style="height: 195px;" src="../../assets/img/78x118/img3.jpg" alt="Image Description">
</div>
</div>
<div class="my-1d position-relative" style="cursor: pointer;">
<div class="thumb-img">
<img class="img-fluid" style="height: 195px;" src="../../assets/img/78x118/img4.jpg" alt="Image Description">
</div>
</div>
<div class="my-1d position-relative" style="cursor: pointer;">
<div class="thumb-img">
<img class="img-fluid" style="height: 195px;" src="../../assets/img/78x118/img5.jpg" alt="Image Description">
</div>
</div>
<div class="my-1d position-relative" style="cursor: pointer;">
<div class="thumb-img">
<img class="img-fluid" style="height: 195px;" src="../../assets/img/78x118/img6.jpg" alt="Image Description">
</div>
</div>
</div>
</div>
</div>
<!-- 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>
