<!-- Hero -->
<div class="position-relative">
<!-- Swiper Main Slider -->
<div class="js-swiper-blog-journal-hero swiper">
<div class="swiper-wrapper">
<div class="swiper-slide d-flex gradient-x-overlay-sm-dark bg-img-start" style="background-image: url(../assets/img/1920x1080/img3.jpg); min-height: 40rem;">
<!-- Container -->
<div class="container d-flex align-items-center" style="min-height: 40rem;">
<div class="w-lg-50 me-3">
<!-- Media -->
<div class="d-flex align-items-center mb-3">
<div class="flex-shrink-0">
<div class="avatar avatar-circle">
<img class="avatar-img" src="../assets/img/160x160/img10.jpg" alt="Image Description">
</div>
</div>
<div class="flex-grow-1 ms-3">
<a class="text-white" href="../blog-article.html">Christina Kray</a>
</div>
</div>
<!-- End Media -->
<div class="mb-5">
<h2 class="h1 text-white">Front Interview with a Lead Designer of the Hubble</h2>
</div>
<a class="btn btn-primary btn-transition" href="../blog-article.html">Read article <i class="bi-chevron-right small ms-1"></i></a>
</div>
</div>
<!-- End Container -->
</div>
<div class="swiper-slide d-flex gradient-x-overlay-sm-dark bg-img-start" style="background-image: url(../assets/img/1920x1080/img5.jpg); min-height: 40rem;">
<!-- Container -->
<div class="container d-flex align-items-center" style="min-height: 40rem;">
<div class="w-lg-50 me-3">
<!-- Media -->
<div class="d-flex align-items-center mb-3">
<div class="flex-shrink-0">
<div class="avatar avatar-circle">
<img class="avatar-img" src="../assets/img/160x160/img10.jpg" alt="Image Description">
</div>
</div>
<div class="flex-grow-1 ms-3">
<a class="text-white" href="../blog-article.html">Christina Kray</a>
</div>
</div>
<!-- End Media -->
<div class="mb-5">
<h2 class="h1 text-white">Front Corporate - let's work together</h2>
</div>
<a class="btn btn-primary btn-transition" href="../blog-article.html">Read article <i class="bi-chevron-right small ms-1"></i></a>
</div>
</div>
<!-- End Container -->
</div>
<div class="swiper-slide d-flex gradient-x-overlay-sm-dark bg-img-start" style="background-image: url(../assets/img/1920x1080/img4.jpg); min-height: 40rem;">
<!-- Container -->
<div class="container d-flex align-items-center" style="min-height: 40rem;">
<div class="w-lg-50 me-3">
<!-- Media -->
<div class="d-flex align-items-center mb-3">
<div class="flex-shrink-0">
<div class="avatar avatar-circle">
<img class="avatar-img" src="../assets/img/160x160/img4.jpg" alt="Image Description">
</div>
</div>
<div class="flex-grow-1 ms-3">
<a class="text-white" href="../blog-article.html">Jeff Fisher</a>
</div>
</div>
<!-- End Media -->
<div class="mb-5">
<h2 class="h1 text-white">How Google Assistant now helps you record stories</h2>
</div>
<a class="btn btn-primary btn-transition" href="../blog-article.html">Read article <i class="bi-chevron-right small ms-1"></i></a>
</div>
</div>
<!-- End Container -->
</div>
</div>
<!-- Swiper Pagination -->
<div class="js-swiper-blog-journal-hero-pagination swiper-pagination swiper-pagination-light swiper-pagination-vertical swiper-pagination-middle-y-end me-3 d-lg-none"></div>
</div>
<!-- End Swiper Main Slider -->
<!-- Swiper Thumbs Slider -->
<div class="d-none d-lg-block container translate-middle-y position-absolute top-50 start-0 end-0 zi-2">
<div class="translate-middle-y position-absolute top-50 end-0">
<div class="js-swiper-blog-journal-hero-thumbs swiper" style="opacity:0;max-width: 13rem;">
<div class="swiper-wrapper">
<!-- Slide -->
<div class="swiper-slide swiper-pagination-progress swiper-pagination-progress-light">
<p class="text-white">Front Interview with a Lead Designer of the Hubble</p>
<div class="swiper-pagination-progress-body">
<div class="js-swiper-pagination-progress-body-helper swiper-pagination-progress-body-helper"></div>
</div>
</div>
<!-- End Slide -->
<!-- Slide -->
<div class="swiper-slide swiper-pagination-progress swiper-pagination-progress-light">
<p class="text-white">Front Corporate - let's work together</p>
<div class="swiper-pagination-progress-body">
<div class="js-swiper-pagination-progress-body-helper swiper-pagination-progress-body-helper"></div>
</div>
</div>
<!-- End Slide -->
<!-- Slide -->
<div class="swiper-slide swiper-pagination-progress swiper-pagination-progress-light">
<p class="text-white">How Google Assistant now helps you record stories</p>
<div class="swiper-pagination-progress-body">
<div class="js-swiper-pagination-progress-body-helper swiper-pagination-progress-body-helper"></div>
</div>
</div>
<!-- End Slide -->
</div>
</div>
</div>
</div>
<!-- End Swiper Thumbs Slider -->
</div>
<!-- End Hero -->
<link rel="stylesheet" href="../node_modules/swiper/swiper-bundle.min.css">
<!-- JS Implementing Plugins -->
<script src="../node_modules/swiper/swiper-bundle.min.js"></script>
<!-- JS Plugins Init. -->
<script>
(function() {
// INITIALIZATION OF SWIPER
// =======================================================
var sliderThumbs = new Swiper('.js-swiper-blog-journal-hero-thumbs', {
direction: 'vertical',
watchSlidesVisibility: true,
watchSlidesProgress: true,
slidesPerView: 3,
spaceBetween: 100,
history: false,
on: {
'afterInit': function (swiper) {
swiper.el.style.opacity = 1
swiper.el.querySelectorAll('.js-swiper-pagination-progress-body-helper')
.forEach($progress => $progress.style.transitionDuration = `${swiper.params.autoplay.delay}ms`)
}
}
});
var swiper = new Swiper('.js-swiper-blog-journal-hero',{
effect: 'fade',
autoplay: true,
loop: true,
pagination: {
el: '.js-swiper-blog-journal-hero-pagination',
clickable: true,
},
thumbs: {
swiper: sliderThumbs
}
});
})()
</script>
