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>