Introduction

Creating a captivating and functional web design portfolio has always been a passion of mine. Recently, I embarked on a journey to innovate how I showcase my work, aiming to highlight my portfolio section on the web design page in a unique and engaging way. This led me to develop a new method for creating an auto-advancing carousel with drag functionality in Squarespace. I’m excited to share this process with you, hoping it inspires you to enhance your own web projects.

Adding custom features like auto-advance and drag to your Squarespace carousel can enhance user engagement and create a more dynamic browsing experience. I implemented these features in the portfolio section of my Web Design page, and you can see them in action there. The images automatically advance every 2 seconds until you hover over them. When you hover over the images, the cursor turns into a hand, allowing you to grab and drag the images in any direction. Once the cursor moves off the image, the auto-advance starts again. I chose to keep the arrows visible on my page, but you can easily hide them. Works well on mobile as well.

In this tutorial, I will guide you through setting up these features, ensuring they run only in live mode and do not interfere with editing your site in Squarespace. The auto-advance functionality is specifically coded to be inactive during edit mode and on the internal Squarespace domain, including previews, to prevent any interruptions. This means the feature will be fully operational on your live site, allowing for an enhanced user experience while maintaining ease of editing.

The Steps

Step 1: Initial Setup

First, add a carousel block to your Squarespace page and configure your images. Ensure the navigation buttons (arrows) are active, as they are required for the auto-move functionality to work. You can hide these buttons while keeping the functionality with some optional CSS (below).

Step 2: Implement Auto Advance

To implement the auto-advance functionality, you'll need to include a script in the Page Header Injection. This script ensures that the carousel advances automatically every 2000ms but pauses when the user hovers over it. Additionally, the script is configured to only run on your live domain, not on the Squarespace domain during editing as it will interfere with the editing capabilities and dialoge boxes. 

Note: Don’t forget to place this code between an opening and closing script tag: <script> and </script>. You can change the timing to any value you wish in MS (milliseconds) to speed up or slow the advancement. It is currently set to 2000 MS>

Optional: Hiding Navigation Arrows

If you prefer not to display the navigation arrows while still maintaining the auto-advance functionality, you can add the following CSS to hide the arrows:

Note: Don’t forget to place this code in between an opening and closing script tag: <style> and </style> in your page code injection.

Optional CSS to stylize the carousel

This CSS will apply rounded corners and a slight drop shadow.

Step 3: Implement Drag Functionality

The drag functionality allows users to manually scroll through the carousel items, providing a smooth and intuitive navigation experience. This script should be added to the Footer Injection section of your site. This will apply drag functionality to all carousel blocks on your site. If you prefer to have it apply only to this current page then place this is the page injection instead.

Note: Don’t forget to place this code between an opening and closing script tag: <script> and </script>.

Step 4: Add CSS for Dragging Cursor

To enhance the user experience, add CSS to change the cursor to a grabbing hand when dragging the carousel.

Conclusion

By following these steps, you can create a more interactive and user-friendly carousel on your Squarespace site. The auto-advance feature ensures a dynamic display of images, while the drag functionality offers users more control over their browsing experience. Remember, the auto-advance script should be placed in the Page Header Injection, while the drag functionality script should go in the Footer Injection.

Happy designing!

FAQ: Frequently Asked Questions about this code

Transform Your Digital Identity with Contigo Studio

Looking to enhance your Squarespace site with custom features?

Share your experience or reach out if you have questions. I am here to help bring your vision to life for personalized Squarespace design services.

You might also like…