Introduction

Carousels are a great way to showcase products or collections. But what if you want them to auto-slide differently on mobile and desktop? In this tutorial, we’ll learn how to enable autoplay on a scrollable carousel with separate settings for mobile and desktop — all without using any external apps.

🚀 Features We’ll Add:

• Enable auto-slide on mobile only, desktop only, or both

• Customize the autoplay speed

• Pause carousel when the user hovers over it

  🧱 Step 1: Add Schema Settings to Enable Controls

  First, go to your theme’s section file (e.g., featured-collection.liquid or custom-carousel.liquid), and inside the schema tag, add these settings:

{
“type”: “checkbox”,
“id”: “enable_autoplay_mobile”,
“label”: “Enable auto slide on mobile”,
“default”: false
},
{
“type”: “checkbox”,
“id”: “enable_autoplay_desktop”,
“label”: “Enable auto slide on desktop”,
“default”: false
},
{
“type”: “range”,
“id”: “autoplay_speed”,
“label”: “Autoplay speed (seconds)”,
“min”: 2,
“max”: 10,
“step”: 1,
“default”: 5
}

✅ Why?
These settings allow you to control autoplay per device and adjust the interval directly from the Shopify editor.

🧩 Step 2: Pass the Settings into HTML

Now, find the main carousel wrapper in your section and add these attributes dynamically:

<scroll-carousel
class=”your-carousel-class”
data-autoplay-mobile=”{{ section.settings.enable_autoplay_mobile }}”
data-autoplay-desktop=”{{ section.settings.enable_autoplay_desktop }}”
data-interval=”{{ section.settings.autoplay_speed | times: 1000 }}”>

<!– carousel content here –>

</scroll-carousel>

✅ Why?
We’re passing settings as data-* attributes so the JavaScript can access them easily.

🧠 Step 3: Add JavaScript to Enable Scrolling

At the bottom of your section file, add this script:

<script>
document.addEventListener(‘DOMContentLoaded’, function () {
const isMobile = window.innerWidth <= 768;

document.querySelectorAll(‘scroll-carousel’).forEach(function (carousel) {
const autoplayMobile = carousel.dataset.autoplayMobile === ‘true’;
const autoplayDesktop = carousel.dataset.autoplayDesktop === ‘true’;
const interval = parseInt(carousel.dataset.interval) || 5000;

const shouldAutoplay = (isMobile && autoplayMobile) || (!isMobile && autoplayDesktop);
if (!shouldAutoplay) return;

let paused = false;

const scrollAmount = () => {
const item = carousel.querySelector(‘.collection-card’);
return item ? item.offsetWidth + parseInt(getComputedStyle(item).marginRight) : 300;
};

const scrollCarousel = () => {
if (paused) return;

const maxScroll = carousel.scrollWidth – carousel.clientWidth;
const atEnd = Math.ceil(carousel.scrollLeft + 1) >= maxScroll;

if (atEnd) {
carousel.scrollTo({ left: 0, behavior: ‘smooth’ });
} else {
carousel.scrollBy({ left: scrollAmount(), behavior: ‘smooth’ });
}
};

const intervalId = setInterval(scrollCarousel, interval);

// Pause on hover
carousel.addEventListener(‘mouseenter’, () => paused = true);
carousel.addEventListener(‘mouseleave’, () => paused = false);
});
});
</script>

✅ Why?
This script scrolls the carousel by the width of one .collection-card every few seconds, depending on the device and the user’s settings.

✅ Final Result

You now have a smart carousel that:

• Autoplays on mobile, desktop, or both

• Scrolls items at a custom speed

• Pauses on hover