HTML:

          
            <!-- Hero Section -->
            <div class="position-relative">
              <!-- Slick Carousel -->
              <div class="js-slick-carousel u-slick"
                   data-fade="true"
                   data-autoplay="true"
                   data-speed="5000"
                   data-infinite="true">
                <div class="js-slide">
                  <div class="u-bg-img-hero min-height-620" style="background-image: url(../../assets/img/1920x800/img18.jpg);"></div>
                </div>
                <div class="js-slide">
                  <div class="u-bg-img-hero min-height-620" style="background-image: url(../../assets/img/1920x800/img17.jpg);"></div>
                </div>
              </div>
              <!-- End Slick Carousel -->

              <div class="container position-absolute-bottom-0 u-space-5-top u-space-2-bottom">
                <!-- Info Link -->
                <div class="d-inline-block mb-3">
                  <a class="media align-items-center bg-primary text-white font-size-14 rounded-pill p-2 pr-3" href="#">
                    <span class="d-flex mr-3">
                      <span class="u-label u-label--sm u-label--white font-weight-bold">Start Now</span>
                    </span>
                    <span class="media-body">
                      Find the job that fits your life faster with our advanced tools.
                    </span>
                  </a>
                </div>
                <!-- End Info Link -->

                <div class="bg-white rounded p-7">
                  <!-- Search Jobs Form -->
                  <form class="js-validate">
                    <div class="row">
                      <div class="col-lg-5 mb-4 mb-lg-0">
                        <!-- Input -->
                        <label class="d-block" for="keywordInput">
                          <span class="h4 d-block text-dark font-weight-bold mb-0">what</span>
                          <span class="d-block font-size-13 text-secondary">job title, keywords, or company</span>
                        </label>
                        <div class="js-focus-state input-group u-form u-form--no-addon-brd">
                          <input id="keywordInput" class="form-control u-form__input" type="text" placeholder="Keyword or title" aria-label="Keyword or title">
                          <div class="input-group-append u-form__append">
                            <span class="input-group-text u-form__text">
                              <span class="fa fa-search u-form__text-inner"></span>
                            </span>
                          </div>
                        </div>
                        <!-- End Input -->
                      </div>

                      <div class="col-lg-5 mb-4 mb-lg-0">
                        <!-- Input -->
                        <label class="d-block" for="locationInput">
                          <span class="h4 d-block text-dark font-weight-bold mb-0">where</span>
                          <span class="d-block font-size-13 text-secondary">city, state, or zip code</span>
                        </label>
                        <div class="js-focus-state input-group u-form u-form--no-addon-brd">
                          <input id="locationInput" class="form-control u-form__input" type="text" placeholder="City, state, or zip" aria-label="City, state, or zip">
                          <div class="input-group-append u-form__append">
                            <span class="input-group-text u-form__text">
                              <span class="fa fa-map-marker-alt u-form__text-inner"></span>
                            </span>
                          </div>
                        </div>
                        <!-- End Input -->
                      </div>

                      <div class="col-lg-2 align-self-lg-end">
                        <button type="submit" class="btn btn-block btn-primary u-btn-primary transition-3d-hover">Find Jobs</button>
                      </div>
                    </div>
                    <!-- End Checkbox -->
                  </form>
                  <!-- End Search Jobs Form -->
                </div>
              </div>
            </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 Plugins Init. -->
          <script>
            $(document).on('ready', function () {
              // initialization of slick carousel
              $.HSCore.components.HSSlickCarousel.init('.js-slick-carousel');
            });
          </script>