hero-fade-slider

Summary

Full-bleed Slick carousel with cross-fade transitions, photo background, large Quicksand headline, supporting paragraph and a row of four icon-led specialty chips. Two slides ship in the demo.

HTML structure (minimal)

<section class="slider">
  <div class="slick-carousel m-slides-0"
       data-slick='{"slidesToShow": 1, "arrows": true, "dots": false, "speed": 700, "fade": true, "cssEase": "linear"}'>
    <div class="slide-item align-v-h">
      <div class="bg-img"><img src="assets/images/sliders/1.jpg" alt="slide img"></div>
      <div class="container">
        <div class="row align-items-center">
          <div class="col-xl-7">
            <div class="slide__content">
              <h2 class="slide__title">Providing Best Medical Care</h2>
              <p class="slide__desc">The health and well-being of our patients…</p>
              <ul class="features-list list-unstyled d-flex flex-wrap">
                <li class="feature-item">
                  <div class="feature__icon"><i class="icon-heart"></i></div>
                  <h2 class="feature__title">Examination</h2>
                </li>
                <!-- Prescription / Cardiogram / Blood Pressure -->
              </ul>
            </div>
          </div>
        </div>
      </div>
    </div>
    <!-- next slide … -->
  </div>
</section>

Key SCSS tokens

.slider {
  padding: 0;
  .slide-item { height: calc(100vh - 165px); min-height: 550px; }
  .slide__title { font-size: 75px; line-height: 1.1; margin-bottom: 25px; }
  .slide__desc { color: #283b6a; font-size: 17px; font-weight: 700; max-width: 550px; }
  .features-list .feature-item {
    display: flex; align-items: center;
    .feature__icon { font-size: 36px; color: $color-primary; margin-right: 15px; }
    .feature__title { font-size: 16px; font-weight: 700; }
  }
  .slick-arrow { transform: translateY(30px); }
}

Animation logic

// Slick is initialised by the template's plugin bundle; fade between slides comes from data-slick options:
//   fade: true, cssEase: "linear", speed: 700, arrows: true, dots: false
// Background images get hydrated from <img src> to CSS background by main.js:
$('.bg-img').each(function () {
  var imgSrc = $(this).children('img').attr('src');
  $(this).parent().css({
    'background-image': 'url(' + imgSrc + ')',
    'background-size': 'cover',
    'background-position': 'center'
  });
  $(this).remove();
});

Notable details

• Each slide repeats the same four feature-icons (Examination / Prescription / Cardiogram / Blood Pressure) — they act as a persistent value-prop strip rather than slide-specific chips.
• m-slides-0 modifier removes Slick's default slide gutters so the fade looks seamless.
• Background images stay authored as <img> in HTML (good for SEO & CMS authoring) and only become CSS background-image after JS runs.

Use when

• Healthcare, services, or B2B brands that want a full-height photo hero with a couple of tagline rotations.
• Layouts where a value-prop chips row should live inside the hero rather than below it.
• Static templates that should remain CMS-friendly (image fields stay as plain <img>).

Caveats

• Heights are tied to viewport (calc(100vh - 165px)) so very short browsers (mobile landscape) compress the layout aggressively.
• Slick is unmaintained — for a production rewrite consider Swiper's fade effect, which keeps the markup almost identical.