Skip to main content

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>
        
      

Please sign in

Signin to manage your account.

Do not have an account? Signup

OR