Swiper Infinite Logo Marquee — Free JS Snippet

<div class="lm-wrap">
  <p class="lm-title">Trusted by product teams at</p>
  <div class="lm-rows">
    <div class="swiper lm-swiper" id="lmA" aria-label="Customer logos, first row"><div class="swiper-wrapper"></div></div>
    <div class="swiper lm-swiper" id="lmB" aria-label="Customer logos, second row"><div class="swiper-wrapper"></div></div>
  </div>
  <div class="lm-ctl">
    <button type="button" id="lmToggle" aria-pressed="false">Pause</button>
    <span>Hover a row to pause it &middot; rows move in opposite directions</span>
  </div>
</div>

body { background: #f6f7fb; padding: 26px 16px; font-family: system-ui, sans-serif; }
.lm-wrap { max-width: 780px; margin: 0 auto; text-align: center; }
.lm-title { margin: 0 0 18px; font: 800 12.5px/1 system-ui, sans-serif; letter-spacing: .14em; text-transform: uppercase; color: #7a8199; }
.lm-rows { display: grid; grid-template-columns: minmax(0, 1fr); gap: 14px; -webkit-mask-image: linear-gradient(90deg, transparent, #000 12%, #000 88%, transparent); mask-image: linear-gradient(90deg, transparent, #000 12%, #000 88%, transparent); }
/* Swiper's own CSS gives .swiper auto left/right margins, and a grid item with auto margins
   shrinks to its content instead of stretching. Without the explicit width each row would
   measure as wide as all its logos laid end to end, and Swiper could never loop. */
.lm-swiper { width: 100%; min-width: 0; }
.lm-swiper .swiper-wrapper { transition-timing-function: linear !important; }   /* constant speed: no easing between slides */
.lm-swiper .swiper-slide { width: auto; }
.lm-logo { display: inline-flex; align-items: center; gap: 10px; padding: 12px 22px; background: #fff; border: 1px solid #e3e6f0; border-radius: 999px; font: 800 16px/1 system-ui, sans-serif; color: #2b3150; white-space: nowrap; box-shadow: 0 2px 8px rgba(20,25,70,.05); }
.lm-logo i { width: 18px; height: 18px; border-radius: 5px; display: inline-block; }
.lm-ctl { display: flex; justify-content: center; align-items: center; gap: 14px; margin-top: 20px; font-size: 12.5px; color: #7a8199; flex-wrap: wrap; }
.lm-ctl button { font: 800 12.5px/1 system-ui, sans-serif; color: #4338ca; background: #eef0ff; border: 0; border-radius: 999px; padding: 9px 16px; cursor: pointer; }
.lm-ctl button:hover { background: #e0e4ff; }
@media (prefers-reduced-motion: reduce) { .lm-rows { -webkit-mask-image: none; mask-image: none; } }

const ROW1 = [['Northwind', '#6366f1'], ['Acme Labs', '#f97316'], ['Globex', '#10b981'], ['Initech', '#0ea5e9'], ['Umbrella', '#ef4444'], ['Hooli', '#8b5cf6'], ['Stark & Co', '#f59e0b']];
const ROW2 = [['Wayne Tech', '#334155'], ['Soylent', '#84cc16'], ['Vandelay', '#ec4899'], ['Cyberdyne', '#14b8a6'], ['Tyrell', '#6366f1'], ['Massive', '#f43f5e'], ['Pied Piper', '#22c55e']];

// Swiper's loop mode needs more slides than fit on screen at once, otherwise it logs
// "not enough slides for loop mode" and stops looping. Seven logos only just clear that on a
// 780px row, so each row is rendered twice for headroom; the copy is hidden from screen readers.
function fill(id, list) {
  document.querySelector('#' + id + ' .swiper-wrapper').innerHTML = list.concat(list).map(function (l, i) {
    return '<div class="swiper-slide"' + (i >= list.length ? ' aria-hidden="true"' : '') + '><span class="lm-logo"><i style="background:' + l[1] + '"></i>' + l[0] + '</span></div>';
  }).join('');
}
fill('lmA', ROW1); fill('lmB', ROW2);

// Continuous motion: a very long transition (speed) and an autoplay delay of 0 means the next
// slide starts the instant the last one lands, so it never appears to stop.
function marquee(id, reverse) {
  return new Swiper('#' + id, {
    loop: true,
    slidesPerView: 'auto',        // slides are as wide as their content
    spaceBetween: 14,
    speed: 6000,
    allowTouchMove: false,        // a marquee is decorative; dragging it would fight the autoplay
    autoplay: { delay: 0, disableOnInteraction: false, reverseDirection: reverse },
    freeMode: true,
    a11y: { enabled: false },
  });
}
const rows = [marquee('lmA', false), marquee('lmB', true)];

// Pause an individual row while it is hovered.
rows.forEach(function (s) {
  s.el.addEventListener('mouseenter', function () { s.autoplay.stop(); freeze(s); });
  s.el.addEventListener('mouseleave', function () { s.autoplay.start(); });
});

// Autoplay.stop() lets the current transition finish. To freeze IMMEDIATELY, pin the wrapper where it is.
function freeze(s) {
  const t = s.getTranslate();
  s.setTransition(0);
  s.setTranslate(t);
  s.wrapperEl.style.transitionDuration = '0ms';
}

// A pause control for people who find continuous motion distracting (WCAG 2.2.2).
const btn = document.getElementById('lmToggle');
let paused = false;
btn.addEventListener('click', function () {
  paused = !paused;
  rows.forEach(function (s) { if (paused) { s.autoplay.stop(); freeze(s); } else s.autoplay.start(); });
  btn.textContent = paused ? 'Play' : 'Pause';
  btn.setAttribute('aria-pressed', String(paused));
});

// Honour the OS-level reduced-motion setting by not starting at all.
if (window.matchMedia && window.matchMedia('(prefers-reduced-motion: reduce)').matches) {
  rows.forEach(function (s) { s.autoplay.stop(); freeze(s); });
  btn.textContent = 'Play'; btn.setAttribute('aria-pressed', 'true'); paused = true;
}