Squarespace Image Carousel

Native Carousel Options in Squarespace

Gallery Block - Carousel Layout

The Gallery Block offers a carousel (slideshow) layout option. Add a Gallery Block to your page, upload your images, and select the carousel layout in the block's design settings. You can configure transition effects (fade or slide), autoplay speed, navigation arrows, and indicator dots. This is the simplest way to add an image carousel to any Squarespace page.

The Gallery Block carousel displays one image at a time with navigation. It is best for hero sections, featured project showcases, and any context where you want visitors to focus on one image before moving to the next.

Gallery Block - Strip Layout

The strip layout displays multiple images in a horizontally scrolling row. Visitors scroll through the images by swiping (mobile) or using scroll gestures (desktop). This layout is more compact than the full carousel and works well for client logos, product thumbnails, and supporting imagery that does not need individual focus.

Summary Block - Carousel Layout

The Summary Block pulls content from a blog, portfolio, or store collection and displays it in a carousel format. Each slide shows the item's thumbnail, title, and excerpt. Use it to showcase recent blog posts, portfolio projects, or featured products in a scrolling format. Configure the number of visible items and navigation behavior in the block settings.

Customizing Squarespace Carousels with CSS

Controlling Carousel Size and Aspect Ratio

Override the default carousel dimensions with Custom CSS. Set a specific height for the carousel container to prevent layout shifts, or use aspect-ratio to maintain consistent proportions across different screen sizes:

.gallery-slideshow { height: 500px; } .gallery-slideshow img { object-fit: cover; }

Custom Navigation Arrows

Style the carousel navigation arrows to match your brand. Change their color, size, position, and opacity. Add hover effects for a polished interactive experience:

.gallery-slideshow-nav { color: #ffffff; font-size: 28px; opacity: 0.7; transition: opacity 0.3s ease; } .gallery-slideshow-nav:hover { opacity: 1; }

Custom Indicator Dots

The carousel's indicator dots (pagination circles) can be restyled with CSS. Change their color, size, spacing, and active state styling for a design that matches your template. For CSS implementation, our guide to adding custom CSS to Squarespace covers targeting gallery-specific selectors.

Adding Captions and Overlays

Use CSS to display image captions as overlays on the carousel slides - positioned at the bottom of each image with a semi-transparent background. This keeps the caption visible without covering the full image:

.gallery-slideshow-meta { position: absolute; bottom: 0; left: 0; right: 0; background: rgba(0,0,0,0.6); color: #fff; padding: 16px; }

Building Advanced Carousels with Code

Using Swiper.js or Splide.js

For carousel features that Squarespace's native blocks cannot produce - multiple visible slides, variable widths, infinite loop scrolling, or parallax effects - use a JavaScript carousel library. Swiper.js and Splide.js are lightweight, touch-friendly libraries that work well with Squarespace.

Load the library via CDN in Code Injection (Header), build your carousel HTML in a Code Block, and initialize the carousel with JavaScript in Code Injection (Footer). This approach gives you complete control over every carousel behavior. For script implementation, our guide to adding custom code to Squarespace covers Code Injection and Code Block setup.

Multi-Slide Carousels

Squarespace's native carousel shows one image at a time. A multi-slide carousel displays three or four images simultaneously with one entering as another exits. This format works well for product showcases, team member highlights, and testimonial rotations. Build it with a JavaScript library or use CSS-only horizontal scrolling with scroll-snap properties.

Auto-Scrolling Logo Carousels

Client logo carousels that scroll continuously without interaction are a common design pattern. Build one with CSS animations - create a row of logos, duplicate it, and animate the container with a seamless infinite scroll using @keyframes and translateX. No JavaScript required.

Carousel Best Practices

Limit the number of slides. Carousels with more than seven to ten images rarely get viewed to the end. Show your best content first and keep the total count manageable. If you have more images, consider a grid gallery instead.

Optimize images for performance. Every carousel image loads as the page loads (or when scrolled to, with lazy loading). Compress each image to under 300 KB and resize to the maximum display dimensions. A carousel with ten uncompressed images can add several megabytes to your page weight. For image optimization, our Squarespace image speed guide covers sizing and compression.

Make navigation obvious. Visitors should immediately understand that the carousel is interactive. Use visible navigation arrows, indicator dots, or both. On mobile, add swipe hints or visual cues that indicate horizontal scrolling. For design strategies, our Squarespace design tips guide covers interactive element design.

Test on mobile. Touch-based carousel navigation works differently from mouse-based navigation. Test swipe gestures, autoplay behavior, and image sizing on actual phones. Ensure the carousel does not conflict with vertical page scrolling. For mobile optimization, our guide to Squarespace mobile optimization covers interactive elements on small screens.

Consider alternatives. Carousels are not always the best choice. If visitors need to compare images, a grid gallery is better. If one image is most important, feature it as a hero with a static layout. Use carousels when sequential viewing or space conservation is genuinely the best presentation format.

Build a Carousel That Showcases Your Best Work

Image carousels are a versatile design element that work for portfolios, product showcases, testimonials, and logo displays. Start with Squarespace's native Gallery Block for simple slideshows, use Custom CSS for visual refinements, and reach for JavaScript libraries when you need multi-slide or advanced scrolling behavior.

Keep your carousels focused, your images optimized, and your navigation obvious. A well-built carousel enhances your page. A bloated or confusing one distracts from it.