Infinite Carousel
An auto-scrolling image ticker with multiple independent columns. Each column scrolls in its own direction and speed, creating a dynamic masonry-style motion effect. Commonly used for logo strips, portfolio grids, and image galleries.
Adding an Infinite Carousel
/ → Infinite Carousel
Type /infinite or /logo on any empty block.
Block palette
Click + on any block → Media → Infinite Carousel.
Columns
The carousel is made up of one or more vertical columns. Each column has its own set of images and its own scroll configuration — direction, speed, and reverse. Columns are displayed side by side with configurable gap and percentage-based widths.
Images
Upload images or paste URLs into each column independently. Images loop seamlessly by duplicating the list.
Direction
Up or Down in the default vertical orientation — or Left/Right if the carousel's Orientation setting (in Canvas settings below) is switched to horizontal. Mixing directions on adjacent columns creates a dynamic contrast effect.
Speed
Seconds for one full loop (range 8–120), not pixels per second. Default is 40 for the first column, 55 for the second. Higher = slower.
Reversed
Starts the column scrolled to the bottom instead of the top, so adjacent columns are visually offset.
Width %
Flex-basis percentage of the total carousel width. Columns default to equal split. Adjustable per column.
Canvas settings
Orientation
Vertical (default) or Horizontal. Switching to horizontal also changes each column’s Direction options from Up/Down to Left/Right.
Column count
Number of columns. Default 2. Add or remove columns from the canvas settings tab.
Gap
Pixel gap between columns. Default 12px.
Image size
Width and height of each image tile in pixels. Images are cropped to a square by default.
Border radius
Rounds the corners of each image tile.
Pause on hover
When enabled, scrolling pauses when the cursor is over the carousel. Default: on.
Fade edges
Adds a gradient mask that fades the images out at the top/bottom (or left/right, in horizontal orientation) edges of the carousel.
Container height
Overall height of the carousel viewport.
Per-image options (set individually, not per column): background color, object-fit, an optional link URL, and an optional caption.
For a logo strip, set all columns to the same direction and speed, use a horizontal layout (left/right direction), and keep image sizes small. For a portfolio grid, use 3 columns with alternating up/down directions and larger image sizes.
The carousel loops by duplicating the image list internally — no visible seam. Each column independently animates using CSS animations set via JavaScript on mount, so they stay smooth even on long pages.