brand-marquee-row

Summary

Horizontal Swiper-driven brand strip with a sticky label column ("Clients I've Worked With") on the left and a continuously sliding row of client logos on the right, framed top and bottom by hairline rules.

HTML structure (minimal)

<div class="tp-brand-area">
  <div class="container container-1630">
    <div class="tp-brand-brd-top tp-brand-ptb">
      <div class="row align-items-center">
        <div class="col-xxl-2 col-xl-3">
          <div class="tp-brand-title-box">
            <h4 class="tp-brand-title tp_fade_bottom">Clients I've Worked With</h4>
          </div>
        </div>
        <div class="col-xxl-10 col-xl-9">
          <div class="tp-brand-slider-wrapper">
            <!-- Swiper instance: slidesPerView 5, autoplay, loop, FreeMode -->
          </div>
        </div>
      </div>
    </div>
  </div>
</div>

Key SCSS tokens

.tp-brand-brd-top { border-top: 1px solid var(--tp-border-1); }
.tp-brand-ptb { padding-block: 70px; }
.tp-brand-title { font-size: 16px; color: var(--tp-text-body); }
.tp-brand-slider-wrapper .swiper-slide { display: flex; align-items: center; justify-content: center; }

Animation logic

// Swiper config (typical for this pattern):
new Swiper('.tp-brand-slider', {
  modules: [Autoplay, FreeMode],
  slidesPerView: 5,
  spaceBetween: 30,
  loop: true,
  freeMode: true,
  autoplay: { delay: 0, disableOnInteraction: false },
  speed: 6000,
});

Notable details

• Pairs an editorial label column with a kinetic logo row so the section reads as a sentence, not a press wall.
• freeMode + autoplay delay 0 + speed 6000 creates the smooth conveyor-belt look without a CSS marquee hack.
• Border-top + border-bottom utility classes pin the strip vertically so it doubles as a section divider.

Use when

• Press / clients sections that should keep moving even when the user is reading nearby copy.
• When you want a single brand row instead of a 4×n logo grid.

Caveats

• Logos must be roughly equal height (PNG with transparent padding) or the row will wobble.