Episodes Carousel
Component #1
Featured TV Episode Premieres
Featured TV Episode Premieres
Featured TV Episode Premieres
<!-- Tab Content -->
<div class="bg-gray-1100 dark space-2">
<div class="container px-md-4">
<!-- Nav -->
<div class="text-center tab-nav__v1">
<ul class="nav mb-7" role="tablist">
<li class="nav-item">
<a class="nav-link active" id="pills-one-code-features-tab-1" data-toggle="pill" href="#pills-one-code-features-1" role="tab" aria-controls="pills-one-code-features-1" aria-selected="true">Today</a>
</li>
<li class="nav-item">
<a class="nav-link" id="pills-two-code-features-tab-2" data-toggle="pill" href="#pills-two-code-features-2" role="tab" aria-controls="pills-two-code-features-2" aria-selected="false">This week</a>
</li>
<li class="nav-item">
<a class="nav-link" id="pills-three-code-features-tab-3" data-toggle="pill" href="#pills-three-code-features-3" role="tab" aria-controls="pills-three-code-features-3" aria-selected="false">Last 30 days</a>
</li>
</ul>
</div>
<!-- End Nav -->
<!-- Tab Content -->
<div class="tab-content slick__tab mb-12 mb-md-6">
<div class="tab-pane fade show active" id="pills-one-code-features-1" role="tabpanel" aria-labelledby="pills-one-code-features-tab-1">
<div class="row">
<div class="col-md-6 col-lg-7 col-xl-9 mb-2 mb-md-0">
<div class="js-slick-carousel slick slick-gutters-2"
data-hs-slick-carousel-options='{
"prevArrow": "<span class=\"fas fa-chevron-left dark slick-arrow slick-arrow-v1 slick-arrow-v11 left slick-arrow-right rounded-circle position-absolute bottom-0\"></span>",
"nextArrow": "<span class=\"fas fa-chevron-right dark slick-arrow slick-arrow-v1 slick-arrow-v11 right slick-arrow-right rounded-circle position-absolute\"></span>",
"slidesToShow": 4,
"responsive": [{
"breakpoint": 1199,
"settings": {
"slidesToShow": 2
}
}, {
"breakpoint": 996,
"settings": {
"slidesToShow": 1
}
}]
}'>
<div class="product">
<div class="product-image mb-1">
<a class="d-inline-block position-relative stretched-link" href="#">
<img class="img-fluid" src="../assets/img/225x127/img1.jpg" alt="Image Description">
</a>
</div>
<div class="product-title">
<a class="d-inline-block" href="#">
<span class="text-gray-1300 font-size-12">S01E01</span>
<div class="mb-0 font-weight-bold font-size-1">15 Million Merit</div>
</a>
</div>
</div>
<div class="product">
<div class="product-image mb-1">
<a class="d-inline-block position-relative stretched-link" href="#">
<img class="img-fluid" src="../assets/img/225x127/img2.jpg" alt="Image Description">
</a>
</div>
<div class="product-title">
<a class="d-inline-block" href="#">
<span class="text-gray-1300 font-size-12">S01E01</span>
<div class="mb-0 font-weight-bold font-size-1">All Backed Up</div>
</a>
</div>
</div>
<div class="product">
<div class="product-image mb-1">
<a class="d-inline-block position-relative stretched-link" href="#">
<img class="img-fluid" src="../assets/img/225x127/img3.jpg" alt="Image Description">
</a>
</div>
<div class="product-title">
<a class="d-inline-block" href="#">
<span class="text-gray-1300 font-size-12">S01E01</span>
<div class="mb-0 font-weight-bold font-size-1">Climax</div>
</a>
</div>
</div>
<div class="product">
<div class="product-image mb-1">
<a class="d-inline-block position-relative stretched-link" href="#">
<img class="img-fluid" src="../assets/img/225x127/img4.jpg" alt="Image Description">
</a>
</div>
<div class="product-title">
<a class="d-inline-block" href="#">
<span class="text-gray-1300 font-size-12">S01E01</span>
<div class="mb-0 font-weight-bold font-size-1">Chapter 3</div>
</a>
</div>
</div>
<div class="product">
<div class="product-image mb-1">
<a class="d-inline-block position-relative stretched-link" href="#">
<img class="img-fluid" src="../assets/img/225x127/img5.jpg" alt="Image Description">
</a>
</div>
<div class="product-title">
<a class="d-inline-block" href="#">
<span class="text-gray-1300 font-size-12">S01E01</span>
<div class="mb-0 font-weight-bold font-size-1">Home</div>
</a>
</div>
</div>
<div class="product">
<div class="product-image mb-1">
<a class="d-inline-block position-relative stretched-link" href="#">
<img class="img-fluid" src="../assets/img/225x127/img6.jpg" alt="Image Description">
</a>
</div>
<div class="product-title">
<a class="d-inline-block" href="#">
<span class="text-gray-1300 font-size-12">S01E01</span>
<div class="mb-0 font-weight-bold font-size-1">15 Million Merit</div>
</a>
</div>
</div>
<div class="product">
<div class="product-image mb-1">
<a class="d-inline-block position-relative stretched-link" href="#">
<img class="img-fluid" src="../assets/img/225x127/img1.jpg" alt="Image Description">
</a>
</div>
<div class="product-title">
<a class="d-inline-block" href="#">
<span class="text-gray-1300 font-size-12">S01E01</span>
<div class="mb-0 font-weight-bold font-size-1">15 Million Merit</div>
</a>
</div>
</div>
</div>
</div>
<div class="col-md-6 col-lg-5 col-xl-3 d-flex">
<header class="max-w-370 mb-xl-8 title-dash">
<h1 class="text-white display-7 mb-3 font-weight-semi-bold">Featured TV Episode Premieres</h1>
</header>
</div>
</div>
</div>
<div class="tab-pane fade" id="pills-two-code-features-2" role="tabpanel" aria-labelledby="pills-two-code-features-tab-2">
<div class="row">
<div class="col-md-6 col-lg-7 col-xl-9 mb-2 mb-md-0">
<div class="js-slick-carousel slick slick-gutters-2"
data-hs-slick-carousel-options='{
"prevArrow": "<span class=\"fas fa-chevron-left dark slick-arrow slick-arrow-v1 slick-arrow-v11 left slick-arrow-right rounded-circle position-absolute bottom-0\"></span>",
"nextArrow": "<span class=\"fas fa-chevron-right dark slick-arrow slick-arrow-v1 slick-arrow-v11 right slick-arrow-right rounded-circle position-absolute\"></span>",
"slidesToShow": 4,
"responsive": [{
"breakpoint": 1199,
"settings": {
"slidesToShow": 2
}
}, {
"breakpoint": 996,
"settings": {
"slidesToShow": 1
}
}]
}'>
<div class="product">
<div class="product-image mb-1">
<a class="d-inline-block position-relative stretched-link" href="#">
<img class="img-fluid" src="../assets/img/225x127/img6.jpg" alt="Image Description">
</a>
</div>
<div class="product-title">
<a class="d-inline-block" href="#">
<span class="text-gray-1300 font-size-12">S01E01</span>
<div class="mb-0 font-weight-bold font-size-1">15 Million Merit</div>
</a>
</div>
</div>
<div class="product">
<div class="product-image mb-1">
<a class="d-inline-block position-relative stretched-link" href="#">
<img class="img-fluid" src="../assets/img/225x127/img5.jpg" alt="Image Description">
</a>
</div>
<div class="product-title">
<a class="d-inline-block" href="#">
<span class="text-gray-1300 font-size-12">S01E01</span>
<div class="mb-0 font-weight-bold font-size-1">All Backed Up</div>
</a>
</div>
</div>
<div class="product">
<div class="product-image mb-1">
<a class="d-inline-block position-relative stretched-link" href="#">
<img class="img-fluid" src="../assets/img/225x127/img4.jpg" alt="Image Description">
</a>
</div>
<div class="product-title">
<a class="d-inline-block" href="#">
<span class="text-gray-1300 font-size-12">S01E01</span>
<div class="mb-0 font-weight-bold font-size-1">Climax</div>
</a>
</div>
</div>
<div class="product">
<div class="product-image mb-1">
<a class="d-inline-block position-relative stretched-link" href="#">
<img class="img-fluid" src="../assets/img/225x127/img3.jpg" alt="Image Description">
</a>
</div>
<div class="product-title">
<a class="d-inline-block" href="#">
<span class="text-gray-1300 font-size-12">S01E01</span>
<div class="mb-0 font-weight-bold font-size-1">Chapter 3</div>
</a>
</div>
</div>
<div class="product">
<div class="product-image mb-1">
<a class="d-inline-block position-relative stretched-link" href="#">
<img class="img-fluid" src="../assets/img/225x127/img2.jpg" alt="Image Description">
</a>
</div>
<div class="product-title">
<a class="d-inline-block" href="#">
<span class="text-gray-1300 font-size-12">S01E01</span>
<div class="mb-0 font-weight-bold font-size-1">Home</div>
</a>
</div>
</div>
<div class="product">
<div class="product-image mb-1">
<a class="d-inline-block position-relative stretched-link" href="#">
<img class="img-fluid" src="../assets/img/225x127/img6.jpg" alt="Image Description">
</a>
</div>
<div class="product-title">
<a class="d-inline-block" href="#">
<span class="text-gray-1300 font-size-12">S01E01</span>
<div class="mb-0 font-weight-bold font-size-1">15 Million Merit</div>
</a>
</div>
</div>
<div class="product">
<div class="product-image mb-1">
<a class="d-inline-block position-relative stretched-link" href="#">
<img class="img-fluid" src="../assets/img/225x127/img1.jpg" alt="Image Description">
</a>
</div>
<div class="product-title">
<a class="d-inline-block" href="#">
<span class="text-gray-1300 font-size-12">S01E01</span>
<div class="mb-0 font-weight-bold font-size-1">15 Million Merit</div>
</a>
</div>
</div>
</div>
</div>
<div class="col-md-6 col-lg-5 col-xl-3 d-flex">
<header class="max-w-370 mb-xl-8 title-dash">
<h1 class="text-white display-7 mb-3 font-weight-semi-bold">Featured TV Episode Premieres</h1>
</header>
</div>
</div>
</div>
<div class="tab-pane fade" id="pills-three-code-features-3" role="tabpanel" aria-labelledby="pills-three-code-features-tab-3">
<div class="row">
<div class="col-md-6 col-lg-7 col-xl-9 mb-2 mb-md-0">
<div class="js-slick-carousel slick slick-gutters-2"
data-hs-slick-carousel-options='{
"prevArrow": "<span class=\"fas fa-chevron-left dark slick-arrow slick-arrow-v1 slick-arrow-v11 left slick-arrow-right rounded-circle position-absolute bottom-0\"></span>",
"nextArrow": "<span class=\"fas fa-chevron-right dark slick-arrow slick-arrow-v1 slick-arrow-v11 right slick-arrow-right rounded-circle position-absolute\"></span>",
"slidesToShow": 4,
"responsive": [{
"breakpoint": 1199,
"settings": {
"slidesToShow": 2
}
}, {
"breakpoint": 996,
"settings": {
"slidesToShow": 1
}
}]
}'>
<div class="product">
<div class="product-image mb-1">
<a class="d-inline-block position-relative stretched-link" href="#">
<img class="img-fluid" src="../assets/img/225x127/img1.jpg" alt="Image Description">
</a>
</div>
<div class="product-title">
<a class="d-inline-block" href="#">
<span class="text-gray-1300 font-size-12">S01E01</span>
<div class="mb-0 font-weight-bold font-size-1">15 Million Merit</div>
</a>
</div>
</div>
<div class="product">
<div class="product-image mb-1">
<a class="d-inline-block position-relative stretched-link" href="#">
<img class="img-fluid" src="../assets/img/225x127/img2.jpg" alt="Image Description">
</a>
</div>
<div class="product-title">
<a class="d-inline-block" href="#">
<span class="text-gray-1300 font-size-12">S01E01</span>
<div class="mb-0 font-weight-bold font-size-1">All Backed Up</div>
</a>
</div>
</div>
<div class="product">
<div class="product-image mb-1">
<a class="d-inline-block position-relative stretched-link" href="#">
<img class="img-fluid" src="../assets/img/225x127/img3.jpg" alt="Image Description">
</a>
</div>
<div class="product-title">
<a class="d-inline-block" href="#">
<span class="text-gray-1300 font-size-12">S01E01</span>
<div class="mb-0 font-weight-bold font-size-1">Climax</div>
</a>
</div>
</div>
<div class="product">
<div class="product-image mb-1">
<a class="d-inline-block position-relative stretched-link" href="#">
<img class="img-fluid" src="../assets/img/225x127/img4.jpg" alt="Image Description">
</a>
</div>
<div class="product-title">
<a class="d-inline-block" href="#">
<span class="text-gray-1300 font-size-12">S01E01</span>
<div class="mb-0 font-weight-bold font-size-1">Chapter 3</div>
</a>
</div>
</div>
<div class="product">
<div class="product-image mb-1">
<a class="d-inline-block position-relative stretched-link" href="#">
<img class="img-fluid" src="../assets/img/225x127/img5.jpg" alt="Image Description">
</a>
</div>
<div class="product-title">
<a class="d-inline-block" href="#">
<span class="text-gray-1300 font-size-12">S01E01</span>
<div class="mb-0 font-weight-bold font-size-1">Home</div>
</a>
</div>
</div>
<div class="product">
<div class="product-image mb-1">
<a class="d-inline-block position-relative stretched-link" href="#">
<img class="img-fluid" src="../assets/img/225x127/img6.jpg" alt="Image Description">
</a>
</div>
<div class="product-title">
<a class="d-inline-block" href="#">
<span class="text-gray-1300 font-size-12">S01E01</span>
<div class="mb-0 font-weight-bold font-size-1">15 Million Merit</div>
</a>
</div>
</div>
<div class="product">
<div class="product-image mb-1">
<a class="d-inline-block position-relative stretched-link" href="#">
<img class="img-fluid" src="../assets/img/225x127/img1.jpg" alt="Image Description">
</a>
</div>
<div class="product-title">
<a class="d-inline-block" href="#">
<span class="text-gray-1300 font-size-12">S01E01</span>
<div class="mb-0 font-weight-bold font-size-1">15 Million Merit</div>
</a>
</div>
</div>
</div>
</div>
<div class="col-md-6 col-lg-5 col-xl-3 d-flex">
<header class="max-w-370 mb-xl-8 title-dash">
<h1 class="text-white display-7 mb-3 font-weight-semi-bold">Featured TV Episode Premieres</h1>
</header>
</div>
</div>
</div>
</div>
<!-- End Tab Content -->
</div>
</div>
<!-- End Tab Content -->
<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>
Component #2
Newest Episodes
<!-- Carousel Content -->
<section>
<div class="bg-gray-1100 space-1">
<div class="container px-md-6 px-xl-7 px-wd-6 pb-3 pt-1">
<div class="border-bottom border-g-1200-op mb-1 pb-3">
<div class="home-section">
<header class="d-md-flex align-items-center justify-content-between mb-5 w-100">
<div class="font-size-24 font-weight-medium mb-3 mb-md-0 text-white font-secondary">Newest Episodes</div>
<div class="d-none d-lg-block border-top col p-0 mx-3 border-gray-6830"></div>
<div class="tab-nav__v2">
<ul class="nav justify-content-start flex-nowrap flex-lg-wrap overflow-auto" role="tab-list">
<li class="nav-item flex-shrink-0 flex-shrink-md-1">
<a class="nav-link active" id="pills-one-code-features-example4-tab" data-toggle="pill" href="#pills-one-code-features-example4" role="tab" aria-controls="pills-one-code-features-example4" aria-selected="true">This Week</a>
</li>
<li class="nav-item flex-shrink-0 flex-shrink-md-1">
<a class="nav-link" id="pills-two-code-features-example4-tab" data-toggle="pill" href="#pills-two-code-features-example4" role="tab" aria-controls="pills-two-code-features-example4" aria-selected="false">This Month</a>
</li>
<li class="nav-item flex-shrink-0 flex-shrink-md-1">
<a class="nav-link" id="pills-three-code-features-example4-tab" data-toggle="pill" href="#pills-three-code-features-example4" role="tab" aria-controls="pills-three-code-features-example4" aria-selected="false">Last 3 Month</a>
</li>
</ul>
</div>
</header>
</div>
<div class="tab-content slick__tab">
<div class="tab-pane fade show active dark" id="pills-one-code-features-example4" role="tab-panel" aria-labelledby="pills-one-code-features-example4-tab">
<div class="js-slick-carousel slick slick-gutters-2 position-relative"
data-hs-slick-carousel-options='{
"prevArrow": "<span class=\" slick-arrow slick-arrow-svg-left left slick-arrow-right slick-arrow-centered-y position-absolute left-0 ml-n4\"></span>",
"nextArrow": "<span class=\" slick-arrow slick-arrow-svg-right right slick-arrow-right slick-arrow-centered-y position-absolute mr-lg-n5 mr-wd-n7\"></span>",
"slidesToShow": 5,
"responsive": [{
"breakpoint": 1199,
"settings": {
"slidesToShow": 3
}
}, {
"breakpoint": 768,
"settings": {
"slidesToShow": 1
}
}]
}'>
<div class="product position-relative">
<div class="gradient-x-overlay-1">
<div>
<img class="img-fluid" src="../assets/img/970x550/img1.jpg" alt="Image-Descrition">
</div>
<div class="position-absolute bottom-0 pl-3 pb-2">
<a class="d-inline-block" href="#">
<span class="text-gray-1300 font-size-12">S01E03</span>
</a>
<div class="product-title font-size-15 font-weight-bold mb-0">
<a href="#">Birthday Month</a>
</div>
</div>
</div>
</div>
<div class="product position-relative">
<div class="gradient-x-overlay-1">
<div>
<img class="img-fluid" src="../assets/img/970x550/img5.jpg" alt="Image-Descrition">
</div>
<div class="position-absolute bottom-0 pl-3 pb-2">
<a class="d-inline-block" href="#">
<span class="text-gray-1300 font-size-12">S02E01</span>
</a>
<div class="product-title font-size-15 font-weight-bold mb-0">
<a href="#">Birthday Alive in Tucson</a>
</div>
</div>
</div>
</div>
<div class="product position-relative">
<div class="gradient-x-overlay-1">
<div>
<img class="img-fluid" src="../assets/img/970x550/img6.jpg" alt="Image-Descrition">
</div>
<div class="position-absolute bottom-0 pl-3 pb-2">
<a class="d-inline-block" href="#">
<span class="text-gray-1300 font-size-12">S02E03</span>
</a>
<div class="product-title font-size-15 font-weight-bold mb-0">
<a href="#">Fools Night Out</a>
</div>
</div>
</div>
</div>
<div class="product position-relative">
<div class="gradient-x-overlay-1">
<div>
<img class="img-fluid" src="../assets/img/970x550/img7.jpg" alt="Image-Descrition">
</div>
<div class="position-absolute bottom-0 pl-3 pb-2">
<a class="d-inline-block" href="#">
<span class="text-gray-1300 font-size-12">S05E02</span>
</a>
<div class="product-title font-size-15 font-weight-bold mb-0">
<a href="#">The Departed Part 2</a>
</div>
</div>
</div>
</div>
<div class="product position-relative">
<div class="gradient-x-overlay-1">
<div>
<img class="img-fluid" src="../assets/img/970x550/img8.jpg" alt="Image-Descrition">
</div>
<div class="position-absolute bottom-0 pl-3 pb-2">
<a class="d-inline-block" href="#">
<span class="text-gray-1300 font-size-12">S01E05</span>
</a>
<div class="product-title font-size-15 font-weight-bold mb-0">
<a href="#">Nobody Beats the Biebs</a>
</div>
</div>
</div>
</div>
<div class="product position-relative">
<div class="gradient-x-overlay-1">
<div>
<img class="img-fluid" src="../assets/img/970x550/img9.jpg" alt="Image-Descrition">
</div>
<div class="position-absolute bottom-0 pl-3 pb-2">
<a class="d-inline-block" href="#">
<span class="text-gray-1300 font-size-12">S02E02</span>
</a>
<div class="product-title font-size-15 font-weight-bold mb-0">
<a href="#">The Elephant</a>
</div>
</div>
</div>
</div>
<div class="product position-relative">
<div class="gradient-x-overlay-1">
<div>
<img class="img-fluid" src="../assets/img/970x550/img10.jpg" alt="Image-Descrition">
</div>
<div class="position-absolute bottom-0 pl-3 pb-2">
<a class="d-inline-block" href="#">
<span class="text-gray-1300 font-size-12">S01E04</span>
</a>
<div class="product-title font-size-15 font-weight-bold mb-0">
<a href="#">The Scarlet Eye</a>
</div>
</div>
</div>
</div>
</div>
</div>
<div class="tab-pane fade dark" id="pills-two-code-features-example4" role="tab-panel" aria-labelledby="pills-two-code-features-example4-tab">
<div class="js-slick-carousel slick slick-gutters-2 position-relative"
data-hs-slick-carousel-options='{
"prevArrow": "<span class=\" slick-arrow slick-arrow-svg-left left slick-arrow-right slick-arrow-centered-y position-absolute left-0 ml-n4\"></span>",
"nextArrow": "<span class=\" slick-arrow slick-arrow-svg-right right slick-arrow-right slick-arrow-centered-y position-absolute mr-lg-n5 mr-wd-n7\"></span>",
"slidesToShow": 5,
"responsive": [{
"breakpoint": 1199,
"settings": {
"slidesToShow": 3
}
}, {
"breakpoint": 768,
"settings": {
"slidesToShow": 1
}
}]
}'>
<div class="product position-relative">
<div class="gradient-x-overlay-1">
<div>
<img class="img-fluid" src="../assets/img/970x550/img5.jpg" alt="Image-Descrition">
</div>
<div class="position-absolute bottom-0 pl-3 pb-2">
<a class="d-inline-block" href="#">
<span class="text-gray-1300 font-size-12">S01E03</span>
</a>
<div class="product-title font-size-15 font-weight-bold mb-0">
<a href="#">Birthday Month</a>
</div>
</div>
</div>
</div>
<div class="product position-relative">
<div class="gradient-x-overlay-1">
<div>
<img class="img-fluid" src="../assets/img/970x550/img6.jpg" alt="Image-Descrition">
</div>
<div class="position-absolute bottom-0 pl-3 pb-2">
<a class="d-inline-block" href="#">
<span class="text-gray-1300 font-size-12">S02E01</span>
</a>
<div class="product-title font-size-15 font-weight-bold mb-0">
<a href="#">Birthday Alive in Tucson</a>
</div>
</div>
</div>
</div>
<div class="product position-relative">
<div class="gradient-x-overlay-1">
<div>
<img class="img-fluid" src="../assets/img/970x550/img7.jpg" alt="Image-Descrition">
</div>
<div class="position-absolute bottom-0 pl-3 pb-2">
<a class="d-inline-block" href="#">
<span class="text-gray-1300 font-size-12">S02E03</span>
</a>
<div class="product-title font-size-15 font-weight-bold mb-0">
<a href="#">Fools Night Out</a>
</div>
</div>
</div>
</div>
<div class="product position-relative">
<div class="gradient-x-overlay-1">
<div>
<img class="img-fluid" src="../assets/img/970x550/img8.jpg" alt="Image-Descrition">
</div>
<div class="position-absolute bottom-0 pl-3 pb-2">
<a class="d-inline-block" href="#">
<span class="text-gray-1300 font-size-12">S05E02</span>
</a>
<div class="product-title font-size-15 font-weight-bold mb-0">
<a href="#">The Departed Part 2</a>
</div>
</div>
</div>
</div>
<div class="product position-relative">
<div class="gradient-x-overlay-1">
<div>
<img class="img-fluid" src="../assets/img/970x550/img9.jpg" alt="Image-Descrition">
</div>
<div class="position-absolute bottom-0 pl-3 pb-2">
<a class="d-inline-block" href="#">
<span class="text-gray-1300 font-size-12">S01E05</span>
</a>
<div class="product-title font-size-15 font-weight-bold mb-0">
<a href="#">Nobody Beats the Biebs</a>
</div>
</div>
</div>
</div>
<div class="product position-relative">
<div class="gradient-x-overlay-1">
<div>
<img class="img-fluid" src="../assets/img/970x550/img1.jpg" alt="Image-Descrition">
</div>
<div class="position-absolute bottom-0 pl-3 pb-2">
<a class="d-inline-block" href="#">
<span class="text-gray-1300 font-size-12">S02E02</span>
</a>
<div class="product-title font-size-15 font-weight-bold mb-0">
<a href="#">The Elephant</a>
</div>
</div>
</div>
</div>
<div class="product position-relative">
<div class="gradient-x-overlay-1">
<div>
<img class="img-fluid" src="../assets/img/970x550/img10.jpg" alt="Image-Descrition">
</div>
<div class="position-absolute bottom-0 pl-3 pb-2">
<a class="d-inline-block" href="#">
<span class="text-gray-1300 font-size-12">S01E04</span>
</a>
<div class="product-title font-size-15 font-weight-bold mb-0">
<a href="#">The Scarlet Eye</a>
</div>
</div>
</div>
</div>
</div>
</div>
<div class="tab-pane fade dark" id="pills-three-code-features-example4" role="tab-panel" aria-labelledby="pills-three-code-features-example4-tab">
<div class="js-slick-carousel slick slick-gutters-2 position-relative"
data-hs-slick-carousel-options='{
"prevArrow": "<span class=\" slick-arrow slick-arrow-svg-left left slick-arrow-right slick-arrow-centered-y position-absolute left-0 ml-n4\"></span>",
"nextArrow": "<span class=\" slick-arrow slick-arrow-svg-right right slick-arrow-right slick-arrow-centered-y position-absolute mr-lg-n5 mr-wd-n7\"></span>",
"slidesToShow": 5,
"responsive": [{
"breakpoint": 1199,
"settings": {
"slidesToShow": 3
}
}, {
"breakpoint": 768,
"settings": {
"slidesToShow": 1
}
}]
}'>
<div class="product position-relative">
<div class="gradient-x-overlay-1">
<div>
<img class="img-fluid" src="../assets/img/970x550/img10.jpg" alt="Image-Descrition">
</div>
<div class="position-absolute bottom-0 pl-3 pb-2">
<a class="d-inline-block" href="#">
<span class="text-gray-1300 font-size-12">S01E03</span>
</a>
<div class="product-title font-size-15 font-weight-bold mb-0">
<a href="#">Birthday Month</a>
</div>
</div>
</div>
</div>
<div class="product position-relative">
<div class="gradient-x-overlay-1">
<div>
<img class="img-fluid" src="../assets/img/970x550/img1.jpg" alt="Image-Descrition">
</div>
<div class="position-absolute bottom-0 pl-3 pb-2">
<a class="d-inline-block" href="#">
<span class="text-gray-1300 font-size-12">S02E01</span>
</a>
<div class="product-title font-size-15 font-weight-bold mb-0">
<a href="#">Birthday Alive in Tucson</a>
</div>
</div>
</div>
</div>
<div class="product position-relative">
<div class="gradient-x-overlay-1">
<div>
<img class="img-fluid" src="../assets/img/970x550/img7.jpg" alt="Image-Descrition">
</div>
<div class="position-absolute bottom-0 pl-3 pb-2">
<a class="d-inline-block" href="#">
<span class="text-gray-1300 font-size-12">S02E03</span>
</a>
<div class="product-title font-size-15 font-weight-bold mb-0">
<a href="#">Fools Night Out</a>
</div>
</div>
</div>
</div>
<div class="product position-relative">
<div class="gradient-x-overlay-1">
<div>
<img class="img-fluid" src="../assets/img/970x550/img8.jpg" alt="Image-Descrition">
</div>
<div class="position-absolute bottom-0 pl-3 pb-2">
<a class="d-inline-block" href="#">
<span class="text-gray-1300 font-size-12">S05E02</span>
</a>
<div class="product-title font-size-15 font-weight-bold mb-0">
<a href="#">The Departed Part 2</a>
</div>
</div>
</div>
</div>
<div class="product position-relative">
<div class="gradient-x-overlay-1">
<div>
<img class="img-fluid" src="../assets/img/970x550/img9.jpg" alt="Image-Descrition">
</div>
<div class="position-absolute bottom-0 pl-3 pb-2">
<a class="d-inline-block" href="#">
<span class="text-gray-1300 font-size-12">S01E05</span>
</a>
<div class="product-title font-size-15 font-weight-bold mb-0">
<a href="#">Nobody Beats the Biebs</a>
</div>
</div>
</div>
</div>
<div class="product position-relative">
<div class="gradient-x-overlay-1">
<div>
<img class="img-fluid" src="../assets/img/970x550/img5.jpg" alt="Image-Descrition">
</div>
<div class="position-absolute bottom-0 pl-3 pb-2">
<a class="d-inline-block" href="#">
<span class="text-gray-1300 font-size-12">S02E02</span>
</a>
<div class="product-title font-size-15 font-weight-bold mb-0">
<a href="#">The Elephant</a>
</div>
</div>
</div>
</div>
<div class="product position-relative">
<div class="gradient-x-overlay-1">
<div>
<img class="img-fluid" src="../assets/img/970x550/img6.jpg" alt="Image-Descrition">
</div>
<div class="position-absolute bottom-0 pl-3 pb-2">
<a class="d-inline-block" href="#">
<span class="text-gray-1300 font-size-12">S01E04</span>
</a>
<div class="product-title font-size-15 font-weight-bold mb-0">
<a href="#">The Scarlet Eye</a>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
<div class="d-flex justify-content-end">
<a href="#" class="h-w-primary text-gray-1300 d-inline-flex align-items-center font-secondary font-weight-medium font-size-13">VIEW ALL
<svg class="ml-2" xmlns="http://www.w3.org/2000/svg" width="4" height="7"><path d="M3.979,3.703 C3.987,3.785 3.966,3.869 3.903,3.934 L1.038,6.901 C0.921,7.023 0.724,7.029 0.598,6.916 L0.143,6.506 C0.017,6.393 0.011,6.203 0.128,6.082 L2.190,3.946 C2.276,3.829 2.356,3.691 2.356,3.548 C2.356,3.214 1.947,2.885 1.947,2.885 L1.963,2.877 L0.080,0.905 C-0.036,0.784 -0.029,0.592 0.095,0.479 L0.547,0.068 C0.671,-0.045 0.867,-0.039 0.983,0.083 L3.823,3.057 C3.867,3.102 3.876,3.161 3.885,3.218 C3.945,3.267 3.988,3.334 3.988,3.416 L3.988,3.681 C3.988,3.690 3.979,3.694 3.979,3.703 Z" fill="rgb(148, 156, 176)"></path></svg>
</a>
</div>
</div>
</div>
</section>
<!-- End Carousel Content -->
<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>