How to Automate and Set Timing with Autoplay in Embla Carousel

Introduction

Embla-Carousel is a dependency-free, lightweight carousel library.
It offers a variety of options and can be customized with great flexibility.

Embla-Carousel provides many examples, making it easy to replicate.
However, some options differ depending on the version.

This guide explains how to automatically autoplay a carousel with Embla Carousel
and how to set the interval between slides.

Environment

• Next.js: 14.0.3
• embla-carousel-react:^8.0.0-rc22
• embla-carousel-autoplay:^8.0.0-rc22
• embla-carousel:^8.0.0-rc22

---

How to Autoplay a Carousel with Embla Carousel

Install Required Packages

Install the necessary packages first:

npm install embla-carousel-react embla-carousel embla-carousel-autoplay

Specify Options

Since the structure follows the official example, we’ll skip redundant details.

home/page.tsx

'use client'
import EmblaCarousel from '@/ui/atom/carousel/emblaCarousel';
import { EmblaOptionsType } from 'embla-carousel'

const Home = () => {
  const OPTIONS: EmblaOptionsType = { 
    loop: true,
    slidesToScroll: 1,
    duration: 50
  }

  return (
    <EmblaCarousel slides={Items} options={OPTIONS} />
  )
}
export default Home;

• loop
  Enables looping from the last slide back to the first. Set to true.

• slidesToScroll
  Determines how many slides to move per autoplay step. 1 means one-by-one.

• duration
  Duration of the scroll animation. Higher values = slower speed (not in milliseconds).

---

How to Set the Autoplay Interval in Embla Carousel

This setting is specified inside the EmblaCarousel component.
Below is a partial example:

emblaCarousel.tsx

import { EmblaOptionsType } from 'embla-carousel'
import Autoplay from 'embla-carousel-autoplay'
import useEmblaCarousel from 'embla-carousel-react'

const TWEEN_FACTOR = 4.2

const numberWithinRange = (number: number, min: number, max: number): number =>
  Math.min(Math.max(number, min), max)

type PropType = {
  slides: T[]
  options?: EmblaOptionsType
}

const EmblaCarousel = (props: React.PropsWithChildren<PropType>) => {
  const { slides, options } = props
  const [emblaRef, emblaApi] = useEmblaCarousel(options, [Autoplay({ delay: 2000 })])
  // omitted
}

Settings explained:

• Autoplay({ delay: 2000 })
  → Slide switches every 2000 milliseconds (2 seconds).

• import Autoplay from 'embla-carousel-autoplay'
  → Import autoplay plugin.

---

Autoplay Configuration Options

Autoplay works with the above settings, but additional customization is possible.

Reviewing the type definitions in embla-carousel-autoplay reveals more options:

Auto.d.ts

export type AutoplayType = CreatePluginType<{
  play: (jump?: boolean) => void;
  stop: () => void;
  reset: () => void;
  isPlaying: () => boolean;
}, OptionsType>;

export type AutoplayOptionsType = AutoplayType['options'];

declare function Autoplay(userOptions?: AutoplayOptionsType): AutoplayType;

declare namespace Autoplay {
  var globalOptions: Partial<import("embla-carousel/components/Options").CreateOptionsType<OptionsType> | undefined>;
}
export default Autoplay;

Options.d.ts

import { CreateOptionsType } from 'embla-carousel/components/Options';

export type OptionsType = CreateOptionsType<{
  delay: number;
  jump: boolean;
  playOnInit: boolean;
  stopOnFocusIn: boolean;
  stopOnInteraction: boolean;
  stopOnMouseEnter: boolean;
  stopOnLastSnap: boolean;
  rootNode: ((emblaRoot: HTMLElement) => HTMLElement | null) | null;
}>;

export declare const defaultOptions: OptionsType;

Available controls beyond delay:

• jump: Jump transition between slides
• playOnInit: Start autoplay on initialization
• stopOnFocusIn: Stop autoplay when focused
• stopOnMouseEnter: Stop autoplay on hover, etc.

---

References

• Embla Carousel Options
• Embla Carousel Predefined Examples

---

Conclusion

Embla is a very simple library and easy to use with minimal setup.
It has no dependencies and rarely causes conflicts, though styling must be manually added.
The rich sample collection makes implementation smooth and quick.