hero-slider

Summary

A full-viewport Swiper hero with darkened photo slides, a badge eyebrow ("welcome to ..."), oversized 90px Poppins headline, supporting copy and a single secondary CTA. Prev/next arrows live as a 120px-tall split bar at the bottom of the slide that fills the full width.

HTML structure (minimal)

<hero-slider class="hero-slider with-floating-header">
  <div class="swiper">
    <div class="swiper-wrapper">
      <div class="swiper-slide">
        <div class="slider-card overlay">
          <picture class="slider-media">
            <img src="hero-1.jpg" width="1920" height="1000" />
          </picture>
          <div class="slider-content">
            <div class="container height-100 d-flex align-items-center">
              <div class="content-box slider-animation section-headings">
                <div class="subheading text-20 subheading-bg"><span>welcome to Zentra</span></div>
                <h2 class="heading text-90 fw-700">Business Growth Made Simple</h2>
                <div class="text text-18">Transform your business with expert consultancy services...</div>
                <a href="contact.html" class="button button--secondary">Free Consultation</a>
              </div>
            </div>
          </div>
        </div>
      </div>
    </div>
    <div class="slider-nav">
      <div class="swiper-button-prev"></div>
      <div class="swiper-button-next"></div>
    </div>
  </div>
</hero-slider>

Key SCSS tokens

.hero-slider {
  --color-foreground: rgba(255,255,255,1);
  --color-foreground-heading: rgba(255,255,255,1);
  --slider-nav-height: 120px;
  min-height: 100vh;
}
.with-floating-header .slider-card {
  padding-block-start: calc(var(--header-height) + 60px);
  padding-block-end: calc(var(--header-height) + 60px);
}
.slider-card.overlay::after {
  content: "";
  position: absolute; inset: 0;
  background: var(--color-overlay); /* rgba(28,37,57,0.6) */
}
.slider-nav {
  position: absolute; bottom: 0; left: 0;
  width: 100%; height: var(--slider-nav-height);
  display: flex;
}
.slider-nav .swiper-button-next,
.slider-nav .swiper-button-prev {
  width: 50%; height: inherit;
  border-top: 1px solid var(--color-border);
  transition: all 0.3s;
}

Animation logic

class HeroSlider extends HTMLElement {
  connectedCallback() {
    this.slider = new Swiper(this.querySelector(".swiper"), {
      loop: true,
      navigation: {
        nextEl: this.querySelector(".swiper-button-next"),
        prevEl: this.querySelector(".swiper-button-prev"),
      },
    });
  }
}
customElements.define("hero-slider", HeroSlider);

Notable details

• The 120px navigation bar isn't a separate band — it's absolutely positioned at the bottom of .slider-card and the slide content is padded by the same amount, so the heading vertically centres above it without overlap.
• --color-foreground and --color-foreground-heading are rebound to white on .hero-slider itself, so all child .heading, .text, .subheading elements automatically pick up the inverted theme.
• with-floating-header variant pads slides by calc(var(--header-height) + 60px) so the floating navbar overlays without clipping the eyebrow badge.
• Provides multiple <source media="..."> entries on <picture> for responsive hero images (575/991/1920 widths).

Use when

• Service or consulting landings that lead with photography and need a strong headline plus single CTA.
• You want full-viewport hero with an integrated bottom navigation bar instead of overlaid arrows.
• Pages where the floating header should sit inside the hero rather than above it.

Caveats

• Loop mode duplicates slides — make sure your slide count is greater than slidesPerView (default 1 here, fine).
• The <picture> aspect-ratio is hard-coded 1920×1000; replace srcset images at the same ratio or hero will letterbox.