Logo Carousel

Usage

Logo Carousel displays a horizontally scrolling row of logos or images. Use it for partner marks, sponsor strips, certification badges, or any set of brand assets that should cycle automatically across the page.

The block is built on Flickity. Logos autoplay on a timer, wrap infinitely, and can be dragged by visitors. There are no prev/next arrows or page dots β€” the carousel is meant to feel lightweight and continuous.

Add at least one image in Logo Gallery before the block renders on the front end. Until then, the editor shows an empty-state placeholder.

Sidebar fields

All settings appear in the block sidebar when Logo Carousel is selected:

  • Autoplay Interval β€” seconds between automatic transitions (0.1–10, default 3). Support recommends about 3 seconds or longer so logos remain readable.
  • Logo Gallery β€” media gallery of logo images (minimum one). Add, remove, or reorder images from the gallery picker.
  • Logo Height β€” uniform height for every logo in pixels (4–512, default 48). Width scales automatically to preserve each image's aspect ratio.

Front-end behavior

Each gallery image renders at the configured height with automatic width. Images use the thumbnail size from the media library.

Flickity options set by the block:

  • Autoplay β€” driven by Autoplay Interval (converted to milliseconds)
  • Wrap around β€” infinite loop
  • Draggable β€” visitors can drag to browse
  • Cell align β€” centered
  • Contain β€” slides stay within the carousel width
  • No prev/next buttons or page dots

Autoplay pauses on hover (Flickity default). When the browser tab is hidden, playback pauses until the tab is visible again.

Block width

Logo Carousel supports Wide and Full alignment from the block toolbar and defaults to Full width β€” a good fit for edge-to-edge logo strips.

  • Wide β€” uses more horizontal space than default content width.
  • Full β€” spans the full page width; adjacent full-width blocks sit flush with no gap between them.

Tips

  • Upload logos with transparent backgrounds (PNG or SVG) when possible so they sit cleanly on any page background.
  • Set Logo Height once on the parent block rather than cropping each image individually β€” all logos share the same height.
  • Use Autoplay Interval of 3 seconds or more so visitors can read each mark before it moves on.
  • For a single-row static logo grid without motion, consider a Grid or custom layout instead.
  • For full photo slides with navigation, use Slideshow or Lookbook instead.

Screenshots

Editor

  • Block sidebar with Autoplay Interval, Logo Gallery, and Logo Height controls.

Settings

Autoplay Interval setting in the block editor sidebar
Autoplay Interval

Autoplay delay in seconds (0.1–10, default 3). Controls how long each logo stays visible before the carousel advances.

Logo Height setting in the block editor sidebar
Logo Height

Uniform logo height in pixels (4–512, default 48). Width scales automatically to preserve each image's aspect ratio.