Embla Carousel & Marquee Integration

Before you change theme code

• Duplicate your theme first (Online Store → Themes → … → Duplicate).
• Edit the duplicate – not your live theme.
• Test the duplicate (navigation, add to cart, basic checkout flow).
• If something breaks: switch back or delete the bad copy.
• Big or broken changes may be outside support.

Custom elements for sliders and continuous marquees.

Note: <slider-carousel> is a wrapper around Embla Carousel. <slider-marquee> is a custom Web Animations / rAF marquee (not Embla) – API aligned for consistency.

Components

Element	Purpose
<slider-carousel>	Standard carousel (slides per view, nav, autoplay, pagination)
<slider-marquee>	Infinite marquee (direction, speed, drag pause, scroll reactive)

Basic Examples

Carousel

<slider-carousel slides-per-view="3" space-between="16" data-autoplay data-pagination>
  <!-- slides -->
</slider-carousel>

Marquee

<slider-marquee direction="left" speed="60" drag-enabled pause-on-hover scroll-reactive>
  <!-- items -->
</slider-marquee>

Attributes & Data Props

Name	Type	Applies To	Description
slides-per-view / data-slides-per-view	number	Both	Visible slides count
space-between / data-space-between	number	Both	Gap (px) between slides/items
direction	left/right	Marquee	Scroll direction
speed	number	Marquee	Pixels per second
drag-enabled	boolean	Marquee	Allow drag + pause
pause-on-hover	boolean	Marquee	Pause when hovered
scroll-reactive	boolean	Marquee	Adjust speed on scroll
data-autoplay	boolean	Carousel	Autoplay slides
data-pagination	boolean	Carousel	Show pagination dots
data-equal-height-slides	boolean	Both	Normalize slide heights
data-gallery-id	string	Carousel	External nav sync key
data-custom-pagination	boolean	Carousel	Use custom pagination container

Responsive Variant

<slider-carousel
  data-slides-per-view-mobile="1.2"
  data-slides-per-view-tablet="2"
  data-slides-per-view-desktop="3"
  data-space-between-mobile="8"
  data-space-between-tablet="12"
  data-space-between-desktop="16"
></slider-carousel>

Accessing Instances

const carouselEl = document.querySelector('slider-carousel');
const embla = carouselEl.carousel; // EmblaCarousel instance

const marqueeEl = document.querySelector('slider-marquee');
// No Embla instance on marquee (custom implementation).

Progressive Enhancement

Markup works without JS; enhancements layer on when scripts load.

Advanced Usage

• External navigation buttons can dispatch custom events or use data-gallery-id
• Custom pagination: supply a container with data-pagination-container
• Equal heights: enable data-equal-height-slides

Marquee Interactivity

• Dragging temporarily pauses movement if drag-enabled
• Hover pause
• Scroll reactive accelerates on scroll

Summary

Declarative attributes configure both elements; only the carousel exposes an Embla instance.

---

Source modules: frontend/modules/slider-carousel.ts & frontend/modules/slider-marquee.ts.