brand-marquee

Summary

Six-up Owl autoplay logo strip rendered over a dark photographic banner background, used as a visual divider between the why-choose-us block and the testimonial section.

HTML structure (minimal)

<div class="brand_wrapper section-padding bg-center bg-cover" style="background-image: url(1920x300.jpg)">
  <div class="container">
    <div class="brand_widget owl-carousel">
      <div class="single_brand"><img src="c_logo_07.png" alt=""></div>
      <div class="single_brand"><img src="c_logo_08.png" alt=""></div>
      <div class="single_brand"><img src="c_logo_09.png" alt=""></div>
      <div class="single_brand"><img src="c_logo_10.png" alt=""></div>
      <div class="single_brand"><img src="c_logo_11.png" alt=""></div>
      <div class="single_brand"><img src="c_logo_12.png" alt=""></div>
    </div>
  </div>
</div>

Key SCSS tokens

.brand_wrapper {
  position: relative;
  &::before {
    content: ''; position: absolute; inset: 0;
    background: rgba(34,33,39,0.85);
    z-index: 0;
  }
  .container { position: relative; z-index: 1; }
  .single_brand {
    display: flex; align-items: center; justify-content: center;
    img {
      max-height: 60px;
      filter: brightness(0) invert(1);
      opacity: .7;
      transition: opacity .3s ease;
    }
    &:hover img { opacity: 1; }
  }
}

Animation logic

$('.brand_widget').owlCarousel({
  items: 6,
  dots: false,
  loop: true,
  autoplay: true,
  autoplayTimeout: 8000,
  nav: false,
  responsive: {
    0:    { items: 1 },
    500:  { items: 2 },
    900:  { items: 3 },
    1100: { items: 5 },
    1200: { items: 6 }
  }
});

Notable details

• Logos are forced to white via filter: brightness(0) invert(1) — a classic trick that lets you ship colourful brand assets and still get a clean monochrome row.
• Background photo + dark overlay turns this into a dramatic divider rather than the usual flat white logo strip.
• Responsive items config drops to 1-up on phones smoothly without a separate carousel instance.

Use when

• You need a dark, atmospheric "as featured in" / clients band between two light sections.
• Brand assets are mixed colour and you want them visually unified.
• You want a slow autoplay (≥ 8s) rather than continuous scroll.

Caveats

• The white-out filter destroys logos that rely on colour for legibility (e.g. multi-tone wordmarks). Override with class for those.
• Owl Carousel requires jQuery; in a React port substitute Swiper or Embla.