Front is a
Self-mastering template
It is an
Easy business with Front template
01.
Advanced editing
Modify any aspect of your website or pages with Front.
Next: Fully responsive
Let visitors to view your content from their choice of device.
02.
Fully responsive
Let visitors to view your content from their choice of device.
Prev: Advanced editing
Modify any aspect of your website with Front
<!-- Swiper Slider -->
<div class="border-bottom">
<!-- Main Slider -->
<div class="js-swiper-main swiper">
<div class="swiper-wrapper">
<!-- Slide -->
<div class="swiper-slide gradient-y-overlay-sm-gray-900 bg-img-start" style="background-image: url(../assets/img/1920x800/img2.jpg);">
<div class="container d-md-flex align-items-md-center vh-md-70 content-space-t-4 content-space-b-3 content-space-md-0">
<div class="w-75 w-lg-50">
<h3 class="text-white">Front is a</h3>
<h1 class="display-4 text-white mb-0">Self-mastering template</h1>
</div>
</div>
</div>
<!-- End Slide -->
<!-- Slide -->
<div class="swiper-slide gradient-y-overlay-sm-gray-900 bg-img-start" style="background-image: url(../assets/img/1920x800/img3.jpg);">
<div class="container d-md-flex align-items-md-center vh-md-70 content-space-t-4 content-space-b-3 content-space-md-0">
<div class="w-75 w-lg-50">
<h3 class="text-white">It is an</h3>
<h2 class="display-4 text-white mb-0">Easy business with Front template</h2>
</div>
</div>
</div>
<!-- End Slide -->
</div>
<!-- Arrows -->
<div class="d-none d-md-inline-block">
<div class="js-swiper-main-button-next swiper-button-next swiper-button-next-soft-white"></div>
<div class="js-swiper-main-button-prev swiper-button-prev swiper-button-prev-soft-white"></div>
</div>
</div>
<!-- End Main Slider -->
<!-- Thumbs Slider -->
<div class="js-swiper-thumbs swiper">
<div class="swiper-wrapper">
<!-- Slide -->
<div class="swiper-slide">
<div class="d-flex align-items-center bg-white position-relative vh-md-30">
<div class="container content-space-2">
<div class="row">
<div class="col-md-4">
<span class="fs-3 fw-semibold">01.</span>
<h3 class="text-primary">Advanced editing</h3>
<p class="mb-0">Modify any aspect of your website or pages with Front.</p>
</div>
<!-- End Col -->
</div>
<!-- End Row -->
</div>
<div class="col-md-5 d-none d-md-inline-block bg-primary position-absolute top-0 end-0 bottom-0">
<div class="position-absolute top-50 translate-middle-y p-7">
<h3 class="text-white">Next: Fully responsive</h3>
<p class="text-white-70 mb-0">Let visitors to view your content from their choice of device.</p>
</div>
</div>
<!-- End Col -->
</div>
</div>
<!-- End Slide -->
<!-- Slide -->
<div class="swiper-slide">
<div class="d-flex align-items-center bg-white position-relative vh-md-30">
<div class="container content-space-2">
<div class="row">
<div class="col-md-4">
<span class="fs-3 fw-semibold">02.</span>
<h3 class="text-primary">Fully responsive</h3>
<p class="mb-0">Let visitors to view your content from their choice of device.</p>
</div>
<!-- End Col -->
</div>
<!-- End Row -->
</div>
<div class="col-md-5 d-none d-md-inline-block bg-dark position-absolute top-0 end-0 bottom-0">
<div class="position-absolute top-50 translate-middle-y p-7">
<h3 class="text-white">Prev: Advanced editing</h3>
<p class="text-white-70 mb-0">Modify any aspect of your website with Front</p>
</div>
</div>
<!-- End Col -->
</div>
</div>
<!-- End Slide -->
</div>
</div>
<!-- End Thumbs Slider -->
</div>
<!-- Swiper Slider -->
<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
// =======================================================
let activeIndex = 0
var sliderThumbs = new Swiper('.js-swiper-thumbs', {
slidesPerView: 1,
autoplay: false,
watchSlidesVisibility: true,
watchSlidesProgress: true,
followFinger: false,
loop: true,
on: {
'slideChangeTransitionEnd': function (event) {
if (sliderMain === undefined) return
sliderMain.slideTo(event.activeIndex)
}
}
});
var sliderMain = new Swiper('.js-swiper-main', {
effect: 'fade',
autoplay: false,
disableOnInteraction: true,
loop: true,
navigation: {
nextEl: '.js-swiper-main-button-next',
prevEl: '.js-swiper-main-button-prev',
},
thumbs: {
swiper: sliderThumbs
},
on: {
'slideChangeTransitionEnd': function (event) {
if (sliderThumbs === undefined) return
sliderThumbs.slideTo(event.activeIndex)
}
}
})
})()
</script>