hero-carousel

Summary

Full-bleed photographic Owl carousel with animateOut: 'fadeOut' slide transitions, a 160px outlined slide number anchored on the left, and stacked WOW.js fadeInLeft entrance animations for headline, paragraph, and dual CTA buttons that re-trigger on each slide change.

HTML structure (minimal)

<section class="hero_wrapper hero-1">
  <div class="hero_slider owl-carousel">
    <div class="single-slide-hero bg-cover" style="background-image: url('banner_1900x700.jpg')">
      <div class="number" data-animation="fadeInUp" data-delay="0.6s">01</div>
      <div class="container">
        <div class="row">
          <div class="col-12 col-md-8 offset-md-2">
            <div class="hero-contents text-center">
              <h6>We Are The Best</h6>
              <h1 class="wow fadeInLeft" data-wow-duration="1.3s">Get the best Solutions to your legal problems</h1>
              <p class="wow fadeInLeft" data-wow-duration="1.3s" data-wow-delay=".4s">Lorem ipsum dolor sit amet…</p>
              <a href="#" class="theme-btn wow fadeInLeft" data-wow-duration="1.2s" data-wow-delay=".8s">Free Consultant</a>
              <a href="#" class="theme-btn wow fadeInLeft" data-wow-duration="1.2s" data-wow-delay=".6s">Explore More</a>
            </div>
          </div>
        </div>
      </div>
    </div>
  </div>
</section>

Key SCSS tokens

.hero_wrapper.hero-1 {
  position: relative; overflow: hidden;
  .single-slide-hero {
    padding: 250px 0 200px;
    .number {
      position: absolute; top: calc(50% - 60.5px); left: 0;
      font-size: 160px; line-height: 100%;
      -webkit-text-fill-color: transparent;
      -webkit-text-stroke: 1px rgba(255,255,255,0.79);
      @media (max-width: 768px) { display: none; }
    }
    h6 { letter-spacing: 0.4em; text-transform: uppercase; color: #fff; }
    h1 { font-size: 60px; line-height: 70px; color: #fff; text-align: center; }
    p { font-size: 18px; color: #fff; text-align: center; }
    a.theme-btn { margin-top: 40px; }
  }
}

Animation logic

$('.hero_slider').owlCarousel({
  items: 1,
  dots: true,
  loop: true,
  autoplayTimeout: 8000,
  autoplay: true,
  nav: true,
  animateOut: 'fadeOut',
  navText: ['<i class="far fa-long-arrow-right"></i>', '<i class="far fa-long-arrow-left"></i>']
});

// Re-trigger entrance text animation per slide change
$('.owl-carousel').on('initialized.owl.carousel', () => {
  setTimeout(() => $('.owl-item.active .animated-text').addClass('is-transitioned'), 200);
});
$('.agency-slider-active').on('changed.owl.carousel', e => {
  $('.animated-text').removeClass('is-transitioned');
  $('.owl-item').eq(e.item.index).find('.animated-text').addClass('is-transitioned');
});

new WOW().init();

Notable details

• Outlined .number uses -webkit-text-fill-color: transparent + -webkit-text-stroke to render a giant ghost numeral over photography — readable on busy backgrounds without darkening the image.
• Each WOW class on the headline / paragraph / buttons has hand-tuned data-wow-duration / data-wow-delay so the entrance plays as a stagger rather than a synchronous fade.
• animateOut: 'fadeOut' makes outgoing slides crossfade rather than slide horizontally — fits a stately law-firm tone.

Use when

• Photography-led heroes for traditional service brands (law, real estate, hospitality).
• You want one clear CTA but room for two without making them compete visually.
• Slow-paced autoplay (≥ 8s) suits the content density — not for fast product showcases.

Caveats

• Three slides ship with identical headline copy in source — replace before launch.
• Owl Carousel is jQuery-only; in a React/Next port substitute Swiper or Embla.
• libraries records swiper as the closest vocab match; the actual library is Owl Carousel (no owl-carousel value exists in vocabularies.json).