half-bleed-testimonial-carousel

Summary

Dark section with a half-bleed jarallax portrait pinned to the right edge of the viewport and an Owl Carousel of large pull-quotes (testimonial copy as <h3 class="fs-32">) on the left, each with avatar and name.

HTML structure (minimal)

<section class="text-light bg-dark-2 section-dark no-top no-bottom overflow-hidden">
  <div class="container-fluid position-relative half-fluid">
    <div class="container">
      <div class="row">
        <div class="col-lg-6 position-lg-absolute right-half h-100">
          <div class="image jarallax">
            <img src="images/misc/s3.webp" class="jarallax-img" alt="">
          </div>
        </div>
        <div class="col-lg-6">
          <div class="me-lg-5 py-5 my-5">
            <div class="owl-single-dots owl-carousel owl-theme">
              <div class="item">
                <i class="icofont-quote-left id-color-2 fs-40 mb-4 d-block"></i>
                <h3 class="mb-4 fs-32">Experience unmatched legal expertise...</h3>
                <div class="de-flex align-items-center">
                  <img src="images/testimonial/1.webp" class="w-50px circle me-3" alt="">
                  <span>Donette Fondren</span>
                </div>
              </div>
              <!-- 7 more .item slides -->
            </div>
          </div>
        </div>
      </div>
    </div>
  </div>
</section>

Key SCSS tokens

section.bg-dark-2 { background: var(--bg-dark-2); }   /* #2b425d */
.half-fluid { padding: 0; }
.position-lg-absolute.right-half {
  position: absolute;
  right: 0; top: 0;
  width: 50vw;
  height: 100%;
}
.right-half .jarallax,
.right-half .jarallax-img {
  width: 100%; height: 100%;
}
.icofont-quote-left.id-color-2 { color: var(--secondary-color); } /* gold */
.owl-single-dots .owl-dots { display: flex; gap: .5rem; margin-top: 2rem; }
.owl-dot.active span { background: var(--secondary-color); }

Animation logic

jQuery(".owl-single-dots").owlCarousel({
  loop: true,
  margin: 0,
  nav: false,
  dots: true,
  smartSpeed: 600,
  autoplay: false,
  items: 1
});

Notable details

• The right-side image breaks the container by being position: absolute and width: 50vw, so it bleeds to the viewport edge while the carousel stays inside its grid column.
• Quote glyph uses icofont-quote-left in the gold accent — the only gold element in an otherwise navy section, anchoring the eye.
• Dots-only navigation (no arrows) keeps the dark background clean; testimonial advance is a deliberate user action.

Use when

• Brand-heavy testimonial sections where the speaker's photo deserves as much real estate as the quote.
• Any layout pattern that wants editorial half-bleed imagery without abandoning Bootstrap's container grid.

Caveats

• The bleed image only works with overflow-hidden on the parent section; nested in a constrained shell the absolute element will overflow its layout.
• Owl Carousel adds jQuery and CSS overhead — consider Swiper for new builds.