clients-logo-carousel

Summary

Five-up looping carousel of brand SVG logos with a centered headline above ("We're proud to work with a diverse range of companies.") and a thin trust-bar pill below ("More than 200+ companies trusted us worldwide"). Logos are 100px and use opacity to feel monochrome on the dark background.

HTML structure (minimal)

<section class="clients-carso section-padding pt-0">
  <div class="container">
    <div class="row justify-content-center">
      <div class="col-lg-6 col-md-10">
        <div class="sec-head text-center mb-80">
          <h3>We're proud to work with <br /> a <span class="opacity-7">diverse range of companies.</span></h3>
        </div>
      </div>
    </div>
    <div class="swiper5">
      <Swiper>
        <SwiperSlide>
          <div class="item">
            <div class="img icon-img-100"><img src="/assets/imgs/brands/c1.svg" alt="" /></div>
          </div>
        </SwiperSlide>
        <!-- 4 more slides -->
      </Swiper>
    </div>
    <div class="sec-bottom mt-100">
      <div class="main-bg d-flex align-items-center">
        <h6 class="fz-14 fw-400">More than <span class="fw-600"> 200+ companies</span> trusted us worldwide</h6>
      </div>
    </div>
  </div>
</section>

Key SCSS tokens

.clients-carso {
  .item {
    display: flex;
    align-items: center;
    justify-content: center;
    height: 80px;
    img { max-width: 100px; opacity: .55; transition: opacity .3s; filter: grayscale(1); }
    &:hover img { opacity: 1; filter: grayscale(0); }
  }
  .sec-bottom {
    border: 1px solid rgba(255, 255, 255, .08);
    border-radius: 60px;
    padding: 20px 40px;
    text-align: center;
  }
}

Animation logic

const swiperOptions = {
  slidesPerView: 5,
  loop: true,
  spaceBetween: 40,
  breakpoints: {
    0:    { slidesPerView: 2 },
    768:  { slidesPerView: 3 },
    1024: { slidesPerView: 5 },
  },
};

Notable details

• Logo opacity + grayscale lift on hover keeps the dark layout calm but rewards inspection — common but cleanly executed.
• The "200+ companies" pill below repurposes the section's CTA pattern; reads like a stat tile but is purely decorative.
• No autoplay: drag-only. Lower friction for users who want to read each logo.

Use when

• Trust-bar bands on agency / SaaS landings where you have 5–20 client logos.
• When you don't want autoplay drift to compete with a marquee elsewhere on the page.

Caveats

• Logos are SVG; if your real brand files are PNG, you'll need to add width / height attributes to keep the 100px slot.
• slidesPerView: 5 with only 5 items doesn't loop — supply more logos than visible to avoid Swiper duplicating slides.