How To Add Scrolling Images In Squarespace

HAIDER
21 Sept, 2025

How to create horizontal scrolling images in Squarespace

Today, I’m going to show you how to add scrolling images to your Squarespace site. It’s a sleek, horizontal marquee effect that’s great for displaying logos, product photos, or any visuals you want to spotlight. The best part? It looks great on both desktop and mobile, and you can tweak the speed, size, and spacing to fit your style perfectly.

How To Add Scrolling Images In Squarespace

By the end of this guide, you’ll know how to:

  • Set up a gallery section in Squarespace
  • Add custom CSS to make it scroll horizontally
  • Adjust the design so it fits your site's style

Step 1: Adding a Gallery Section

Let’s start with a section where your scrolling images will live. It’s super simple:

  • Go to Squarespace editor and click Add Section.
  • Now Choose Images from left side, then look for a gallery option with a tiny “i” icon—that’s your cue it supports auto-layout (which makes the scrolling magic possible).

adding-a-gallery-section

  • Click Edit Gallery to upload your images, or grab them from your site’s image library.
Squarespace Edit Gallery images
  • Want a specific order? Just drag and drop the images until they’re arranged exactly how you like.
Arrange Gallery Images Squarspace


Step 2: Adjust the Layout

Now as images have been uploaded in the gallery Now follow this step:

  • Select Edit Section → choose Grid: Simple.
  • Adjust aspect ratio as per your image sizes, Increase or decrease the number of columns as required.


  • Click Save when you’re done.

Step 3: Add Custom CSS

  • Here’s where the scrolling magic happens.
  • Go to Custom Code → Custom CSS.
  • Copy the CSS Code given below and paste it into your CSS Editor:

//This prevents the page from showing a horizontal scroll bar.
#page {
overflow-x:hidden
}
//dixplay:flex!important lays out the gallery items in a row.
//animation:slideshow 30s controls slideshow speed.
.gallery-grid-wrapper {
display:flex !important;
animation: slideshow 30s linear infinite
}
//min-width:50% used to adjust the size of image.
.gallery-grid-wrapper .gallery-grid-item {
 min-width: 50%;
 margin-right: 5%
}
//this code tells the gallery how to move.
@keyframes slideshow {
  0%    { left: 0; }
  100%  { left: -225%; }
}

  •  Click Save, and your gallery will now scroll automatically.
Adding CSS in Squarespace

Step 4: Customize the Effect

Here’s how you can tweak the code for your site:

  • Speed: Change 30s → lower numbers scroll faster, higher numbers scroll slower.
  • Image Size: Adjust min-width: 50% → bigger percentage makes larger images.
  • Spacing: Modify margin-right: 2% for more or less gap between images.
  • Scroll Distance: Change left: -225% depending on how many images you have.

Step 5:  How to Apply It to One Section Only

If you only want the scrolling effect on one gallery (not all galleries across your site), you’ll need the section ID:

  • Use a free Chrome extension like Squarespace ID Finder.
  • Copy the data-section-id and use it in place of #page.
  • Now only that specific gallery will scroll.

That’s it! You’ve just learned an easy way to make images scroll sideways on your Squarespace site. All you need is the gallery section and a small piece of code. It’s a simple trick that adds a fun, eye-catching effect—and the best part? You can adjust it to fit your style without needing to be a tech expert

It's Simple to Set Up

  • Add a gallery section.
  • Switch it to Grid: Simple layout.
  • Paste the CSS code.
  • Customize speed, spacing, and size.
  • Use a section ID if you only want it applied on single gallery section. 

Next Post Previous Post