All Patterns

Logo Carousel CSS

Configurable Data Attributes

Set these on the main .logo-carousel-css section element via the Etch Attributes Bar (Cmd+K) or HTML Panel.

data-speed

Controls animation duration.

  • slow — 60 seconds per cycle
  • normal — 30 seconds per cycle (default)
  • fast — 15 seconds per cycle

data-direction

Controls scroll direction.

  • ltr — Scrolls left (default)
  • rtl — Scrolls right

Example

<section class="logo-carousel-css" data-speed="fast" data-direction="rtl">

Notes

  • Pure CSS animation — no JavaScript required
  • Logos are duplicated in HTML for seamless loop
  • Animation pauses on hover
  • Logos are grayscale by default, full color on hover