Designing made simple
Space gives you everything you need to manage business, build great stuff, and reach your goals.
Learn More
Managing projects
Space is the leading online template platform helping over 35,500 customers.
Learn More
HTML:
<!-- Hero Section -->
<div class="js-slick-carousel u-slick"
data-infinite="true"
data-autoplay="true"
data-speed="7000"
data-adaptive-height="true"
data-arrows-classes="d-none d-lg-inline-block u-slick__arrow-classic u-slick__arrow-centered--y rounded-circle"
data-arrow-left-classes="fa fa-arrow-left u-slick__arrow-classic-inner u-slick__arrow-classic-inner--left ml-lg-2 ml-xl-4"
data-arrow-right-classes="fa fa-arrow-right u-slick__arrow-classic-inner u-slick__arrow-classic-inner--right mr-lg-2 mr-xl-4"
data-numbered-pagination="#slickPaging">
<!-- Slide #1 -->
<div class="js-slide gradient-overlay-half-dark-v1 bg-img-hero" style="background-image: url(../../assets/img/1920x800/img1.jpg);">
<div class="container space-2 space-4-top--lg space-3-bottom--lg">
<!-- Title -->
<div class="w-md-80 w-lg-60">
<div class="mb-4">
<h1 class="display-4 font-size-48--md-down text-white">Designing made simple</h1>
<p class="lead text-white">Space gives you everything you need to manage business, build great stuff, and reach your goals.</p>
</div>
<a class="btn btn-light btn-wide" href="https://themes.getbootstrap.com/product/space-multipurpose-responsive-template/">Learn More</a>
</div>
<!-- End Title -->
</div>
</div>
<!-- End Slide #1 -->
<!-- Slide #2 -->
<div class="js-slide gradient-overlay-half-dark-v1 bg-img-hero" style="background-image: url(../../assets/img/1920x800/img2.jpg);">
<div class="container space-2 space-4-top--lg space-3-bottom--lg">
<!-- Title -->
<div class="w-md-80 w-lg-60">
<div class="mb-4">
<h2 class="display-4 font-size-48--md-down text-white">Managing projects</h2>
<p class="lead text-white">Space is the leading online template platform helping over 35,500 customers.</p>
</div>
<a class="btn btn-light btn-wide" href="https://themes.getbootstrap.com/product/space-multipurpose-responsive-template/">Learn More</a>
</div>
<!-- End Title -->
</div>
</div>
<!-- End Slide #2 -->
</div>
<!-- End Hero Section -->
CSS library:
<link rel="stylesheet" href="../../assets/vendor/slick-carousel/slick/slick.css">
JS library and initialization:
<!-- JS Implementing Plugins -->
<script src="../../assets/vendor/slick-carousel/slick/slick.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>