How to make two Squarespace List items move together

Why This Matters

You're part-way through building what should be a tidy, visually sharp website in Squarespace. The client wants a scrolling carousel: lush imagery paired with matching snippets of text, one for each slide. You spend a while lining everything up, checking that each photo whisperingly matches its headline. You publish. But the minute you try flicking through the list, only the photo moves, or just the text. Suddenly, your pairs are out of sync. That side-by-side “narrative” effect is lost. If you're building a portfolio, case study sequence, or any content that relies on text and images staying in lockstep, this hurts. It confuses users, kills your momentum and, if you’re selling a story or a product, it looks like a misfire.

Hours can get sucked away hunting for a solution, trying endless workarounds, or resigning yourself to something that almost works. For web designers and site owners, these mismatches turn a simple interaction into a time-consuming ordeal.

Common Pitfalls

Squarespace is (mostly) great at keeping designers out of real trouble, but it can also hide some of the details you need to fix fiddly things. The most common issues include:

• Assuming list pairs sync automatically: They don’t. Out of the box, Squarespace carousel arrows move only one band of content. Text and images, no matter how you group them, become unsynchronised on click.
• Using the wrong selector: Slapping in a code snippet from a forum often affects every carousel on your site, not just the one you want to fix.
• Messing with CSS when JS is needed: You can style anything with CSS, but to make two interactive elements react together, you need a touch of JavaScript.
• Copy-pasting incomplete code: A lot of snippets just start you off, but they leave out the actual logic that triggers movement in both elements. Result: nothing happens.

Many designers and site owners run into these same issues at some point in their web design projects.

Step-by-Step Fix

Below is a clear process to sync those rogue list items. This approach works if you want your paired text and image carousels (or similar) to scroll together when a visitor clicks an arrow.

1. Identify the List You Want to Sync

Every carousel or list in Squarespace has a unique identity, even if you can't see it up front. Before you start, pinpoint the exact section or list you need to target. Applying this effect site-wide typically isn’t recommended.

• Option A: Use the Squarespace ID Finder Chrome extension to locate the right ID on your page.
• Option B: Inspect your page’s HTML (Right-click, then ‘Inspect’) and look for a data attribute like data-section-id on the parent container of your list or carousel.

Write down the result. You’ll need this to limit your custom code to just this section.

2. Add Your Custom Code Safely

Next, you’ll set up your custom code. Only the Business plan (or higher) lets you inject JavaScript, so double-check you’re not on Personal. Head to:
Settings > Advanced > Code Injection
Drop your code in the Footer section, not the Header (Footer loads later, once everything else is ready). This ensures your script sees all the list items and controls.

Minimal Working Example: Here’s a basic script to pair left/right arrow clicks, keeping both your lists (e.g. images and text) synced so each slide matches.

Replace YOUR-SECTION-ID below with the one you found in Step 1.

<script>
document.addEventListener('DOMContentLoaded', function() {
  // Get your section only
  const section = document.querySelector('[data-section-id="YOUR-SECTION-ID"]');
  if (!section) return;

  // Get both carousels in this section
  const carousels = section.querySelectorAll('.user-items-list-carousel');
  if (carousels.length < 2) return; // need at least two to pair

  // Assume first is images, second is text (adjust if needed)
  const [carouselA, carouselB] = carousels;

  // Get their arrow buttons
  const arrowsA = carouselA.querySelectorAll('.user-items-list-carousel__arrow-button');
  const arrowsB = carouselB.querySelectorAll('.user-items-list-carousel__arrow-button');

  function mirrorClick(index) {
    arrowsA[index].addEventListener('click', function() {
      arrowsB[index].click();
    });
    arrowsB[index].addEventListener('click', function() {
      arrowsA[index].click();
    });
  }

  // Hook both left (0) and right (1) arrows:
  [0,1].forEach(mirrorClick);

});
</script>

3. Adjust the Pairing Logic as Needed

Some Squarespace templates or block add-ons may not use a “pairs” logic for you. Images and text could sit in their own carousels, or they might be single composite blocks. If your carousel structure is non-standard (e.g., using Summary Blocks with custom code), consider writing a slightly different event listener, or make sure your selectors only target the lists you want.

• If you have three carousels, expand the mirror logic to include all three.
• If the left and right buttons aren’t at the same DOM depth, update the querySelector accordingly.

Test by clicking left and right on either text or image arrows to make sure both advance at once and stay matched.

4. Test Thoroughly. Then Test Again

Web browsers often introduce small surprises. Try clicking:

• Left and right arrows on both the image and text carousels
• Rapid-fire clicking
• On both desktop and mobile

Check for lag, double jumps, or any strange behaviour such as two slides advancing at once.

If clicks are being counted twice, check that your code isn’t triggering a feedback loop where each arrow click calls the other. In this case, add a flag to block recursion:

let isSyncing = false;
function mirrorClick(index) {
  arrowsA[index].addEventListener('click', function() {
    if (isSyncing) return;
    isSyncing = true;
    arrowsB[index].click();
    isSyncing = false;
  });
  arrowsB[index].addEventListener('click', function() {
    if (isSyncing) return;
    isSyncing = true;
    arrowsA[index].click();
    isSyncing = false;
  });
}

5. Limit the Script to One Section

If you’re building a multi-carousel page, accidentally syncing all carousels site-wide will cause confusion. Double-check your code is wrapped in a block that only runs for the intended list or section, using the data-section-id as shown above.

If you need this functionality elsewhere, copy the script and change the data-section-id for each one. Avoid syncing several lists unless you specifically need it.

6. Rollback Plan: How to Fix if Things Break

Even experienced developers sometimes paste code that disrupts an entire page. If problems occur:

• Remove the code from Footer Injection first.
• Clear your site cache and reload.
• If your buttons still don’t work, inspect the elements and check if your selectors are correct or if the class names have changed since the last update.

For extra safety, save your working script in a Notepad file before editing so you can always revert to a known good version.

What Most People Miss

A subtle point often overlooked is that it’s easy to chase increasingly complex code to force mismatched elements to work together. Focusing on precise targeting and only syncing carousels or lists that have a real storytelling purpose is usually a better strategy. Careful restraint leads to a cleaner, more effective result. Another helpful habit: document your selectors and any code changes in a running doc or spreadsheet. This makes future fixes faster and helps you maintain a clear record of what was changed and where.

Some users will try to “fix” this with code they haven’t fully understood and may run into issues after a Squarespace update. A better approach is to know why your code is present and write only what’s needed to do the job effectively.

The Bigger Picture

Solving paired list item syncing can feel like a small, slightly technical victory, but ensuring pictures and captions stay coordinated benefits the entire user experience. Each time you sort out details like this, you protect the trust and attention of your visitors. Attention to detail has a cumulative effect. For a freelancer or agency, getting this right once gives you a reusable fix for all future projects and a consistent, reliable system.

Anyone who has spent hours troubleshooting in Squarespace and aims to get more advanced will benefit from refining these skills. Over time, you save time and energy across projects. Clients see the results. Your web builds go beyond standard templates and start to become effective, custom solutions.

Wrap-Up

Keeping paired list items in sync on Squarespace requires a bit of JavaScript and some careful testing. Select your target, fine-tune your selectors, and check your work before publishing. Smooth carousels are fully achievable. For more practical web fixes, real-world guidance, and a helpful community, join Pixelhaze Academy for free at https://www.pixelhaze.academy/membership.