Implement Autoplay for User Item List Carousels in Squarespace
User Item List Carousels are a fantastic way to treat your Squarespace site visitors to your products, testimonials, or services. However, what if you need to have them scroll automatically, with no user interaction?
In this step-by-step guide, I’ll show you how to add autoplay to user item list carousels in Squarespace 7.1 with some simple JavaScript. This guide doesn't include summary blocks or gallery sections; this is all about the items list, maintaining full control over the layout.
Why Add Autoplay Carousels?
Autoplay gives your Squarespace carousel a dynamic touch and makes it more engaging. It:
Shows additional content without clicks from the user
Maintains visitors’ focus with seamless movement
Show off important things like products or testimonials
Enhances user experience, particularly for mobile users
More likely to attract clicks and generate conversions
A step-by-step guide to autoplaying a Squarespace carousel
Step 1: Identify Your Carousel’s Section ID
Each carousel is wrapped inside a unique <section> with a data-section-id. Here’s how to find it:
How to Get the Section ID:
Open your live site (not in the editor).
Right-click on the carousel and select Inspect to open Developer Tools.
Locate the nearest <section> above the carousel with data-section-id.
Copy the ID — e.g.:
<section data-section-id="5f4eabc123456">
Step 2: Add the JavaScript Code
This JavaScript adds autoplay behavior using an arrow button simulation.
Where to Add:
Go to Settings → Advanced → Code Injection → Scroll to the Footer section
Paste the following code:
<script>
(function(){
let timing = 3; // seconds between slides
let section = '[data-section-id="YOUR_SECTION_ID"]'; // Replace this
let direction = 1; // 1 = forward, 0 = backward
function AutoScrollLayout(targetSelector){
const el = document.querySelector(targetSelector || ".user-items-list-section");
if (!el) return;
let arrows = el.querySelectorAll('button[class*="__arrow-button"]');
if (!arrows.length) return;
let visible = false;
let isPaused = false;
let interval;
function scrollSlide() {
if (!isPaused && visible) {
arrows[direction]?.click();
}
}
function startInterval() {
interval = setInterval(scrollSlide, timing * 1000);
}
function stopInterval() {
clearInterval(interval);
}
document.addEventListener("visibilitychange", () => {
isPaused = document.hidden;
});
["mousedown", "touchstart"].forEach(ev =>
el.addEventListener(ev, () => {
isPaused = true;
stopInterval();
})
);
["mouseup", "touchend"].forEach(ev =>
el.addEventListener(ev, () => {
isPaused = false;
startInterval();
})
);
if ("IntersectionObserver" in window) {
let observer = new IntersectionObserver((entries) => {
entries.forEach(entry => visible = entry.isIntersecting);
}, {
rootMargin: "-50px 0px -50px 0px"
});
observer.observe(el);
}
startInterval();
}
window.addEventListener("load", () => {
let selectors = section.split(",");
selectors.forEach(sel => AutoScrollLayout(sel.trim()));
});
})();
</script>
Don’t forget to replace:
[data-section-id="YOUR_SECTION_ID"]
With your actual section ID (e.g., 5f4eabc123456).
Step 3: Save and Test
After pasting the code:
Click Save to apply the changes.
Visit the page with your carousel.
Observe the items auto-scroll every few seconds.
You can change the timing value (e.g., 5) to make the delay longer between transitions.
Bonus: Add Multiple Carousels
To target multiple carousels, use a comma-separated list:
let section = '[data-section-id="ID1"], [data-section-id="ID2"]';
Just separate multiple IDs with commas!
Important Notes
Adjust the timing variable to set the interval between slides (in seconds).
Make sure the carousel has enabled navigation arrows, as the script is using clicks on them to proceed with the slide change.
It only works for user item list sections and not with gallery blocks or summary blocks.
It uses Intersection Observer to see if the section is in the viewport.
Autoplay stops when the user interacts (e.g., on drag/click/touch).
Play automatically resumes after the interaction ends.
Final Thoughts
This minor adjustment has a significant visual impact on your Squarespace website. Whether you are displaying testimonials, logos, or product slides, autoplay on user item list carousels can enhance the attention span, the engagement, and the conversions.
FAQ: Autoplay Carousels in Squarespace
1. Can I enable autoplay without custom code in Squarespace?
Currently, Squarespace does not natively support autoplay in item list carousels without code or third-party tools.
2. Does autoplay work on all Squarespace templates?
Only templates with carousel-style sections or custom code support autoplay. It works best in 7.1 and Fluid Engine.
3. How can I stop autoplay on mobile?
Modify the script to detect screen width and disable autoplay if under a certain pixel value.
