A continuation of Janady13/llms-txt-hub / packages/content/data/unofficial/embla-carousel/llms-full.txt. The complete source identity, every recorded occurrence, and linked equations are on its first page.
Source transcript · continued
Download complete source text ↓4,263 lines · 146.4 KB
Start by installing the Embla Carousel **npm package** and add it to your dependencies.
npmnpmyarnyarn
Copy code snippet to clipboardCopy
```prism-code shell
npm install embla-carousel-react --save
```
Copy code snippet to clipboardCopy
```prism-code shell
yarn add embla-carousel-react
```
* * *
## [the component structure permalink](https://www.embla-carousel.com/get-started/react/\#the-component-structure) The component structure
Embla Carousel provides the handy `useEmblaCarousel` hook for seamless integration with React. A minimal setup requires an **overflow wrapper** and a **scroll container**. Start by adding the following structure to your carousel:
Copy code snippet to clipboardCopy
```prism-code jsx
import React from 'react'import useEmblaCarousel from 'embla-carousel-react'
export function EmblaCarousel() { const [emblaRef] = useEmblaCarousel()
return ( <div className="embla" ref={emblaRef}> <div className="embla__container"> <div className="embla__slide">Slide 1</div> <div className="embla__slide">Slide 2</div> <div className="embla__slide">Slide 3</div> </div> </div> )}
```
## [styling the carousel permalink](https://www.embla-carousel.com/get-started/react/\#styling-the-carousel) Styling the carousel
The hook gives us a **ref** to attach to our wrapping element with the classname `embla`, which is needed to cover the scroll overflow. The element with the `container` classname is the scroll body that scrolls the slides. Continue by adding the following **CSS** to these elements:
Copy code snippet to clipboardCopy
```prism-code css
.embla { overflow: hidden;}.embla__container { display: flex;}.embla__slide { flex: 0 0 100%; min-width: 0;}
```
## [accessing the carousel api permalink](https://www.embla-carousel.com/get-started/react/\#accessing-the-carousel-api) Accessing the carousel API
The `useEmblaCarousel` hook takes the Embla Carousel [options](https://www.embla-carousel.com/api/options/) as the first argument. Additionally, you can access the [API](https://www.embla-carousel.com/api/) with a `useEffect` like demonstrated below:
Copy code snippet to clipboardCopy
```prism-code jsx
import React, { useEffect } from 'react'import useEmblaCarousel from 'embla-carousel-react'
export function EmblaCarousel() { const [emblaRef, emblaApi] = useEmblaCarousel({ loop: false })
useEffect(() => { if (emblaApi) { console.log(emblaApi.slideNodes()) // Access API } }, [emblaApi])
return ( <div className="embla" ref={emblaRef}> <div className="embla__container"> <div className="embla__slide">Slide 1</div> <div className="embla__slide">Slide 2</div> <div className="embla__slide">Slide 3</div> </div> </div> )}
```
## [adding plugins permalink](https://www.embla-carousel.com/get-started/react/\#adding-plugins) Adding plugins
Start by installing the plugin you want to use. In this example, we're going to install the [Autoplay](https://www.embla-carousel.com/plugins/autoplay/) plugin:
npmnpmyarnyarn
Copy code snippet to clipboardCopy
```prism-code shell
npm install embla-carousel-autoplay --save
```
Copy code snippet to clipboardCopy
```prism-code shell
yarn add embla-carousel-autoplay
```
The `useEmblaCarousel` hook accepts [plugins](https://www.embla-carousel.com/plugins/) as the second argument. Note that plugins need to be passed in an **array** like so:
Copy code snippet to clipboardCopy
```prism-code jsx
import React, { useEffect } from 'react'import useEmblaCarousel from 'embla-carousel-react'import Autoplay from 'embla-carousel-autoplay'
export function EmblaCarousel() { const [emblaRef] = useEmblaCarousel({ loop: false }, [Autoplay()])
return ( <div className="embla" ref={emblaRef}> <div className="embla__container"> <div className="embla__slide">Slide 1</div> <div className="embla__slide">Slide 2</div> <div className="embla__slide">Slide 3</div> </div> </div> )}
```
Congratulations! You just created your first Embla Carousel component.
[Edit this page on GitHub](https://github.com/davidjerleke/embla-carousel/blob/master/packages/embla-carousel-docs/src/content/pages/get-started/react.mdx)
## Embla Carousel Class Names
[Skip to content](https://www.embla-carousel.com/plugins/class-names/#main-content)
# Class Names
[View plugin on GitHub](https://github.com/davidjerleke/embla-carousel/tree/master/packages/embla-carousel-class-names)
Class Names is a **class name toggle** utility plugin for Embla Carousel that enables you to automate the toggling of class names on your carousel.
* * *
## [example permalink](https://www.embla-carousel.com/plugins/class-names/\#example) Example
Edit Code
## [installation permalink](https://www.embla-carousel.com/plugins/class-names/\#installation) Installation
First you need to install the **npm package** and save it to your dependencies:
CDNCDNnpmnpmyarnyarn
Copy code snippet to clipboardCopy
```prism-code html
<script src="https://unpkg.com/embla-carousel-class-names/embla-carousel-class-names.umd.js"></script>
```
Copy code snippet to clipboardCopy
```prism-code shell
npm install embla-carousel-class-names --save
```
Copy code snippet to clipboardCopy
```prism-code shell
yarn add embla-carousel-class-names
```
## [usage permalink](https://www.embla-carousel.com/plugins/class-names/\#usage) Usage
Please read the [plugins](https://www.embla-carousel.com/api/plugins/#usage) page to learn **how to work with plugins**.
## [options permalink](https://www.embla-carousel.com/plugins/class-names/\#options) Options
Below follows an exhaustive **list of all** `Class Names` **options** and their default values.
* * *
### [snapped permalink](https://www.embla-carousel.com/plugins/class-names/\#snapped) snapped
Type: `string | string[]`
Default: `is-snapped`
Choose a class name that will be applied to the **snapped slides**. It's also possible to pass an array of class names. Pass an empty string to opt-out.
* * *
### [inview permalink](https://www.embla-carousel.com/plugins/class-names/\#inview) inView
Type: `string | string[]`
Default: `is-in-view`
Choose a class name that will be applied to **slides in view**. It's also possible to pass an array of class names. Pass an empty string to opt-out.
This feature will honor the [inViewThreshold](https://www.embla-carousel.com/api/options/#inviewthreshold)
option.
* * *
### [draggable permalink](https://www.embla-carousel.com/plugins/class-names/\#draggable) draggable
Type: `string | string[]`
Default: `is-draggable`
Choose a class name that will be applied to a **draggable carousel**. It's also possible to pass an array of class names. Pass an empty string to opt-out.
* * *
### [dragging permalink](https://www.embla-carousel.com/plugins/class-names/\#dragging) dragging
Type: `string | string[]`
Default: `is-dragging`
Choose a class name that will be applied to the container **when dragging**. It's also possible to pass an array of class names. Pass an empty string to opt-out.
* * *
### [loop permalink](https://www.embla-carousel.com/plugins/class-names/\#loop) loop
Type: `string | string[]`
Default: `is-loop`
Choose a class name that will be applied to a carousel with **loop activated**. It's also possible to pass an array of class names. Pass an empty string to opt-out.
* * *
[Edit this page on GitHub](https://github.com/davidjerleke/embla-carousel/blob/master/packages/embla-carousel-docs/src/content/pages/plugins/class-names.mdx)
## Embla Carousel Setup
[Skip to content](https://www.embla-carousel.com/get-started/module/#main-content)
# Module
Start by installing the **npm package** and save it to your dependencies:
npmnpmyarnyarn
Copy code snippet to clipboardCopy
```prism-code shell
npm install embla-carousel --save
```
Copy code snippet to clipboardCopy
```prism-code shell
yarn add embla-carousel
```
* * *
## [the html structure permalink](https://www.embla-carousel.com/get-started/module/\#the-html-structure) The HTML structure
A minimal setup requires an **overflow wrapper** and a **scroll container**. Start by adding the following **HTML** structure to your carousel:
Copy code snippet to clipboardCopy
```prism-code html
<div class="embla"> <div class="embla__container"> <div class="embla__slide">Slide 1</div> <div class="embla__slide">Slide 2</div> <div class="embla__slide">Slide 3</div> </div></div>
```
## [styling the carousel permalink](https://www.embla-carousel.com/get-started/module/\#styling-the-carousel) Styling the carousel
The wrapping element with the classname `embla` is needed to cover the scroll overflow. The element with the `container` classname is the scroll body that scrolls the slides. Continue by adding the following **CSS** to these elements:
Copy code snippet to clipboardCopy
```prism-code css
.embla { overflow: hidden;}.embla__container { display: flex;}.embla__slide { flex: 0 0 100%; min-width: 0;}
```
## [accessing the carousel api permalink](https://www.embla-carousel.com/get-started/module/\#accessing-the-carousel-api) Accessing the carousel API
Grab the element with the classname `embla` and pass it as the first argument to the `EmblaCarousel` constructor. This will **initialize** the **carousel** and give you **access** to the Embla Carousel [API](https://www.embla-carousel.com/api/).
Copy code snippet to clipboardCopy
```prism-code js
import EmblaCarousel from 'embla-carousel'
const emblaNode = document.querySelector('.embla')const options = { loop: false }const emblaApi = EmblaCarousel(emblaNode, options)
console.log(emblaApi.slideNodes()) // Access API
```
## [adding plugins permalink](https://www.embla-carousel.com/get-started/module/\#adding-plugins) Adding plugins
Start by installing the plugin you want to use. In this example, we're going to install the [Autoplay](https://www.embla-carousel.com/plugins/autoplay/) plugin:
npmnpmyarnyarn
Copy code snippet to clipboardCopy
```prism-code shell
npm install embla-carousel-autoplay --save
```
Copy code snippet to clipboardCopy
```prism-code shell
yarn add embla-carousel-autoplay
```
Embla Carousel accepts an optional **plugin array** as the third argument. Here's a basic example of how to make use of it:
Copy code snippet to clipboardCopy
```prism-code js
import EmblaCarousel from 'embla-carousel'import Autoplay from 'embla-carousel-autoplay'
const emblaNode = document.querySelector('.embla')const options = { loop: false }const plugins = [Autoplay()]const emblaApi = EmblaCarousel(emblaNode, options, plugins)
```
Congratulations! You just created your first Embla Carousel.
[Edit this page on GitHub](https://github.com/davidjerleke/embla-carousel/blob/master/packages/embla-carousel-docs/src/content/pages/get-started/module.mdx)
## Embla Carousel Svelte
[Skip to content](https://www.embla-carousel.com/get-started/svelte/#main-content)
# Svelte
Embla Carousel provides a wrapper for [Svelte](https://svelte.dev/) that ensures seamless integration of the carousel into your Svelte project and automatic cleanup on component unmount.
Start by installing the Embla Carousel **npm package** and add it to your dependencies.
npmnpmyarnyarn
Copy code snippet to clipboardCopy
```prism-code shell
npm install embla-carousel-svelte --save
```
Copy code snippet to clipboardCopy
```prism-code shell
yarn add embla-carousel-svelte
```
* * *
## [the component structure permalink](https://www.embla-carousel.com/get-started/svelte/\#the-component-structure) The component structure
Embla Carousel provides the handy `emblaCarouselSvelte` action for seamless integration with Svelte. A minimal setup requires an **overflow wrapper** and a **scroll container**. Start by adding the following structure to your carousel:
Copy code snippet to clipboardCopy
```prism-code html
<script> import emblaCarouselSvelte from 'embla-carousel-svelte'</script>
<div class="embla" use:emblaCarouselSvelte> <div class="embla__container"> <div class="embla__slide">Slide 1</div> <div class="embla__slide">Slide 2</div> <div class="embla__slide">Slide 3</div> </div></div>
```
## [styling the carousel permalink](https://www.embla-carousel.com/get-started/svelte/\#styling-the-carousel) Styling the carousel
The element with the classname `embla` is needed to cover the scroll overflow. Its child element with the `container` classname is the scroll body that scrolls the slides. Continue by adding the following **CSS** to these elements:
Copy code snippet to clipboardCopy
```prism-code html
<style> .embla { overflow: hidden; } .embla__container { display: flex; } .embla__slide { flex: 0 0 100%; min-width: 0; }</style>
```
## [accessing the carousel api permalink](https://www.embla-carousel.com/get-started/svelte/\#accessing-the-carousel-api) Accessing the carousel API
The `emblaCarouselSvelte` action takes the Embla Carousel [options](https://www.embla-carousel.com/api/options/) as part of its parameter. Additionally, you can access the [API](https://www.embla-carousel.com/api/) by using the `emblaInit` event to store the carousel instance in a variable:
Copy code snippet to clipboardCopy
```prism-code html
<script> import emblaCarouselSvelte from 'embla-carousel-svelte'
let emblaApi let options = { loop: false }
function onInit(event) { emblaApi = event.detail console.log(emblaApi.slideNodes()) // Access API }</script>
<div class="embla" use:emblaCarouselSvelte="{{ options }}" onemblaInit="{onInit}"> <div class="embla__container"> <div class="embla__slide">Slide 1</div> <div class="embla__slide">Slide 2</div> <div class="embla__slide">Slide 3</div> </div></div>
```
**Note:** Starting with Svelte 5, the `on:` event handlers have been deprecated. However, `on:emblaInit` will remain for backward compatibility.
## [adding plugins permalink](https://www.embla-carousel.com/get-started/svelte/\#adding-plugins) Adding plugins
Start by installing the plugin you want to use. In this example, we're going to install the [Autoplay](https://www.embla-carousel.com/plugins/autoplay/) plugin:
npmnpmyarnyarn
Copy code snippet to clipboardCopy
```prism-code shell
npm install embla-carousel-autoplay --save
```
Copy code snippet to clipboardCopy
```prism-code shell
yarn add embla-carousel-autoplay
```
The `emblaCarouselSvelte` action parameter accepts [plugins](https://www.embla-carousel.com/plugins/). Note that plugins need to be passed in an **array** like so:
Copy code snippet to clipboardCopy
```prism-code html
<script> import emblaCarouselSvelte from 'embla-carousel-svelte' import Autoplay from 'embla-carousel-autoplay'
let options = { loop: false } let plugins = [Autoplay()]</script>
<div class="embla" use:emblaCarouselSvelte="{{ options, plugins }}"> <div class="embla__container"> <div class="embla__slide">Slide 1</div> <div class="embla__slide">Slide 2</div> <div class="embla__slide">Slide 3</div> </div></div>
```
Congratulations! You just created your first Embla Carousel component.
[Edit this page on GitHub](https://github.com/davidjerleke/embla-carousel/blob/master/packages/embla-carousel-docs/src/content/pages/get-started/svelte.mdx)
## Wheel Gestures Plugin
[Skip to content](https://www.embla-carousel.com/plugins/wheel-gestures/#main-content)
# Wheel Gestures
[View plugin on GitHub](https://github.com/xiel/embla-carousel-wheel-gestures)
This plugin is used to extend Embla Carousel with the ability to **use the mouse/trackpad wheel** to **navigate** the carousel.
* * *
## [installation permalink](https://www.embla-carousel.com/plugins/wheel-gestures/\#installation) Installation
First you need to install the **npm package** and save it to your dependencies:
CDNCDNnpmnpmyarnyarn
Copy code snippet to clipboardCopy
```prism-code html
<script src="https://unpkg.com/embla-carousel-wheel-gestures/dist/embla-carousel-wheel-gestures.umd.js"></script>
```
Copy code snippet to clipboardCopy
```prism-code shell
npm install embla-carousel-wheel-gestures --save
```
Copy code snippet to clipboardCopy
```prism-code shell
yarn add embla-carousel-wheel-gestures
```
## [usage permalink](https://www.embla-carousel.com/plugins/wheel-gestures/\#usage) Usage
This plugin accepts a single **optional** parameter, which is its [options](https://www.embla-carousel.com/plugins/wheel-gestures/#options) object that allows you to configure it.
Copy code snippet to clipboardCopy
```prism-code js
import EmblaCarousel from 'embla-carousel'import { WheelGesturesPlugin } from 'embla-carousel-wheel-gestures'
const embla = EmblaCarousel(emblaRoot, { loop: false }, [WheelGesturesPlugin()]) // Add plugin
```
## [options permalink](https://www.embla-carousel.com/plugins/wheel-gestures/\#options) Options
Below follows an exhaustive **list of all** `Wheel Gestures` **options** and their default values.
* * *
### [wheeldraggingclass permalink](https://www.embla-carousel.com/plugins/wheel-gestures/\#wheeldraggingclass) wheelDraggingClass
Type: `string`
Default: `is-wheel-dragging`
Choose a classname that will be applied to the container during a wheel gesture. Pass an empty string to opt-out.
* * *
### [forcewheelaxis permalink](https://www.embla-carousel.com/plugins/wheel-gestures/\#forcewheelaxis) forceWheelAxis
Type: `string | undefined`
Default: `undefined`
Force an axis on which to listen for wheel events. Choose scroll axis between `x` and `y`. Useful if you want to slide horizontally when scrolling vertically or vice versa.
* * *
### [target permalink](https://www.embla-carousel.com/plugins/wheel-gestures/\#target) target
Type: `Element`
Default: `undefined`
Specify the element that should be observed for wheel events.
* * *
[Edit this page on GitHub](https://github.com/davidjerleke/embla-carousel/blob/master/packages/embla-carousel-docs/src/content/pages/plugins/wheel-gestures.mdx)
## Slide Container Setup
[Skip to content](https://www.embla-carousel.com/guides/slide-container/#main-content)
# Slide Container
Embla Carousel allows you to use **any CSS to stack your slides** in the chosen scroll [axis](https://www.embla-carousel.com/api/options/#axis), whether it's CSS Grid, flexbox, inline-blocks or anything else. This guide will show you **how to setup** your **slide container** with flexbox and CSS Grid.
* * *
## [using flexbox permalink](https://www.embla-carousel.com/guides/slide-container/\#using-flexbox) Using Flexbox
With the minimal [HTML setup](https://www.embla-carousel.com/get-started/module/#the-html-structure) in place, we're going use flexbox to style our slide container. First, we need to stack our slides in our chosen scroll direction. This is an example of a container with slides stacked **horizontally**:
Copy code snippet to clipboardCopy
```prism-code css
.embla__container { display: flex;}
```
In order to create a **vertical** carousel, we can modify our container by setting the `flex-direction` to `column`. Additionally, a vertical carousel needs a **specified height**:
Copy code snippet to clipboardCopy
```prism-code css
.embla__container { display: flex; flex-direction: column; height: 200px;}
```
Now we're ready to declare slide sizes using the `flex` property:
Copy code snippet to clipboardCopy
```prism-code css
.embla__slide { flex: 0 0 80%; /* Slide covers 80% of the viewport */}
```
## [using css grid permalink](https://www.embla-carousel.com/guides/slide-container/\#using-css-grid) Using CSS Grid
Creating a CSS Grid container based on the minimal [HTML setup](https://www.embla-carousel.com/get-started/module/#the-html-structure) gives us the power to declare everyting, including slide sizes together with our container styles. Here's an example of a **horizontal** container setup:
Copy code snippet to clipboardCopy
```prism-code css
.embla__container { display: grid; grid-auto-flow: column; grid-auto-columns: 80%; /* Each slide covers 80% of the viewport */}
```
We can easily modify our CSS Grid container to create a **vertical** carousel by changing our `column` declarations to `row`. Don't forget that a vertical carousel also needs a **specified height**:
Copy code snippet to clipboardCopy
```prism-code css
.embla__container { display: grid; grid-auto-flow: row; grid-auto-rows: 80%; /* Each slide covers 80% of the viewport */ height: 200px;}
```
[Edit this page on GitHub](https://github.com/davidjerleke/embla-carousel/blob/master/packages/embla-carousel-docs/src/content/pages/guides/slide-container.md)
## Embla Carousel Auto Scroll
[Skip to content](https://www.embla-carousel.com/plugins/auto-scroll/#main-content)
# Auto Scroll
[View plugin on GitHub](https://github.com/davidjerleke/embla-carousel/tree/master/packages/embla-carousel-auto-scroll)
This plugin is used to extend Embla Carousel with **auto scroll** functionality.
* * *
## [example permalink](https://www.embla-carousel.com/plugins/auto-scroll/\#example) Example
Edit Code
1
2
3
4
5
6
7
8
Start
## [installation permalink](https://www.embla-carousel.com/plugins/auto-scroll/\#installation) Installation
Start by installing the **npm package** and save it to your dependencies:
CDNCDNnpmnpmyarnyarn
Copy code snippet to clipboardCopy
```prism-code html
<script src="https://unpkg.com/embla-carousel-auto-scroll/embla-carousel-auto-scroll.umd.js"></script>
```
Copy code snippet to clipboardCopy
```prism-code shell
npm install embla-carousel-auto-scroll --save
```
Copy code snippet to clipboardCopy
```prism-code shell
yarn add embla-carousel-auto-scroll
```
## [options permalink](https://www.embla-carousel.com/plugins/auto-scroll/\#options) Options
Below follows an exhaustive **list of all** `Auto Scroll` **options** and their default values.
### [speed permalink](https://www.embla-carousel.com/plugins/auto-scroll/\#speed) speed
Type: `number`
Default: `2`
Number of pixels auto scroll should advance per frame.
* * *
### [startdelay permalink](https://www.embla-carousel.com/plugins/auto-scroll/\#startdelay) startDelay
Type: `number`
Default: `1000`
Number of milliseconds auto scroll should **wait before it starts**. This also applies when user interactions end and [stopOnInteraction](https://www.embla-carousel.com/plugins/auto-scroll/#stoponinteraction) is `false`.
* * *
### [direction permalink](https://www.embla-carousel.com/plugins/auto-scroll/\#direction) direction
Type: `string`
Default: `forward`
This option is used to set the auto scroll direction. Set it to `backward` if you want it to scroll in the opposite direction.
* * *
### [playoninit permalink](https://www.embla-carousel.com/plugins/auto-scroll/\#playoninit) playOnInit
Type: `boolean`
Default: `true`
If set to `false`, you'll have to start auto scroll yourself by calling the [play](https://www.embla-carousel.com/plugins/auto-scroll/#play) method.
* * *
### [stoponinteraction permalink](https://www.embla-carousel.com/plugins/auto-scroll/\#stoponinteraction) stopOnInteraction
Type: `boolean`
Default: `true`
If set to `false`, auto scroll will not be disabled after drag interactions, and it will restart every time after an interaction.
* * *
### [stoponmouseenter permalink](https://www.embla-carousel.com/plugins/auto-scroll/\#stoponmouseenter) stopOnMouseEnter
Type: `boolean`
Default: `false`
When enabled, auto scroll will stop when a mouse pointer enters the Embla Carousel container. If [stopOnInteraction](https://www.embla-carousel.com/plugins/auto-scroll/#stoponinteraction) is also `false`, auto scroll will resume when the mouse leaves the carousel container.
* * *
### [stoponfocusin permalink](https://www.embla-carousel.com/plugins/auto-scroll/\#stoponfocusin) stopOnFocusIn
Type: `boolean`
Default: `true`
When enabled, auto scroll will stop when a focusable element inside the carousel recieves focus. If [stopOnInteraction](https://www.embla-carousel.com/plugins/auto-scroll/#stoponinteraction) is `false`, auto scroll will resume when the user leaves focus.
* * *
### [rootnode permalink](https://www.embla-carousel.com/plugins/auto-scroll/\#rootnode) rootNode
Type: `(emblaRoot: HTMLElement) => HTMLElement | null`
Default: `null`
The **node** that should **respond** to user **interactions** like [stopOnMouseEnter](https://www.embla-carousel.com/plugins/auto-scroll/#stoponmouseenter) and [stopOnInteraction](https://www.embla-carousel.com/plugins/auto-scroll/#stoponinteraction). If this is omitted, the node that wraps the Embla Carousel will be used as default.
* * *
## [methods permalink](https://www.embla-carousel.com/plugins/auto-scroll/\#methods) Methods
Below follows an exhaustive **list of all** `Auto Scroll` **methods** with their respective parameters and return values.
* * *
### [play permalink](https://www.embla-carousel.com/plugins/auto-scroll/\#play) play
Parameters: `startDelayOverride?: number`
Returns: `void`
Start auto scroll. Pass a **startDelayOverride** if you want to change the [startDelay](https://www.embla-carousel.com/plugins/auto-scroll/#startdelay) option after the plugin has been initialized.
* * *
### [stop permalink](https://www.embla-carousel.com/plugins/auto-scroll/\#stop) stop
Parameters: `none`
Returns: `void`
Stops auto scroll.
* * *
### [reset permalink](https://www.embla-carousel.com/plugins/auto-scroll/\#reset) reset
Parameters: `none`
Returns: `void`
Stops auto scroll, and starts the timer again using [startDelay](https://www.embla-carousel.com/plugins/auto-scroll/#startdelay) when the carousel has settled. This will only take effect if auto scroll is playing. If auto scroll is stopped, this method won't trigger anything.
* * *
### [isplaying permalink](https://www.embla-carousel.com/plugins/auto-scroll/\#isplaying) isPlaying
Parameters: `none`
Returns: `boolean`
Returns a boolean whether the carousel is auto scrolling or not.
* * *
## [events permalink](https://www.embla-carousel.com/plugins/auto-scroll/\#events) Events
Below follows an exhaustive **list of all** `Auto Scroll` **events** together with information about how they work.
* * *
### [autoscrollplay permalink](https://www.embla-carousel.com/plugins/auto-scroll/\#autoscrollplay) autoScroll:play
Once: `no`
Fires when auto scroll starts playing.
* * *
### [autoscrollstop permalink](https://www.embla-carousel.com/plugins/auto-scroll/\#autoscrollstop) autoScroll:stop
Once: `no`
Fires when auto scroll stops scrolling.
* * *
[Edit this page on GitHub](https://github.com/davidjerleke/embla-carousel/blob/master/packages/embla-carousel-docs/src/content/pages/plugins/auto-scroll.mdx)
## Embla Carousel Vue
[Skip to content](https://www.embla-carousel.com/get-started/vue/#main-content)
# Vue
Embla Carousel provides a wrapper for [Vue](https://vuejs.org/) that ensures seamless integration of the carousel into your Vue project and automatic cleanup on component unmount.
Start by installing the Embla Carousel **npm package** and add it to your dependencies.
npmnpmyarnyarn
Copy code snippet to clipboardCopy
```prism-code shell
npm install embla-carousel-vue --save
```
Copy code snippet to clipboardCopy
```prism-code shell
yarn add embla-carousel-vue
```
**Note:** `embla-carousel-vue` only supports `Vue 3` and up. However, you can
use the [core package](https://www.embla-carousel.com/get-started/module/) that `embla-carousel-vue` is
using under the hood, and re-create the behaviour of `embla-carousel-vue`.
Here's an [example](https://github.com/meirroth/embla-carousel-vue2) of how
you can use Embla Carousel with `Vue 2` Options API.
* * *
## [the component structure permalink](https://www.embla-carousel.com/get-started/vue/\#the-component-structure) The component structure
Embla Carousel provides the handy `emblaCarouselVue` function for seamless integration with Vue. A minimal setup requires an **overflow wrapper** and a **scroll container**. Start by adding the following structure to your carousel:
Copy code snippet to clipboardCopy
```prism-code html
<script setup> import emblaCarouselVue from 'embla-carousel-vue'
const [emblaRef] = emblaCarouselVue()</script>
<template> <div class="embla" ref="emblaRef"> <div class="embla__container"> <div class="embla__slide">Slide 1</div> <div class="embla__slide">Slide 2</div> <div class="embla__slide">Slide 3</div> </div> </div></template>
```
## [styling the carousel permalink](https://www.embla-carousel.com/get-started/vue/\#styling-the-carousel) Styling the carousel
The `emblaCarouselVue` function gives us an **emblaRef** to attach to our wrapping element with the classname `embla`, which is needed to cover the scroll overflow. The element with the `container` classname is the scroll body that scrolls the slides. Continue by adding the following **CSS** to these elements:
Copy code snippet to clipboardCopy
```prism-code html
<style scoped> .embla { overflow: hidden; } .embla__container { display: flex; } .embla__slide { flex: 0 0 100%; min-width: 0; }</style>
```
## [accessing the carousel api permalink](https://www.embla-carousel.com/get-started/vue/\#accessing-the-carousel-api) Accessing the carousel API
The `emblaCarouselVue` function takes the Embla Carousel [options](https://www.embla-carousel.com/api/options/) as the first argument. Additionally, you can access the [API](https://www.embla-carousel.com/api/) with an `onMounted` like demonstrated below:
Copy code snippet to clipboardCopy
```prism-code html
<script setup> import { onMounted } from 'vue' import emblaCarouselVue from 'embla-carousel-vue'
const [emblaRef, emblaApi] = emblaCarouselVue({ loop: false })
onMounted(() => { if (emblaApi.value) { console.log(emblaApi.value.slideNodes()) // Access API } })</script>
<template> <div class="embla" ref="emblaRef"> <div class="embla__container"> <div class="embla__slide">Slide 1</div> <div class="embla__slide">Slide 2</div> <div class="embla__slide">Slide 3</div> </div> </div></template>
```
## [adding plugins permalink](https://www.embla-carousel.com/get-started/vue/\#adding-plugins) Adding plugins
Start by installing the plugin you want to use. In this example, we're going to install the [Autoplay](https://www.embla-carousel.com/plugins/autoplay/) plugin:
npmnpmyarnyarn
Copy code snippet to clipboardCopy
```prism-code shell
npm install embla-carousel-autoplay --save
```
Copy code snippet to clipboardCopy
```prism-code shell
yarn add embla-carousel-autoplay
```
The `emblaCarouselVue` function accepts [plugins](https://www.embla-carousel.com/plugins/) as the second argument. Note that plugins need to be passed in an **array** like so:
Copy code snippet to clipboardCopy
```prism-code html
<script setup> import emblaCarouselVue from 'embla-carousel-vue' import Autoplay from 'embla-carousel-autoplay'
const [emblaRef] = emblaCarouselVue({ loop: false }, [Autoplay()])</script>
<template> <div class="embla" ref="emblaRef"> <div class="embla__container"> <div class="embla__slide">Slide 1</div> <div class="embla__slide">Slide 2</div> <div class="embla__slide">Slide 3</div> </div> </div></template>
```
Congratulations! You just created your first Embla Carousel component.
[Edit this page on GitHub](https://github.com/davidjerleke/embla-carousel/blob/master/packages/embla-carousel-docs/src/content/pages/get-started/vue.mdx)
## Embla Carousel CDN Setup
[Skip to content](https://www.embla-carousel.com/get-started/cdn/#main-content)
# CDN
Start by including the Embla Carousel script from a CDN with a `script` tag:
Copy code snippet to clipboardCopy
```prism-code html
<script src="https://unpkg.com/embla-carousel/embla-carousel.umd.js"></script>
```
* * *
## [the html structure permalink](https://www.embla-carousel.com/get-started/cdn/\#the-html-structure) The HTML structure
A minimal setup requires an **overflow wrapper** and a **scroll container**. Start by adding the following **HTML** structure to your carousel:
Copy code snippet to clipboardCopy
```prism-code html
<div class="embla"> <div class="embla__container"> <div class="embla__slide">Slide 1</div> <div class="embla__slide">Slide 2</div> <div class="embla__slide">Slide 3</div> </div></div>
```
## [styling the carousel permalink](https://www.embla-carousel.com/get-started/cdn/\#styling-the-carousel) Styling the carousel
The wrapping element with the classname `embla` is needed to cover the scroll overflow. The element with the `container` classname is the scroll body that scrolls the slides. Continue by adding the following **CSS** to these elements:
Copy code snippet to clipboardCopy
```prism-code css
.embla { overflow: hidden;}.embla__container { display: flex;}.embla__slide { flex: 0 0 100%; min-width: 0;}
```
## [accessing the carousel api permalink](https://www.embla-carousel.com/get-started/cdn/\#accessing-the-carousel-api) Accessing the carousel API
Grab the element with the classname `embla` and pass it as the first argument to the `EmblaCarousel` constructor. This will **initialize** the **carousel** and give you **access** to the Embla Carousel [API](https://www.embla-carousel.com/api/).
Copy code snippet to clipboardCopy
```prism-code html
<script type="text/javascript"> const emblaNode = document.querySelector('.embla') const options = { loop: false } const emblaApi = EmblaCarousel(emblaNode, options)
console.log(emblaApi.slideNodes()) // Access API</script>
```
## [adding plugins permalink](https://www.embla-carousel.com/get-started/cdn/\#adding-plugins) Adding plugins
Start by including the plugin you want to use. In this example, we're going to include the [Autoplay](https://www.embla-carousel.com/plugins/autoplay/) plugin:
Copy code snippet to clipboardCopy
```prism-code html
<script src="https://unpkg.com/embla-carousel/embla-carousel.umd.js"></script><script src="https://unpkg.com/embla-carousel-autoplay/embla-carousel-autoplay.umd.js"></script>
```
Plugins included from a CDN will be **prefixed** with **EmblaCarousel**. Here's an example that shows how to add the [Autoplay](https://www.embla-carousel.com/plugins/autoplay/) plugin to your carousel:
Copy code snippet to clipboardCopy
```prism-code html
<script type="text/javascript"> const emblaNode = document.querySelector('.embla') const options = { loop: false } const plugins = [EmblaCarouselAutoplay()] const emblaApi = EmblaCarousel(emblaNode, options, plugins)</script>
```
Congratulations! You just created your first Embla Carousel.
[Edit this page on GitHub](https://github.com/davidjerleke/embla-carousel/blob/master/packages/embla-carousel-docs/src/content/pages/get-started/cdn.mdx)
## Customizing Slide Sizes
[Skip to content](https://www.embla-carousel.com/guides/slide-sizes/#main-content)
# Slide Sizes
This guide will show you how to customize **slide sizes** for your carousels using the [flexbox](https://www.embla-carousel.com/guides/slide-container/#using-flexbox) setup. Embla Carousel supports horizontal and vertical carousels with the [axis](https://www.embla-carousel.com/api/options/#axis) option and that's why this guide will use the term **slide sizes** instead of **widths** or **heights**.
If you haven't read about how to setup your slide [container](https://www.embla-carousel.com/guides/slide-container/), please visit that guide before continuing with this.
* * *
## [declaring sizes permalink](https://www.embla-carousel.com/guides/slide-sizes/\#declaring-sizes) Declaring sizes
Slide sizes should in most cases be **declared with CSS**. Embla Carousel **supports any slide size out of the box**, and will pick up whatever size you've declared in your CSS. A very simple setup could look like this:
Copy code snippet to clipboardCopy
```prism-code css
.embla__slide { flex: 0 0 50%; /* Slide covers 50% of the viewport */ min-width: 0;}
```
You can also declare your slide sizes using any other CSS unit like so:
Copy code snippet to clipboardCopy
```prism-code css
.embla__slide { flex: 0 0 200px; /* Slide covers 200px of the viewport */ min-width: 0;}
```
## [variable sizes permalink](https://www.embla-carousel.com/guides/slide-sizes/\#variable-sizes) Variable sizes
Variable slide sizes is also **supported out of the box**. Declare your slide sizes in your CSS or let the content of your slides determine their sizes.
Copy code snippet to clipboardCopy
```prism-code css
.embla__slide:nth-child(1) { flex: 0 0 30%; /* Slide covers 30% of the viewport */ min-width: 0;}.embla__slide:nth-child(2) { flex: 0 0 60%; /* Slide covers 60% of the viewport */ min-width: 0;}
```
If you're letting your slide sizes adapt to their content, make sure that the **slide sizes don't exceed** the size of the **viewport**.
Copy code snippet to clipboardCopy
```prism-code css
.embla__slide { flex: 0 0 auto; /* Adapt slide size to its content */ min-width: 0; max-width: 100%; /* Prevent from growing larger than viewport */}
```
## [responding to breakpoints permalink](https://www.embla-carousel.com/guides/slide-sizes/\#responding-to-breakpoints) Responding to breakpoints
Embla Carousel will **automatically pick up** any **changes in slide sizes** when the **window is resized**. It's very simple to set different sizes based on your breakpoints:
Copy code snippet to clipboardCopy
```prism-code css
.embla__slide { flex: 0 0 100%; /* Default slide covers 100% of the viewport */ min-width: 0;}@media (min-width: 768px) { .embla__slide { flex: 0 0 50%; /* Breakpoint SM slide covers 50% of the viewport */ }}
```
[Edit this page on GitHub](https://github.com/davidjerleke/embla-carousel/blob/master/packages/embla-carousel-docs/src/content/pages/guides/slide-sizes.md)
## Embla Carousel with Solid
[Skip to content](https://www.embla-carousel.com/get-started/solid/#main-content)
# Solid
Embla Carousel provides a wrapper for [Solid](https://www.solidjs.com/) that ensures seamless integration of the carousel into your Solid project and automatic cleanup on component unmount.
Start by installing the Embla Carousel **npm package** and add it to your dependencies.
npmnpmyarnyarn
Copy code snippet to clipboardCopy
```prism-code shell
npm install embla-carousel-solid --save
```
Copy code snippet to clipboardCopy
```prism-code shell
yarn add embla-carousel-solid
```
* * *
## [the component structure permalink](https://www.embla-carousel.com/get-started/solid/\#the-component-structure) The component structure
Embla Carousel provides the handy `createEmblaCarousel` method for seamless integration with Solid. A minimal setup requires an **overflow wrapper** and a **scroll container**. Start by adding the following structure to your carousel:
Copy code snippet to clipboardCopy
```prism-code jsx
import createEmblaCarousel from 'embla-carousel-solid'
export function EmblaCarousel() { const [emblaRef] = createEmblaCarousel()
return ( <div class="embla" ref={emblaRef}> <div class="embla__container"> <div class="embla__slide">Slide 1</div> <div class="embla__slide">Slide 2</div> <div class="embla__slide">Slide 3</div> </div> </div> )}
```
## [styling the carousel permalink](https://www.embla-carousel.com/get-started/solid/\#styling-the-carousel) Styling the carousel
The method gives us a **ref** to attach to our wrapping element with the classname `embla`, which is needed to cover the scroll overflow. The element with the `container` classname is the scroll body that scrolls the slides. Continue by adding the following **CSS** to these elements:
Copy code snippet to clipboardCopy
```prism-code css
.embla { overflow: hidden;}.embla__container { display: flex;}.embla__slide { flex: 0 0 100%; min-width: 0;}
```
## [accessing the carousel api permalink](https://www.embla-carousel.com/get-started/solid/\#accessing-the-carousel-api) Accessing the carousel API
The `createEmblaCarousel` method takes the Embla Carousel [options](https://www.embla-carousel.com/api/options/) as the first argument, which is a Solid accessor. Additionally, you can access the [API](https://www.embla-carousel.com/api/) with a `onMount` like demonstrated below:
Copy code snippet to clipboardCopy
```prism-code jsx
import { onMount } from 'solid-js'import createEmblaCarousel from 'embla-carousel-solid'
export function EmblaCarousel() { const [emblaRef, emblaApi] = createEmblaCarousel(() => ({ loop: true }))
onMount(() => { const api = emblaApi() if (api) { console.log(api.slideNodes()) // Access API } })
return ( <div class="embla" ref={emblaRef}> <div class="embla__container"> <div class="embla__slide">Slide 1</div> <div class="embla__slide">Slide 2</div> <div class="embla__slide">Slide 3</div> </div> </div> )}
```
## [adding plugins permalink](https://www.embla-carousel.com/get-started/solid/\#adding-plugins) Adding plugins
Start by installing the plugin you want to use. In this example, we're going to install the [Autoplay](https://www.embla-carousel.com/plugins/autoplay/) plugin:
npmnpmyarnyarn
Copy code snippet to clipboardCopy
```prism-code shell
npm install embla-carousel-autoplay --save
```
Copy code snippet to clipboardCopy
```prism-code shell
yarn add embla-carousel-autoplay
```
The `createEmblaCarousel` method accepts [plugins](https://www.embla-carousel.com/plugins/) as the second argument, which is a Solid accessor. Note that plugins need to be passed in an **array** like so:
Copy code snippet to clipboardCopy
```prism-code jsx
import createEmblaCarousel from 'embla-carousel-solid'import Autoplay from 'embla-carousel-autoplay'
export function EmblaCarousel() { const [emblaRef] = createEmblaCarousel( () => ({ loop: true }), () => [AutoPlay()] )
return ( <div class="embla" ref={emblaRef}> <div class="embla__container"> <div class="embla__slide">Slide 1</div> <div class="embla__slide">Slide 2</div> <div class="embla__slide">Slide 3</div> </div> </div> )}
```
Congratulations! You just created your first Embla Carousel component.
[Edit this page on GitHub](https://github.com/davidjerleke/embla-carousel/blob/master/packages/embla-carousel-docs/src/content/pages/get-started/solid.mdx)
## Managing Slide Gaps
[Skip to content](https://www.embla-carousel.com/guides/slide-gaps/#main-content)
# Slide Gaps
Embla Carousel allows you to use **any CSS to stack your slides** in the chosen scroll [axis](https://www.embla-carousel.com/api/options/#axis), whether it's CSS Grid, flexbox, inline-blocks or anything else. It will conveniently **pick up any spacings** between the slides and **automatically adjust the scroll snaps** accordingly.
* * *
## [declaring gaps permalink](https://www.embla-carousel.com/guides/slide-gaps/\#declaring-gaps) Declaring gaps
It's recommended to declare gaps between slides **using CSS**. Any CSS that will render space between the slides is valid. You may add spacing in one direction like so:
Copy code snippet to clipboardCopy
```prism-code css
.embla__slide { margin-right: 20px;}
```
It's also valid to add gaps in both directions:
Copy code snippet to clipboardCopy
```prism-code css
.embla__slide { margin-right: 20px; margin-left: 10px;}
```
If you want to accomodate for RTL languages, you can use [`margin-inline-end`](https://developer.mozilla.org/en-US/docs/Web/CSS/margin-inline-end) and [`margin-inline-start`](https://developer.mozilla.org/en-US/docs/Web/CSS/margin-inline-start) instead:
Copy code snippet to clipboardCopy
```prism-code css
.embla__slide { margin-inline-end: 20px; /* Space after the slide */ margin-inline-start: 10px; /* Space before the slide */}
```
If you're using CSS Grid you can declare your gaps like so:
Copy code snippet to clipboardCopy
```prism-code css
.embla__container { grid-column-gap: 20px;}
```
> **Note!** If you don't have [loop](https://www.embla-carousel.com/api/options/#loop) enabled, Embla Carousel will ignore any gaps at the start and end edge of the carousel.
## [variable gaps permalink](https://www.embla-carousel.com/guides/slide-gaps/\#variable-gaps) Variable gaps
Just like [variable](https://www.embla-carousel.com/guides/slide-sizes/#variable-sizes) slide sizes, variable gap sizes is **supported out of the box**. Declare your gap sizes in your CSS to achieve this:
Copy code snippet to clipboardCopy
```prism-code css
.embla__slide:nth-child(1) { margin-right: 10px;}.embla__slide:nth-child(2) { margin-right: 20px; margin-left: 10px;}
```
## [responding to breakpoints permalink](https://www.embla-carousel.com/guides/slide-gaps/\#responding-to-breakpoints) Responding to breakpoints
Embla Carousel will **automatically pick up** any **changes in gap sizes** when the **window is resized**. It's very simple to set different sizes based on your breakpoints:
Copy code snippet to clipboardCopy
```prism-code css
.embla__slide { margin-right: 10px; /* Default slide gap */}@media (min-width: 768px) { .embla__slide { margin-right: 20px; /* Breakpoint SM gap */ }}
```
[Edit this page on GitHub](https://github.com/davidjerleke/embla-carousel/blob/master/packages/embla-carousel-docs/src/content/pages/guides/slide-gaps.md)
## Auto Height Plugin
[Skip to content](https://www.embla-carousel.com/plugins/auto-height/#main-content)
# Auto Height
[View plugin on GitHub](https://github.com/davidjerleke/embla-carousel/tree/master/packages/embla-carousel-auto-height)
This plugin is used to extend Embla Carousel with **auto height** functionality. It changes the height of the carousel container to fit the height of the highest slide in view.
* * *
## [example permalink](https://www.embla-carousel.com/plugins/auto-height/\#example) Example
Edit Code
1
2
3
4
5
## [installation permalink](https://www.embla-carousel.com/plugins/auto-height/\#installation) Installation
First you need to install the **npm package** and save it to your dependencies:
CDNCDNnpmnpmyarnyarn
Copy code snippet to clipboardCopy
```prism-code html
<script src="https://unpkg.com/embla-carousel-auto-height/embla-carousel-auto-height.umd.js"></script>
```
Copy code snippet to clipboardCopy
```prism-code shell
npm install embla-carousel-auto-height --save
```
Copy code snippet to clipboardCopy
```prism-code shell
yarn add embla-carousel-auto-height
```
You can make use of CSS transitions to **transition height** changes. But beware: Transitioning height triggers reflow and may cause a performance hit.
Copy code snippet to clipboardCopy
```prism-code css
.embla__container { transition: height 0.2s;}
```
If you've been following along with any of the guides in the [get started](https://www.embla-carousel.com/get-started/) section, you want to make sure that each **slide height** is **determined** by the **content** it holds. Add the following to your CSS to achieve this:
Copy code snippet to clipboardCopy
```prism-code css
.embla__container { display: flex; align-items: flex-start; /* Add this */}
```
[Edit this page on GitHub](https://github.com/davidjerleke/embla-carousel/blob/master/packages/embla-carousel-docs/src/content/pages/plugins/auto-height.mdx)
## Embla Carousel Navigation
[Skip to content](https://www.embla-carousel.com/guides/previous-and-next-buttons/#main-content)
# Previous & Next Buttons
This guide will show you **how** to **add previous and next buttons** using the Embla Carousel [API](https://www.embla-carousel.com/api/). We're going to make use of the following methods to achieve this:
- [scrollPrev](https://www.embla-carousel.com/api/methods/#scrollprev)
- [scrollNext](https://www.embla-carousel.com/api/methods/#scrollnext)
* * *
## [button placement permalink](https://www.embla-carousel.com/guides/previous-and-next-buttons/\#button-placement) Button placement
Assuming your carousel is [draggable](https://www.embla-carousel.com/api/options/#watchdrag), it's important to note that the **root node** will **respond to pointer events**. The root node is the one that is passed to the `EmblaCarousel` initializer. In the following example, it has the class name `embla`:
Copy code snippet to clipboardCopy
```prism-code html
<div class="embla"> <div class="embla__container"> <div class="embla__slide">Slide 1</div> <div class="embla__slide">Slide 2</div> <div class="embla__slide">Slide 3</div> </div></div>
```
Copy code snippet to clipboardCopy
```prism-code js
const emblaNode = document.querySelector('.embla') // Root nodeconst embla = EmblaCarousel(emblaNode) // Passed to the initializer here
```
Therefore, it's **not a good idea** to place the previous and next buttons inside the root element, because a click on any of the buttons may trigger **unintended drag interactions** on the carousel.
To solve this, we're going to modify the minimal [HTML setup](https://www.embla-carousel.com/get-started/module/#the-html-structure) from the installation guide by creating a **viewport wrapper** around our container like so:
Copy code snippet to clipboardCopy
```prism-code html
<div class="embla"> <div class="embla__viewport"> <div class="embla__container"> <div class="embla__slide">Slide 1</div> <div class="embla__slide">Slide 2</div> <div class="embla__slide">Slide 3</div> </div> </div></div>
```
Our new wrapper with the class name `embla__viewport` will act as our **new root element**, which will encapsulate the scroll container and respond to pointer events. Now, we're ready to place our buttons **outside** that wrapper:
Copy code snippet to clipboardCopy
```prism-code html
<div class="embla"> <div class="embla__viewport"> <div class="embla__container"> <div class="embla__slide">Slide 1</div> <div class="embla__slide">Slide 2</div> <div class="embla__slide">Slide 3</div> </div> </div> <button class="embla__prev">Prev</button> <button class="embla__next">Next</button></div>
```
## [with vanilla javascript permalink](https://www.embla-carousel.com/guides/previous-and-next-buttons/\#with-vanilla-javascript) With vanilla JavaScript
Adding event listeners to our buttons is easy. It just requires some basic JavaScript to get this done. First, we need to **grab our wrappers and buttons**:
Copy code snippet to clipboardCopy
```prism-code js
import EmblaCarousel from 'embla-carousel'
// Grab wrapper nodesconst rootNode = document.querySelector('.embla')const viewportNode = rootNode.querySelector('.embla__viewport')
// Grab button nodesconst prevButtonNode = rootNode.querySelector('.embla__prev')const nextButtonNode = rootNode.querySelector('.embla__next')
```
Now that we have our nodes, let's initialize our carousel and make our previous and next **buttons respond to clicks**. We'll use [scrollPrev](https://www.embla-carousel.com/api/methods/#scrollprev) and [scrollNext](https://www.embla-carousel.com/api/methods/#scrollnext) for this:
Copy code snippet to clipboardCopy
```prism-code js
// Initialize the carouselconst embla = EmblaCarousel(viewportNode)
// Add click listenersprevButtonNode.addEventListener('click', embla.scrollPrev, false)nextButtonNode.addEventListener('click', embla.scrollNext, false)
```
## [with react permalink](https://www.embla-carousel.com/guides/previous-and-next-buttons/\#with-react) With React
Modifying the minimal [component setup](https://www.embla-carousel.com/get-started/react/#the-component-structure) from the installation guide, we're going to use the `emblaApi` to create our `scrollPrev` and `scrollNext` functions:
Copy code snippet to clipboardCopy
```prism-code jsx
import React, { useCallback } from 'react'import useEmblaCarousel from 'embla-carousel-react'
export const EmblaCarousel = () => { const [emblaRef, emblaApi] = useEmblaCarousel()
const scrollPrev = useCallback(() => { if (emblaApi) emblaApi.scrollPrev() }, [emblaApi])
const scrollNext = useCallback(() => { if (emblaApi) emblaApi.scrollNext() }, [emblaApi])
return ( <div className="embla"> <div className="embla__viewport" ref={emblaRef}> <div className="embla__container"> <div className="embla__slide">Slide 1</div> <div className="embla__slide">Slide 2</div> <div className="embla__slide">Slide 3</div> </div> </div> <button className="embla__prev" onClick={scrollPrev}> Prev </button> <button className="embla__next" onClick={scrollNext}> Next </button> </div> )}
```
[Edit this page on GitHub](https://github.com/davidjerleke/embla-carousel/blob/master/packages/embla-carousel-docs/src/content/pages/guides/previous-and-next-buttons.md)