Squarespace Auto-Scrolling Summary Carousel

Squarespace 7.1 does not include a native infinite scrolling carousel for summary content like products or blog posts. The default Summary Block only displays content in a static grid. To create an infinite auto-scrolling carousel in Squarespace, you need to add custom CSS and JavaScript either written yourself or using a pre-built plugin like the Squarespell Infinite Summary Carousel.

To create an infinite carousel in Squarespace: (1) Add a Summary Block and set it to Grid layout. (2) Find your section's unique ID using the "Find Squarespace Ids" Chrome extension. (3) Add CSS that converts the grid to a flex row and defines a translateX(-50%) scroll animation. (4) Add JavaScript in Footer Code Injection that clones all cards to double the list length, fixes lazy-loaded images, and triggers the animation after cloning is complete.

For the full walkthrough with screenshots, read our complete guide: How to Add an Infinite Summary Carousel for Squarespace

For Summary Block content (products, blog posts, testimonials), the Squarespell Infinite Summary Carousel is a highly effective solution. It uses native Squarespace blocks no app installs and includes CSS and JavaScript that create a seamless, GPU-accelerated infinite loop with hover-to-pause, image lazy-load fixing, and independent scoping for multiple carousels on the same page.

To make a Squarespace Summary Block scroll automatically: set it to Grid layout, add CSS that applies display:flex and a CSS animation moving the row left by 50% indefinitely, then add JavaScript that clones all summary items to double the list so when the animation completes 50% of its travel, it arrives back at the original starting position, creating a seamless loop.

Yes. Multiple carousels can run on the same Squarespace page without conflicting if each carousel's CSS is scoped to its section's unique data-section-id attribute. The Squarespell plugin includes separate CSS blocks for each section, and the JavaScript targets all Summary Block lists on the page automatically.

Images appear blank in cloned carousel cards because Squarespace uses lazy loading the real image URL is stored in a data-src attribute and only written to src when the element scrolls into view. The fix is to read the data-src value and write it to src before cloning. This must be done in JavaScript before the cloneNode() call.

Yes. The infinite scroll carousel works on mobile devices. The CSS animation uses will-change: transform for GPU acceleration, and card width can be reduced with a media query for smaller screens. The plugin documentation includes a ready-to-use mobile responsive CSS snippet.

To change the scroll speed of a Squarespace infinite carousel, find the CSS animation property and change the duration value. For example: animation: shopScroll 40s linear infinite change 40s to a lower number for faster scrolling or a higher number for slower scrolling. 20s is fast, 80s is slow.