Enhancing Your Squarespace Carousel with Auto Scrolling and Drag Features

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. 

Auto Advance Script: Copy

document.addEventListener("DOMContentLoaded", function() {
    // Check if the page is in edit mode based on URL
    const currentUrl = window.location.href;
    if (currentUrl.includes('squarespace.com/')) {
        return; // Exit if in edit mode
    }

    const container = document.querySelector('.user-items-list-carousel__slides');
    const nextButton = document.querySelector('.user-items-list-carousel__arrow-button--right');
    let autoSlideInterval;

    function startAutoSlide() {
        autoSlideInterval = setInterval(() => {
            nextButton.click();
        }, 2000);
    }

    function stopAutoSlide() {
        clearInterval(autoSlideInterval);
    }

    container.addEventListener('mouseenter', stopAutoSlide);
    container.addEventListener('mouseleave', startAutoSlide);

    startAutoSlide();

    // Touch functionality for mobile
    container.addEventListener('touchstart', (e) => {
        stopAutoSlide();
    });

    container.addEventListener('touchend', () => {
        startAutoSlide();
    });
});

    

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:

CSS to Hide Navigation Arrows: Copy

.user-items-list-carousel__arrow-button {
    display: none;
}
.mobile-arrows {
    display: none !important;
}
.list-section-button-container {
    margin-top: 25px !important;
}
    

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.

CSS to style carousel images Copy

/* Apply rounded corners and drop shadow to carousel images */
.user-items-list-carousel__media {
    border-radius: 10px;
    box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1);
    overflow: hidden; /* Ensure the rounded corners apply to the content inside */
}

    

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.

Drag Functionality Script Copy

   
document.addEventListener("DOMContentLoaded", function() {
    const container = document.querySelector('.user-items-list-carousel__slides');
    
    // Existing drag functionality
    let isDown = false;
    let startX;
    let scrollLeft;

    container.addEventListener('mousedown', (e) => {
        isDown = true;
        container.classList.add('active');
        startX = e.pageX - container.offsetLeft;
        scrollLeft = container.scrollLeft;
    });

    container.addEventListener('mouseleave', () => {
        isDown = false;
        container.classList.remove('active');
    });

    container.addEventListener('mouseup', () => {
        isDown = false;
        container.classList.remove('active');
    });

    container.addEventListener('mousemove', (e) => {
        if (!isDown) return;
        e.preventDefault();
        const x = e.pageX - container.offsetLeft;
        const walk = (x - startX) * 3;
        container.scrollLeft = scrollLeft - walk;
    });

    // Touch functionality for mobile
    container.addEventListener('touchstart', (e) => {
        isDown = true;
        startX = e.touches[0].pageX - container.offsetLeft;
        scrollLeft = container.scrollLeft;
    });

    container.addEventListener('touchend', () => {
        isDown = false;
    });

    container.addEventListener('touchmove', (e) => {
        if (!isDown) return;
        const x = e.touches[0].pageX - container.offsetLeft;
        const walk = (x - startX) * 3;
        container.scrollLeft = scrollLeft - walk;
    });
});

    

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.

CSS for Dragging Cursor: Copy

.user-items-list-carousel__slides.active {
    cursor: grabbing;
    cursor: -webkit-grabbing;
}
.user-items-list-carousel__slides {
    cursor: grab;
    cursor: -webkit-grab;
    scroll-behavior: smooth;
}

    

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

• How do I add a carousel block to my Squarespace page?

  Navigate to the page where you want the carousel, click on the "+" icon to add a new block, and select "Carousel" from the Galleries option. Add your images and configure the carousel settings as needed.

• Why do I need the navigation buttons active for the auto-advance feature to work?

  The auto-advance script simulates a click on the "next" navigation button to move the slides. Hiding the buttons with CSS allows the feature to work without displaying the buttons.

• How do I hide the navigation buttons while keeping the auto-advance functionality?

  Use the CSS provided in the tutorial.

• How do I stop the auto-advance on mobile devices when the carousel is touched?

  The script provided includes functionality to stop auto-advance on touchstart and touchend events.

• Where do I place the auto-advance script and the drag functionality script?

  Place the auto-advance script in the page header injection settings and the drag functionality script in the general footer injection settings.

• The auto-advance feature isn't working on my Squarespace preview. Why?

  The script is designed to detect if the page is being viewed on a Squarespace domain and will not run in preview mode. It will only function on your live site.

• Can I adjust the auto-advance interval?

  Yes, you can adjust the interval by changing the value in the setInterval function in the auto-advance script. For example, to change it to 3000 milliseconds (3 seconds), update the value accordingly.

• What should I do if the auto-advance feature stops working?

  Ensure that the navigation buttons are active and not removed from the HTML. Also, check that the scripts are correctly placed and that there are no JavaScript errors on the page.

• How do I customize the appearance of the carousel?

  Item You can add custom CSS to style the carousel and its elements. For example, to add rounded corners and a drop shadow to the images, use the CSS provided in the tutorial.

Transform Your Digital Identity with Contigo Studio

Dennis Pal
Web Desinger

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…