How to Add a Curved Image Carousel in Squarespace 7.1
A continuously scrolling carousel for Squarespace, where your images ride a real 3D arc instead of a flat line.
Arc carousel
Images
Upload to Design → Custom Files (or any image block), then paste the address. Hover a thumbnail to preview it.
Size and speed
Spacing below zero overlaps the pictures. Height is a share of the screen, and the pictures are sized to fit it — if the row looks cut off, the code block is shorter than the animation, so drag its bottom edge down in the editor.
Curve
The pictures ride over a hill and lean with it. 0° is a flat row; below zero curves the other way, into a valley.
Appearance
Negative Reach pulls the shadow in behind the picture, so it never touches the border.
Heavier settings cannot beat the picture you uploaded — if it was small, it stays soft.
Behaviour
Save your changes
- Click Generate updated code
- Click Copy code
- Close this window (X in upper right)
- On this page, go into edit mode again, open this code block and select all (Ctrl/Cmd + A) — this deletes the existing code
- Paste the new code and Save
What is a curved image carousel?
A curved image carousel moves your images along an arc instead of a flat line. Each image tilts with the curve, so the row feels like it is bending around the viewer. It adds depth without needing a video or a heavy 3D scene.
Where it works well:
Portfolio highlights for photographers and designers, where 6 to 10 best images deserve a moment on the home page
Product or collection previews in a shop, as a teaser above the product grid
Behind-the-scenes or "life at the studio" strips on an About page
Testimonial photos or client logos shown as images
When to skip it:
When visitors need to read text inside the images, because the tilt makes text harder to read
When you only have 2 or 3 images, since the curve needs enough images to look intentional
In a section that already has another strong animation, where two moving elements compete for attention
How to add a curved image carousel in Squarespace 7.1 ?
1. Built-in gallery carousel.
Squarespace 7.1 has a Carousel layout in the Gallery block. It is free and reliable, but the images always move in a straight line. If a flat carousel is enough, use this:
Open your page and click Edit.
Hover over a section and click Add Block, then choose Gallery.
In the Content tab, upload your images.
In the Design tab, choose the Carousel layout.
Optionally turn on Automatically Transition Between Slides and Show Next and Previous Controls, then click Save.
If you want a full section instead of a block, add an Images section and set Gallery Type to Slideshow: Reel. It shows several images side by side, also in a straight line.
2. Custom code (write it yourself or hire a developer).
The code has to place each image on an arc, rotate it to follow the curve, loop it smoothly and stay responsive. The hard parts are resizing between desktop and mobile, and keeping it smooth with many images. If you code, it is a fun project. If you don't, hiring a developer for a custom carousel typically costs far more than a ready-made block.
3. Ready-made code block. (Easy copy-paste solution).
I built the Curved Image Carousel for Squarespace 7.1 for people who want the curved look without writing code. You paste one Code Block, then adjust it using sliders in a visual settings panel.
How to add a ready-made curved carousel, step by step. (No code)
Before you start: you will need a Core plan or higher. On the Personal plan, the carousel will not run.
Prepare your images. Choose 6 to 10 images with the same aspect ratio. Resize them to about 1500 px wide and compress them.
Open the page in edit mode, add a code block, and paste the code. Click Edit on the page where the carousel should go and add a new blank section so the carousel has room. Click Add Block, choose Code, and paste the carousel code.
Stretch the block. In the Fluid Engine grid, drag the Code Block to the full width of the section for the biggest impact.
Add your images and adjust the look. Open the settings panel with the gear icon. Add images, adjust curve, spacing, image ratio, shadows, speed, etc., using visual sliders. No coding skills needed.
Save and check the live page.
Design tips for the carousel
Keep one aspect ratio. Mixing portrait and landscape images breaks the rhythm of the curve.
Center the subject. Tilted images show their edges less, so keep faces and products in the middle of the frame.
Use a gentle curve on mobile. A strong arc that looks great on a wide screen can push images off a narrow phone screen.
Slow it down. A slower speed feels calmer and more premium, and visitors actually see each image.
Give it space. Leave plenty of empty space above and below the section so the curve has room to breathe.
Pick a calm background. A plain or softly colored section lets the images stand out. Busy backgrounds fight with the movement.
Keep file sizes small. Aim for under 300 KB per image so the page stays fast.
FAQ
Does Squarespace have a curved carousel built in? No. The built-in Carousel layout in galleries only moves in a straight line. A curve needs custom code.
Does a curved carousel work in Squarespace 7.0? This guide is for Squarespace 7.1. Version 7.0 uses a different editor, so the steps above will not match.
Will a curved carousel slow down my website? The code itself is light. Speed depends mostly on your images, so resize and compress them before adding them.
How many images should I use? Between 6 and 10 works well. Fewer looks empty on the curve, more makes the page heavier.
Want the curved carousel animation without coding?
Get a clean, fully customizable version — built specifically for Squarespace 7.1, tested & designed to be edited by non-coders. Copy. Paste. Done.
