Grow faster
Make it beautiful
Sell business
HTML:
<!-- Hero Section -->
<div class="position-relative">
<!-- Hero Carousel - Main -->
<div id="heroMain" class="js-slick-carousel u-slick"
data-infinite="true"
data-autoplay="true"
data-adaptive-height="true"
data-speed="5000"
data-fade="true"
data-nav-for="#heroNav">
<!-- Slide #1 -->
<div class="js-slide">
<div class="dzsparallaxer auto-init height-is-based-on-content use-loading mode-scroll" data-options='{direction: "normal"}'>
<!-- Apply your Parallax background image here -->
<div class="divimage dzsparallaxer--target gradient-overlay-half-white-v1 bg-img-hero" style="height: 120%; background-image: url(../../assets/img/1920x1080/img1.jpg);"></div>
<!-- Content -->
<div class="d-lg-flex align-items-lg-center">
<div class="container position-relative z-index-2 space-5">
<div class="w-50 w-md-40">
<div class="mb-5">
<h1 class="display-4">Grow faster</h1>
<p class="lead">Grow faster and succeed with Space.</p>
</div>
</div>
<div class="w-50">
<a class="btn btn-primary btn-wide mb-2 mb-md-0 mr-md-2" href="https://themes.getbootstrap.com/product/space-multipurpose-responsive-template/">Get Started</a>
<a class="btn btn-purple btn-wide mb-2 mb-md-0" href="https://themes.getbootstrap.com/product/space-multipurpose-responsive-template/">Learn More</a>
</div>
</div>
</div>
<!-- End Content -->
</div>
</div>
<!-- End Slide #1 -->
<!-- Slide #2 -->
<div class="js-slide">
<div class="dzsparallaxer auto-init height-is-based-on-content use-loading mode-scroll" data-options='{direction: "normal"}'>
<!-- Apply your Parallax background image here -->
<div class="divimage dzsparallaxer--target gradient-overlay-half-white-v1 bg-img-hero" style="height: 120%; background-image: url(../../assets/img/1920x1080/img2.jpg);"></div>
<!-- Content -->
<div class="d-lg-flex align-items-lg-center">
<div class="container position-relative z-index-2 space-5">
<div class="w-50 w-md-40">
<div class="mb-5">
<h2 class="display-4">Make it beautiful</h2>
<p class="lead">Make it beautiful. Make your own business.</p>
</div>
</div>
<div class="w-50">
<a class="btn btn-primary btn-wide mb-2 mb-md-0 mr-md-2" href="https://themes.getbootstrap.com/product/space-multipurpose-responsive-template/">Get Started</a>
<a class="btn btn-purple btn-wide" href="https://themes.getbootstrap.com/product/space-multipurpose-responsive-template/">Learn More</a>
</div>
</div>
</div>
<!-- End Content -->
</div>
</div>
<!-- End Slide #2 -->
<!-- Slide #3 -->
<div class="js-slide">
<div class="dzsparallaxer auto-init height-is-based-on-content use-loading mode-scroll" data-options='{direction: "normal"}'>
<!-- Apply your Parallax background image here -->
<div class="divimage dzsparallaxer--target gradient-overlay-half-white-v1 bg-img-hero" style="height: 120%; background-image: url(../../assets/img/1920x1080/img3.jpg);"></div>
<!-- Content -->
<div class="d-lg-flex align-items-lg-center">
<div class="container position-relative z-index-2 space-5">
<div class="w-50 w-md-40">
<div class="mb-5">
<h2 class="display-4">Sell business</h2>
<p class="lead">Sell your business with Space.</p>
</div>
</div>
<div class="w-50">
<a class="btn btn-primary btn-wide mb-2 mb-md-0 mr-md-2" href="https://themes.getbootstrap.com/product/space-multipurpose-responsive-template/">Get Started</a>
<a class="btn btn-purple btn-wide" href="https://themes.getbootstrap.com/product/space-multipurpose-responsive-template/">Learn More</a>
</div>
</div>
</div>
<!-- End Content -->
</div>
</div>
<!-- End Slide #3 -->
</div>
<!-- Hero Carousel - Main -->
<!-- Hero Carousel - Nav -->
<div class="container position-absolute-bottom-0">
<div id="heroNav" class="js-slick-carousel u-slick u-slick--cursor-pointer u-slick--pagination-modern u-slick--transform-off-lg mb-3"
data-infinite="true"
data-autoplay="true"
data-speed="5000"
data-center-mode="true"
data-slides-show="3"
data-is-thumbs="true"
data-focus-on-select="true"
data-nav-for="#heroMain"
data-responsive='[{
"breakpoint": 992,
"settings": {
"slidesToShow": 2
}
}, {
"breakpoint": 768,
"settings": {
"slidesToShow": 2
}
}, {
"breakpoint": 554,
"settings": {
"slidesToShow": 1
}
}]'>
<!-- Slide #1 -->
<div class="js-slide u-slick--pagination-modern__item">
<div class="media align-items-center bg-white border rounded">
<div class="media-body px-3">
<span class="u-slick--pagination-modern__item-text">Grow faster</span>
</div>
<img class="u-slick--pagination-modern__item-img rounded-right" src="../../assets/img/200x140/img1.jpg" alt="Image Description">
</div>
</div>
<!-- End Slide #1 -->
<!-- Slide #2 -->
<div class="js-slide u-slick--pagination-modern__item">
<div class="media align-items-center bg-white border rounded">
<div class="media-body px-3">
<span class="u-slick--pagination-modern__item-text">Make it beautiful</span>
</div>
<img class="u-slick--pagination-modern__item-img rounded-right" src="../../assets/img/200x140/img2.jpg" alt="Image Description">
</div>
</div>
<!-- End Slide #2 -->
<!-- Slide #3 -->
<div class="js-slide u-slick--pagination-modern__item">
<div class="media align-items-center bg-white border rounded">
<div class="media-body px-3">
<span class="u-slick--pagination-modern__item-text">Sell business</span>
</div>
<img class="u-slick--pagination-modern__item-img rounded-right" src="../../assets/img/200x140/img3.jpg" alt="Image Description">
</div>
</div>
<!-- End Slide #3 -->
</div>
</div>
<!-- Hero Carousel - Nav -->
</div>
<!-- End Hero Section -->
CSS library:
<link rel="stylesheet" href="../../assets/vendor/slick-carousel/slick/slick.css">
<link rel="stylesheet" href="../../assets/vendor/dzsparallaxer/dzsparallaxer.css">
JS library and initialization:
<!-- JS Implementing Plugins -->
<script src="../../assets/vendor/slick-carousel/slick/slick.js"></script>
<script src="../../assets/vendor/dzsparallaxer/dzsparallaxer.js"></script>
<!-- JS Space -->
<script src="../../assets/js/components/hs.slick-carousel.js"></script>
<!-- JS Plugins Init. -->
<script>
$(document).on('ready', function () {
// initialization of slick carousel
$.HSCore.components.HSSlickCarousel.init('.js-slick-carousel');
});
</script>