How to Create a Simple Image Carousel in Squarespace

Image carousels (also called sliders) are a classic approach for adding multiple images to a page in a small amount of space. ​Whether you’re showcasing products, developing a portfolio, or adding some narrative material to a site, a great carousel image slideshow will immediately attract any visitor and keep them interested.

Squarespace 7.1 doesn’t have a carousel block, per se, but you’re not out of luck. There are several ways to create a clean, responsive photo carousel that fits in with your site’s design, from built-in gallery functionality to code that you can hack yourself to using simple no-code hacks, third-party plugins, and more.

In this guide, we’ll show you how to put one together using a few different techniques, from beginner-friendly to more advanced, so you can choose the best one for your design goals and comfort level with technology.

Option 1: Use Squarespace’s Built-In Gallery Slideshow (No Code)

Best for:

• Quick photo slideshows

• Portfolio and product images

• Basic navigation arrows

How to Set It Up:

1. Edit the Page → Click “+ Add Section”

2. Choose “Gallery” → Select “Slideshow” Layout

3. Click “Edit Gallery” to upload your images

4. Adjust settings:

• Transition style (slide/fade)

• Auto-play toggle

• Image aspect ratio

• Navigation arrows or dots

Your slideshow is now live!

Note: This method is perfect for visual display but does not support captions, overlays, or text animations.

Option 2: Use an Image Block Carousel with Stacked Sections (Creative No-Code Hack)

Best for:

• Lightweight manual carousels

• Highlighting images with separate captions or buttons

How to Set It Up:

1. Add multiple Image Blocks inside a Carousel Layout (Grid or Slideshow)

2. Group them using a Spacer Block or Grid Wrapper

3. Apply scroll animations (Design → Animations)

4. Optional: Use CSS (see below) to align, space, or scroll them like a slider

Visually clean, no external tools, but it doesn’t slide automatically.

Option 3: Use a Third-Party Carousel Widget (No Code, Fully Customizable)

Best for:

• Complete control over design, speed, and behavior

• Drag-and-drop setup

Recommended Tools:

• Elfsight Slider Widget

• LightWidget

• Flickity (requires external JS)

How to Use Elfsight (Example):

1. Visit Elfsight Image Slider

2. Customize your carousel: style, auto-play, arrows, captions, etc.

3. Copy the embed code

4. In Squarespace, add a Code Block and paste the code

5. Save and preview

Looks and feels like a pro slider—no coding needed.

Option 4: Add a Custom HTML/CSS/JS Carousel (Advanced)

Best for:

• Developers or advanced users

• Full control over design and interactions

You can create a custom carousel using

• Swiper.js

• Glide.js

• Splide.js

Just host the libraries externally and embed the layout and script inside a Code Block.

Need a working code sample for this? Let me know—I’ll give you a lightweight copy-paste version!

Final Tips for a Great Carousel

Tip	Benefit
Resize images before uploading.	Faster loading, sharper quality
Keep file sizes < 500KB	Improves mobile speed
Use consistent aspect ratios	Maintains alignment and fluidity
Check on all devices	Make sure it’s responsive
Limit the number of images	Prevents lag and bloat

Final Thoughts

Creating an image carousel in Squarespace 7.1 is simpler than many people realize, and you don’t have to go with a one-size-fits-all solution. If you would like something fast and easy, use the Gallery Slideshow. If you’d prefer more control, third-party widgets or lightweight custom code can unleash advanced features like autoplay, custom transitions, and responsive design tweaks.

The trick here is to balance function and performance; clean up your images and ensure your file sizes are minimal, and always, always test for responsiveness across devices. When done right, an image carousel won’t just show pictures—it will tell a story, introduce your brand, and make your site more enjoyable to browse.

---

Frequently Asked Questions

• 1. Does Squarespace have a built-in image carousel feature?

  Yes. For Squarespace 7.1, you can use a Gallery → Slideshow layout to make a basic image carousel with nav arrows, autoplay, and transitions.

• 2. Can I add captions or overlays to the built-in slideshow?

  Not directly. The default Gallery slideshow is rather bare. For callss to action, buttons, or overlays, you will want to use the image blocks with over or stacked sections or a third-party widget.

• 3. What is the simplest no-code way to build a good-looking custom carousel?

  The simplest solution is to apply the extension—Elfsight Slider, for example. It enables you to style, control speed, and add captions without touching code—simply copy and paste the provided code into a Squarespace Code Block.

• 4. What can I do to ensure my carousel is fast on mobile?

  Resize before uploading, keep file sizes under 500KB, and maintain consistent aspect ratios. It helps to make the show run buttery smooth on all devices.

• 5. Can you create a completely custom carousel in Squarespace?

  Yes. Ability for advanced/skilled users to paste libraries such as Swiper.js, Splide.js, or Glide.js (via a Code Block) with bespoke HTML/CSS/JS. This offers functionalities for animations and interactions.