<!-- Hero -->
<div class="position-relative">
<!-- Swiper Main Slider -->
<div class="js-swiper-shop-classic-hero swiper bg-light">
<div class="swiper-wrapper">
<!-- Slide -->
<div class="swiper-slide">
<!-- Container -->
<div class="container content-space-t-2 content-space-b-3">
<div class="row align-items-lg-center">
<div class="col-lg-5 order-lg-2 mb-7 mb-lg-0">
<div class="mb-6">
<h1 class="display-4 mb-4">Front original design cap</h1>
<p>As well as being game-changers when it comes to technical innovation, Front has some of the bestselling cap in its locker.</p>
</div>
<div class="d-flex gap-2">
<a class="btn btn-primary rounded-pill" href="#">$59 - Add to cart</a>
<a class="btn btn-outline-primary btn-icon rounded-circle" href="#" data-bs-toggle="tooltip" data-bs-placement="top" title="Save for later">
<i class="bi-heart-fill"></i>
</a>
</div>
</div>
<!-- End Col -->
<div class="col-lg-6 order-lg-1">
<div class="w-75 mx-auto">
<img class="img-fluid" src="../assets/img/mockups/img5.png" alt="Image Description">
</div>
</div>
<!-- End Col -->
</div>
<!-- End Row -->
</div>
<!-- End Container -->
</div>
<!-- End Slide -->
<!-- Slide -->
<div class="swiper-slide">
<!-- Container -->
<div class="container content-space-t-2 content-space-b-3">
<div class="row align-items-lg-center">
<div class="col-lg-5 order-lg-2 mb-7 mb-lg-0">
<div class="mb-6">
<h2 class="display-4 mb-4">Apple iPad Pro</h2>
<p>It's all new, all screen, and all powerful. Completely redesigned and packed with our most advanced technology, it will make you rethink what iPad is capable of.</p>
</div>
<div class="d-flex gap-2">
<a class="btn btn-primary rounded-pill" href="#">$799 - Add to cart</a>
<a class="btn btn-outline-primary btn-icon rounded-circle" href="#" data-bs-toggle="tooltip" data-bs-placement="top" title="Save for later">
<i class="bi-heart-fill"></i>
</a>
</div>
</div>
<!-- End Col -->
<div class="col-lg-6 order-lg-1">
<div class="w-75 mx-auto">
<img class="img-fluid" src="../assets/img/mockups/img6.png" alt="Image Description">
</div>
</div>
<!-- End Col -->
</div>
<!-- End Row -->
</div>
<!-- End Container -->
</div>
<!-- End Slide -->
<!-- Slide -->
<div class="swiper-slide">
<!-- Container -->
<div class="container content-space-t-2 content-space-b-3">
<div class="row align-items-lg-center">
<div class="col-lg-5 order-lg-2 mb-7 mb-lg-0">
<div class="mb-6">
<h3 class="display-4 mb-4">Celio hoodie</h3>
<p>Founded in 1985, French label Celio channels 30 years of expertise into its contemporary menswear range. Expect fly style for a city or beach with its denim shorts, chinos and printed jersey.</p>
</div>
<div class="d-flex gap-2">
<a class="btn btn-primary rounded-pill" href="#">$15 - Add to cart</a>
<a class="btn btn-outline-primary btn-icon rounded-circle" href="#" data-bs-toggle="tooltip" data-bs-placement="top" title="Save for later">
<i class="bi-heart-fill"></i>
</a>
</div>
</div>
<!-- End Col -->
<div class="col-lg-6 order-lg-1">
<div class="w-75 mx-auto">
<img class="img-fluid" src="../assets/img/mockups/img1.png" alt="Image Description">
</div>
</div>
<!-- End Col -->
</div>
<!-- End Row -->
</div>
<!-- End Container -->
</div>
<!-- End Slide -->
</div>
<!-- Arrows -->
<div class="js-swiper-shop-classic-hero-button-next swiper-button-next"></div>
<div class="js-swiper-shop-classic-hero-button-prev swiper-button-prev"></div>
</div>
<!-- End Swiper Main Slider -->
<!-- Swiper Thumbs Slider -->
<div class="position-absolute bottom-0 start-0 end-0 mb-3">
<div class="js-swiper-shop-hero-thumbs swiper" style="max-width: 13rem;">
<div class="swiper-wrapper">
<!-- Slide -->
<div class="swiper-slide">
<a class="js-swiper-thumb-progress swiper-thumb-progress-avatar" href="javascript:;" tabindex="0">
<img class="swiper-thumb-progress-avatar-img" src="../assets/img/160x160/img11.jpg" alt="Image Description">
</a>
</div>
<!-- End Slide -->
<!-- Slide -->
<div class="swiper-slide">
<a class="js-swiper-thumb-progress swiper-thumb-progress-avatar" href="javascript:;" tabindex="0">
<img class="swiper-thumb-progress-avatar-img" src="../assets/img/160x160/img14.jpg" alt="Image Description">
</a>
</div>
<!-- End Slide -->
<!-- Slide -->
<div class="swiper-slide">
<a class="js-swiper-thumb-progress swiper-thumb-progress-avatar" href="javascript:;" tabindex="0">
<img class="swiper-thumb-progress-avatar-img" src="../assets/img/160x160/img15.jpg" alt="Image Description">
</a>
</div>
<!-- End Slide -->
</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-shop-hero-thumbs', {
watchSlidesVisibility: true,
watchSlidesProgress: true,
history: false,
slidesPerView: 3,
spaceBetween: 15,
on: {
beforeInit: (swiper) => {
const css = `.swiper-slide-thumb-active .swiper-thumb-progress .swiper-thumb-progress-path {
opacity: 1;
-webkit-animation: ${swiper.originalParams.autoplay.delay}ms linear 0ms forwards swiperThumbProgressDash;
animation: ${swiper.originalParams.autoplay.delay}ms linear 0ms forwards swiperThumbProgressDash;
}`
style = document.createElement('style')
document.head.appendChild(style)
style.type = 'text/css'
style.appendChild(document.createTextNode(css));
swiper.el.querySelectorAll('.js-swiper-thumb-progress')
.forEach(slide => {
slide.insertAdjacentHTML('beforeend', '<span class="swiper-thumb-progress"><svg version="1.1" viewBox="0 0 160 160"><path class="swiper-thumb-progress-path" d="M 79.98452083651917 4.000001576345426 A 76 76 0 1 1 79.89443752470656 4.0000733121155605 Z"></path></svg></span>')
})
},
},
});
var swiper = new Swiper('.js-swiper-shop-classic-hero',{
autoplay: true,
loop: true,
navigation: {
nextEl: '.js-swiper-shop-classic-hero-button-next',
prevEl: '.js-swiper-shop-classic-hero-button-prev',
},
thumbs: {
swiper: sliderThumbs
}
});
})()
</script>
