Video Carousel with Numbered Pagination
What You'll Create
Build a sleek video carousel for your Squarespace site that lets visitors swipe through multiple videos with numbered pagination—"01", "02", "03"—displayed elegantly below. Each slide holds a video that plays on interaction, and the carousel handles the navigation smoothly. Perfect for video portfolios, showreels, or any page showcasing multiple video pieces.
The Problem It Solves
Squarespace doesn't have a native video carousel. You can add individual video blocks, but there's no way to create a swipeable gallery of videos with proper navigation. Stacking videos vertically makes pages long and overwhelming. This technique creates a true video carousel experience with touch-friendly swiping and clean numbered navigation.
Perfect For
Video production portfolios, Filmmaker showreel presentations, Course preview carousels, Product demo video galleries, Testimonial video collections, Any multi-video showcase needing elegant navigation
What Makes This Different
The carousel uses a proven library powering carousels on major sites for smooth, touch-responsive swiping. The pagination automatically generates "01", "02", "03" numbering with no manual labeling needed. The active slide gets an underlined number for clear visual feedback. Videos load efficiently and the carousel handles both desktop clicking and mobile swiping seamlessly.
Details
Section Type: Fluid Engine
Code Type: CSS + JavaScript
Prerequisites: Section with
video-carouselclass. Video blocks added to section. Scripts in footer code injection.Toolkit Title: Video Carousel (Numbered)
Learn This Technique
This is one of 150+ code techniques taught inside Standout Squarespace, where you get:
The complete, copy-paste code
Video walkthrough explaining how it works
The principles behind the technique so you can customize it
Access to our private community for support