Skip to main content

HTML:

          
            <!-- Hero Section -->
            <div class="js-slick-carousel u-slick"
                 data-infinite="true"
                 data-autoplay="true"
                 data-speed="7000"
                 data-fade="true"
                 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">
                <div class="d-md-flex align-items-md-center height-100vh--lg gradient-overlay-half-dark-v2 bg-img-hero" style="background-image: url(../../assets/img/1920x1080/img13.jpg);">
                  <div class="container text-center space-2 space-3--md">
                    <!-- Description -->
                    <div class="w-lg-80 mx-lg-auto mb-3">
                      <h1 class="display-3 font-size-48--md-down text-white"
                          data-scs-animation-in="fadeInUp">We build digital experience</h1>
                    </div>
                    <div class="w-lg-50 mx-lg-auto mb-7">
                      <p class="lead text-white"
                         data-scs-animation-in="fadeInUp"
                         data-scs-animation-delay="200">We are creatively driven studio focused on developing interactive projects.</p>
                    </div>
                    <div data-scs-animation-in="fadeInUp"
                         data-scs-animation-delay="400">
                      <a class="btn btn-light" href="https://themes.getbootstrap.com/product/space-multipurpose-responsive-template/">Get Started with Space</a>
                    </div>
                    <!-- End Description -->
                  </div>
                </div>
              </div>
              <!-- End Slide #1 -->

              <!-- Slide #2 -->
              <div class="js-slide">
                <div class="d-md-flex align-items-md-center height-100vh--lg gradient-overlay-half-dark-v2 bg-img-hero" style="background-image: url(../../assets/img/1920x1080/img14.jpg);">
                  <div class="container text-center space-2 space-3--md">
                    <!-- Description -->
                    <div class="w-lg-80 mx-lg-auto mb-3">
                      <h1 class="display-3 font-size-48--md-down text-white"
                          data-scs-animation-in="fadeInUp">Creating digital business</h1>
                    </div>
                    <div class="w-lg-50 mx-lg-auto mb-7">
                      <p class="lead text-white"
                         data-scs-animation-in="fadeInUp"
                         data-scs-animation-delay="200">Your product needs to differentiate your business. Our mission is to make that happen.</p>
                    </div>
                    <div data-scs-animation-in="fadeInUp"
                         data-scs-animation-delay="400">
                      <a class="btn btn-light" href="https://themes.getbootstrap.com/product/space-multipurpose-responsive-template/">Get Started with Space</a>
                    </div>
                    <!-- End Description -->
                  </div>
                </div>
              </div>
              <!-- End Slide #2 -->

              <!-- Slide #3 -->
              <div class="js-slide">
                <div class="d-md-flex align-items-md-center height-100vh--lg gradient-overlay-half-dark-v2 bg-img-hero" style="background-image: url(../../assets/img/1920x1080/img15.jpg);">
                  <div class="container text-center space-2 space-3--md">
                    <!-- Description -->
                    <div class="w-lg-80 mx-lg-auto mb-3">
                      <h1 class="display-3 font-size-48--md-down text-white"
                          data-scs-animation-in="fadeInUp">Human-powered high quality results</h1>
                    </div>
                    <div class="w-lg-50 mx-lg-auto mb-7">
                      <p class="lead text-white"
                         data-scs-animation-in="fadeInUp"
                         data-scs-animation-delay="200">Our template provides access to human-powered hight quality results for hundreds of use cases.</p>
                    </div>
                    <div data-scs-animation-in="fadeInUp"
                         data-scs-animation-delay="400">
                      <a class="btn btn-light" href="https://themes.getbootstrap.com/product/space-multipurpose-responsive-template/">Get Started with Space</a>
                    </div>
                    <!-- End Description -->
                  </div>
                </div>
              </div>
              <!-- End Slide #3 -->
            </div>
            <!-- End Hero Section -->

            <!-- Hero Slick Paging -->
            <div class="container position-relative">
              <div id="slickPaging" class="u-slick__paging-v1"></div>
            </div>
            <!-- End Hero Slick Paging -->
          
        

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>
        
      

Please sign in

Signin to manage your account.

Do not have an account? Signup

OR