2018's Most Relaxing and Affordable Vacations

At Wake, our mission has always been focused on bringing openness and transparency to the design process.

Read More

Bonded by science: researchers describe their nerdy proposals

For Valentine's Day, Nature collects tales of romance in research.

Read More

Tree rings reveal increased fire risk for southwestern US

Historical record points to climate patterns that could prime the region for an intense fire season.

Read More

The top 30 self-improvement goals we never get around to achieving

Travelling, getting out of debt and writing will among goals most commonly deferred, according to survey

Read More

HTML:

          
            <!-- Hero Section -->
            <div class="js-slick-carousel u-slick u-slick--equal-height"
                 data-fade="true"
                 data-infinite="true"
                 data-autoplay="true"
                 data-speed="10000"
                 data-pagi-classes="text-center u-slick__pagination u-slick__pagination--white position-absolute-bottom-0 mb-4 mb-0">
              <div class="js-slide u-gradient-overlay-half-primary-v1 u-bg-img-hero u-space-3 min-height-100vh--lg" style="background-image: url(../../assets/img/1920x800/img7.jpg);">
                <!-- Hero News -->
                <div class="container d-flex align-items-center">
                  <article class="js-scroll-effect position-relative w-lg-60 text-center mx-lg-auto"
                           data-scroll-effect="smoothFadeToBottom"
                           data-scroll-effect-speed="500">
                    <!-- Share Social Networks -->
                    <div data-scs-animation-in="fadeInUp">
                      <ul class="list-inline mb-4">
                        <li class="list-inline-item">
                          <a class="u-bg-transparent u-icon u-icon--sm u-icon-light--air rounded-circle" href="#">
                            <span class="fab fa-facebook-f u-icon__inner"></span>
                          </a>
                        </li>
                        <li class="list-inline-item">
                          <a class="u-bg-transparent u-icon u-icon--sm u-icon-light--air rounded-circle" href="#">
                            <span class="fab fa-google u-icon__inner"></span>
                          </a>
                        </li>
                        <li class="list-inline-item">
                          <a class="u-bg-transparent u-icon u-icon--sm u-icon-light--air rounded-circle" href="#">
                            <span class="fab fa-twitter u-icon__inner"></span>
                          </a>
                        </li>
                        <li class="list-inline-item">
                          <a class="u-bg-transparent u-icon u-icon--sm u-icon-light--air rounded-circle" href="#">
                            <span class="fab fa-github u-icon__inner"></span>
                          </a>
                        </li>
                      </ul>
                    </div>
                    <!-- End Share Social Networks -->

                    <!-- Info -->
                    <div class="mb-4">
                      <h1 class="text-white font-weight-bold mb-3"
                          data-scs-animation-in="fadeInUp">2018's Most Relaxing and Affordable Vacations</h1>
                      <p class="u-text-light mb-7"
                         data-scs-animation-in="fadeInUp">At Wake, our mission has always been focused on bringing openness and transparency to the design process.</p>
                    </div>
                    <a class="btn text-primary u-btn-white u-btn-pill u-btn-wide transition-3d-hover" href="../blog/single-article-classic.html"
                       data-scs-animation-in="fadeInUp">Read More</a>
                    <!-- End Info -->
                  </article>
                </div>
                <!-- End Hero News -->
              </div>

              <div class="js-slide u-gradient-overlay-half-primary-v1 u-bg-img-hero u-space-3 min-height-100vh--lg" style="background-image: url(../../assets/img/1920x800/img6.jpg);">
                <!-- Hero News -->
                <div class="container d-flex align-items-center">
                  <article class="js-scroll-effect position-relative w-lg-60 text-center mx-lg-auto"
                           data-scroll-effect="smoothFadeToBottom"
                           data-scroll-effect-speed="500">
                    <!-- Share Social Networks -->
                    <div data-scs-animation-in="fadeInUp">
                      <ul class="list-inline mb-4">
                        <li class="list-inline-item">
                          <a class="u-bg-transparent u-icon u-icon--sm u-icon-light--air rounded-circle" href="#">
                            <span class="fab fa-facebook-f u-icon__inner"></span>
                          </a>
                        </li>
                        <li class="list-inline-item">
                          <a class="u-bg-transparent u-icon u-icon--sm u-icon-light--air rounded-circle" href="#">
                            <span class="fab fa-google u-icon__inner"></span>
                          </a>
                        </li>
                        <li class="list-inline-item">
                          <a class="u-bg-transparent u-icon u-icon--sm u-icon-light--air rounded-circle" href="#">
                            <span class="fab fa-twitter u-icon__inner"></span>
                          </a>
                        </li>
                        <li class="list-inline-item">
                          <a class="u-bg-transparent u-icon u-icon--sm u-icon-light--air rounded-circle" href="#">
                            <span class="fab fa-github u-icon__inner"></span>
                          </a>
                        </li>
                      </ul>
                    </div>
                    <!-- End Share Social Networks -->

                    <!-- Info -->
                    <div class="mb-4">
                      <h2 class="h1 text-white font-weight-bold mb-3"
                          data-scs-animation-in="fadeInUp">Bonded by science: researchers describe their nerdy proposals</h2>
                      <p class="u-text-light mb-7"
                         data-scs-animation-in="fadeInUp">For Valentine's Day, Nature collects tales of romance in research.</p>
                    </div>
                    <a class="btn text-primary u-btn-white u-btn-pill u-btn-wide transition-3d-hover" href="../blog/single-article-classic.html"
                       data-scs-animation-in="fadeInUp">Read More</a>
                    <!-- End Info -->
                  </article>
                </div>
                <!-- End Hero News -->
              </div>

              <div class="js-slide u-gradient-overlay-half-primary-v1 u-bg-img-hero u-space-3 min-height-100vh--lg" style="background-image: url(../../assets/img/1920x800/img8.jpg);">
                <!-- Hero News -->
                <div class="container d-flex align-items-center">
                  <article class="js-scroll-effect position-relative w-lg-60 text-center mx-lg-auto"
                           data-scroll-effect="smoothFadeToBottom"
                           data-scroll-effect-speed="500">
                    <!-- Share Social Networks -->
                    <div data-scs-animation-in="fadeInUp">
                      <ul class="list-inline mb-4">
                        <li class="list-inline-item">
                          <a class="u-bg-transparent u-icon u-icon--sm u-icon-light--air rounded-circle" href="#">
                            <span class="fab fa-facebook-f u-icon__inner"></span>
                          </a>
                        </li>
                        <li class="list-inline-item">
                          <a class="u-bg-transparent u-icon u-icon--sm u-icon-light--air rounded-circle" href="#">
                            <span class="fab fa-google u-icon__inner"></span>
                          </a>
                        </li>
                        <li class="list-inline-item">
                          <a class="u-bg-transparent u-icon u-icon--sm u-icon-light--air rounded-circle" href="#">
                            <span class="fab fa-twitter u-icon__inner"></span>
                          </a>
                        </li>
                        <li class="list-inline-item">
                          <a class="u-bg-transparent u-icon u-icon--sm u-icon-light--air rounded-circle" href="#">
                            <span class="fab fa-github u-icon__inner"></span>
                          </a>
                        </li>
                      </ul>
                    </div>
                    <!-- End Share Social Networks -->

                    <!-- Info -->
                    <div class="mb-4">
                      <h2 class="h1 text-white font-weight-bold mb-3"
                          data-scs-animation-in="fadeInUp">Tree rings reveal increased fire risk for southwestern US</h2>
                      <p class="u-text-light mb-7"
                         data-scs-animation-in="fadeInUp">Historical record points to climate patterns that could prime the region for an intense fire season.</p>
                    </div>
                    <a class="btn text-primary u-btn-white u-btn-pill u-btn-wide transition-3d-hover" href="../blog/single-article-classic.html"
                       data-scs-animation-in="fadeInUp">Read More</a>
                    <!-- End Info -->
                  </article>
                </div>
                <!-- End Hero News -->
              </div>

              <div class="js-slide u-gradient-overlay-half-primary-v1 u-bg-img-hero u-space-3 min-height-100vh--lg" style="background-image: url(../../assets/img/1920x800/img9.jpg);">
                <!-- Hero News -->
                <div class="container d-flex align-items-center">
                  <article class="js-scroll-effect position-relative w-lg-60 text-center mx-lg-auto"
                           data-scroll-effect="smoothFadeToBottom"
                           data-scroll-effect-speed="500">
                    <!-- Share Social Networks -->
                    <div data-scs-animation-in="fadeInUp">
                      <ul class="list-inline mb-4">
                        <li class="list-inline-item">
                          <a class="u-bg-transparent u-icon u-icon--sm u-icon-light--air rounded-circle" href="#">
                            <span class="fab fa-facebook-f u-icon__inner"></span>
                          </a>
                        </li>
                        <li class="list-inline-item">
                          <a class="u-bg-transparent u-icon u-icon--sm u-icon-light--air rounded-circle" href="#">
                            <span class="fab fa-google u-icon__inner"></span>
                          </a>
                        </li>
                        <li class="list-inline-item">
                          <a class="u-bg-transparent u-icon u-icon--sm u-icon-light--air rounded-circle" href="#">
                            <span class="fab fa-twitter u-icon__inner"></span>
                          </a>
                        </li>
                        <li class="list-inline-item">
                          <a class="u-bg-transparent u-icon u-icon--sm u-icon-light--air rounded-circle" href="#">
                            <span class="fab fa-github u-icon__inner"></span>
                          </a>
                        </li>
                      </ul>
                    </div>
                    <!-- End Share Social Networks -->

                    <!-- Info -->
                    <div class="mb-4">
                      <h2 class="h1 text-white font-weight-bold mb-3"
                          data-scs-animation-in="fadeInUp">The top 30 self-improvement goals we never get around to achieving</h2>
                      <p class="u-text-light mb-7"
                         data-scs-animation-in="fadeInUp">Travelling, getting out of debt and writing will among goals most commonly deferred, according to survey</p>
                    </div>
                    <a class="btn text-primary u-btn-white u-btn-pill u-btn-wide transition-3d-hover" href="../blog/single-article-classic.html"
                       data-scs-animation-in="fadeInUp">Read More</a>
                    <!-- End Info -->
                  </article>
                </div>
                <!-- End Hero News -->
              </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 Implementing Plugins -->
          <script src="../assets/js/components/hs.slick-carousel.js"></script>
          <script src="../assets/js/components/hs.scroll-effect.js"></script>

          <!-- JS Plugins Init. -->
          <script>
            $(document).on('ready', function () {
              // initialization of slick carousel
              $.HSCore.components.HSSlickCarousel.init('.js-slick-carousel');

              // initialization of scroll effect component
              $.HSCore.components.HSScrollEffect.init('.js-scroll-effect');
            });
          </script>