Front original design cap
As well as being game-changers when it comes to technical innovation, Front has some of the bestselling cap in its locker.
Apple iPad Pro
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.
Celio hoodie
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.
<!-- 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="../assets/vendor/swiper/swiper-bundle.min.css">
<!-- JS Implementing Plugins -->
<script src="../assets/vendor/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>