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
2
3
4
5
6
7
8
9
10
1
2
3
4
5
6
7
8
9
10
## [plugin examples permalink](https://www.embla-carousel.com/examples/predefined/\#plugin-examples) Plugin Examples
Extend your carousels with [plugins](https://www.embla-carousel.com/plugins/) and easily add features.
### [autoplay permalink](https://www.embla-carousel.com/examples/predefined/\#autoplay) Autoplay
Edit Code
1
2
3
4
5
Start
### [auto scroll permalink](https://www.embla-carousel.com/examples/predefined/\#auto-scroll) Auto Scroll
Edit Code
1
2
3
4
5
6
7
8
Start
### [auto height permalink](https://www.embla-carousel.com/examples/predefined/\#auto-height) Auto Height
Edit Code
1
2
3
4
5
### [fade permalink](https://www.embla-carousel.com/examples/predefined/\#fade) Fade
Edit Code
### [class names permalink](https://www.embla-carousel.com/examples/predefined/\#class-names) Class Names
Edit Code
## [tween examples permalink](https://www.embla-carousel.com/examples/predefined/\#tween-examples) Tween Examples
Tween styles on your slides as the carousel scrolls.
### [parallax permalink](https://www.embla-carousel.com/examples/predefined/\#parallax) Parallax
Edit Code
### [scale permalink](https://www.embla-carousel.com/examples/predefined/\#scale) Scale
Edit Code
1
2
3
4
5
### [opacity permalink](https://www.embla-carousel.com/examples/predefined/\#opacity) Opacity
Edit Code
## [miscellaneous examples permalink](https://www.embla-carousel.com/examples/predefined/\#miscellaneous-examples) Miscellaneous Examples
Add features using the [API](https://www.embla-carousel.com/api/) and the internal engine.
### [progress permalink](https://www.embla-carousel.com/examples/predefined/\#progress) Progress
Edit Code
1
2
3
4
5
### [lazy load permalink](https://www.embla-carousel.com/examples/predefined/\#lazy-load) Lazy Load
Edit Code
### [infinite scroll permalink](https://www.embla-carousel.com/examples/predefined/\#infinite-scroll) Infinite Scroll
Edit Code
1
2
3
4
5
### [ios style picker default permalink](https://www.embla-carousel.com/examples/predefined/\#ios-style-picker-default) IOS Style Picker Default
Edit Code
0
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
hours
0
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
min
### [ios style picker loop permalink](https://www.embla-carousel.com/examples/predefined/\#ios-style-picker-loop) IOS Style Picker Loop
Edit Code
0
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
hours
0
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
min
[Edit this page on GitHub](https://github.com/davidjerleke/embla-carousel/blob/master/packages/embla-carousel-docs/src/content/pages/examples/predefined.mdx)
## Embla Carousel Events
[Skip to content](https://www.embla-carousel.com/api/events/#main-content)
# Events
Embla Carousel exposes **events** that you can listen to in order to **react** to **changes** in the carousel.
* * *
## [usage permalink](https://www.embla-carousel.com/api/events/\#usage) Usage
You need an **initialized carousel** in order to **make use of events**. Events will only be fired during the lifecycle of a carousel and added event listeners will persist even when you hard reset the carousel with the [reInit](https://www.embla-carousel.com/api/methods/#reinit) method.
### [adding event listeners permalink](https://www.embla-carousel.com/api/events/\#adding-event-listeners) Adding event listeners
After initializing a carousel, we're going to **subscribe** to the [slidesInView](https://www.embla-carousel.com/api/events/#slidesinview) **event** in the following example:
VanillaVanillaReactReactVueVueSolidSolidSvelteSvelte
Copy code snippet to clipboardCopy
```prism-code js
import EmblaCarousel from 'embla-carousel'
const emblaNode = document.querySelector('.embla')const emblaApi = EmblaCarousel(emblaNode)
function logSlidesInView(emblaApi) { console.log(emblaApi.slidesInView())}
emblaApi.on('slidesInView', logSlidesInView)
```
Copy code snippet to clipboardCopy
```prism-code jsx
import { useCallback, useEffect } from 'react'import useEmblaCarousel from 'embla-carousel-react'
export function EmblaCarousel() { const [emblaRef, emblaApi] = useEmblaCarousel()
const logSlidesInView = useCallback((emblaApi) => { console.log(emblaApi.slidesInView()) }, [])
useEffect(() => { if (emblaApi) emblaApi.on('slidesInView', logSlidesInView) }, [emblaApi, logSlidesInView])
// ...}
```
Copy code snippet to clipboardCopy
```prism-code html
<script setup> import { onMounted } from 'vue' import emblaCarouselVue from 'embla-carousel-vue'
const [emblaRef, emblaApi] = emblaCarouselVue()
function logSlidesInView(emblaApi) { console.log(emblaApi.slidesInView()) }
onMounted(() => { if (emblaApi.value) emblaApi.value.on('slidesInView', logSlidesInView) })
// ...</script>
```
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()
function logSlidesInView(emblaApi) { console.log(emblaApi.slidesInView()) }
onMount(() => { const api = emblaApi() if (api) api.on('slidesInView', logSlidesInView) })
// ...}
```
Copy code snippet to clipboardCopy
```prism-code html
<script> import emblaCarouselSvelte from 'embla-carousel-svelte'
let emblaApi
function logSlidesInView(emblaApi) { console.log(emblaApi.slidesInView()) }
function onInit(event) { emblaApi = event.detail emblaApi.on('slidesInView', logSlidesInView) }</script>
<div class="embla" use:emblaCarouselSvelte onemblaInit="{onInit}">...</div>
```
**Note:** Starting with Svelte 5, the `on:` event handlers have been deprecated. However, `on:emblaInit` will remain for backward compatibility.
### [removing event listeners permalink](https://www.embla-carousel.com/api/events/\#removing-event-listeners) Removing event listeners
In order to remove an event listener, you'll have to call the [off](https://www.embla-carousel.com/api/methods/#off) method and make sure to pass the **same callback reference** you passed to the [on](https://www.embla-carousel.com/api/methods/#off) method:
VanillaVanillaReactReactVueVueSolidSolidSvelteSvelte
Copy code snippet to clipboardCopy
```prism-code js
import EmblaCarousel from 'embla-carousel'
const emblaNode = document.querySelector('.embla')const emblaApi = EmblaCarousel(emblaNode)
function logSlidesInViewOnce(emblaApi) { console.log(emblaApi.slidesInView()) emblaApi.off('slidesInView', logSlidesInViewOnce)}
emblaApi.on('slidesInView', logSlidesInViewOnce)
```
Copy code snippet to clipboardCopy
```prism-code jsx
import { useCallback, useEffect } from 'react'import useEmblaCarousel from 'embla-carousel-react'
export function EmblaCarousel() { const [emblaRef, emblaApi] = useEmblaCarousel()
const logSlidesInViewOnce = useCallback((emblaApi) => { console.log(emblaApi.slidesInView()) emblaApi.off('slidesInView', logSlidesInViewOnce) }, [])
useEffect(() => { if (emblaApi) emblaApi.on('slidesInView', logSlidesInViewOnce) }, [emblaApi, logSlidesInViewOnce])
// ...}
```
Copy code snippet to clipboardCopy
```prism-code html
<script setup> import { onMounted } from 'vue' import emblaCarouselVue from 'embla-carousel-vue'
const [emblaRef, emblaApi] = emblaCarouselVue()
function logSlidesInViewOnce(emblaApi) { console.log(emblaApi.slidesInView()) emblaApi.off('slidesInView', logSlidesInViewOnce) }
onMounted(() => { if (emblaApi.value) emblaApi.value.on('slidesInView', logSlidesInViewOnce) })
// ...</script>
```
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()
function logSlidesInViewOnce(emblaApi) { console.log(emblaApi.slidesInView()) emblaApi.off('slidesInView', logSlidesInViewOnce) }
onMount(() => { const api = emblaApi() if (api) api.on('slidesInView', logSlidesInViewOnce) })
// ...}
```
Copy code snippet to clipboardCopy
```prism-code html
<script> import emblaCarouselSvelte from 'embla-carousel-svelte'
let emblaApi
function logSlidesInViewOnce(emblaApi) { console.log(emblaApi.slidesInView()) emblaApi.off('slidesInView', logSlidesInViewOnce) }
function onInit(event) { emblaApi = event.detail emblaApi.on('slidesInView', logSlidesInViewOnce) }</script>
<div class="embla" use:emblaCarouselSvelte onemblaInit="{onInit}">...</div>
```
**Note:** Starting with Svelte 5, the `on:` event handlers have been deprecated. However, `on:emblaInit` will remain for backward compatibility.
### [typescript permalink](https://www.embla-carousel.com/api/events/\#typescript) TypeScript
The `EmblaEventType` is obtained directly from the **core package** `embla-carousel` and used like so:
VanillaVanillaReactReactVueVueSolidSolidSvelteSvelte
Copy code snippet to clipboardCopy
```prism-code tsx
import EmblaCarousel, { EmblaCarouselType, EmblaEventType} from 'embla-carousel'
const emblaNode = document.querySelector('.embla')const emblaApi = EmblaCarousel(emblaNode)
function logEmblaEvent( emblaApi: EmblaCarouselType, eventName: EmblaEventType): void { console.log(`Embla just triggered ${eventName}!`)}
emblaApi.on('slidesInView', logEmblaEvent)
```
Copy code snippet to clipboardCopy
```prism-code tsx
import React, { useCallback } from 'react'import { EmblaCarouselType, EmblaEventType } from 'embla-carousel'import useEmblaCarousel from 'embla-carousel-react'
export function EmblaCarousel() { const [emblaRef, emblaApi] = useEmblaCarousel()
const logEmblaEvent = useCallback( (emblaApi: EmblaCarouselType, eventName: EmblaEventType) => { console.log(`Embla just triggered ${eventName}!`) }, [] )
useEffect(() => { if (emblaApi) emblaApi.on('slidesInView', logEmblaEvent) }, [emblaApi, logEmblaEvent])
// ...}
```
If you're using `pnpm`, you need to install `embla-carousel` as a
**devDependency** when importing types from it like demonstrated above.
This is because even though `embla-carousel-react` has `embla-carousel` as a
dependency, `pnpm` makes nested dependencies inaccessible by design.
Copy code snippet to clipboardCopy
```prism-code html
<script setup> import { onMounted } from 'vue' import { EmblaCarouselType, EmblaEventType } from 'embla-carousel' import emblaCarouselVue from 'embla-carousel-vue'
const [emblaRef] = emblaCarouselVue()
function logEmblaEvent( emblaApi: EmblaCarouselType, eventName: EmblaEventType ): void { console.log(`Embla just triggered ${eventName}!`) }
onMounted(() => { if (emblaApi.value) emblaApi.value.on('slidesInView', logEmblaEvent) })
// ...</script>
```
If you're using `pnpm`, you need to install `embla-carousel` as a
**devDependency** when importing types from it like demonstrated above.
This is because even though `embla-carousel-vue` has `embla-carousel` as a
dependency, `pnpm` makes nested dependencies inaccessible by design.
Copy code snippet to clipboardCopy
```prism-code jsx
import { onMount } from 'solid-js'import { EmblaCarouselType, EmblaEventType } from 'embla-carousel'import createEmblaCarousel from 'embla-carousel-solid'
export function EmblaCarousel() { const [emblaRef, emblaApi] = createEmblaCarousel()
function logEmblaEvent( emblaApi: EmblaCarouselType, eventName: EmblaEventType ): void { console.log(`Embla just triggered ${eventName}!`) }
onMount(() => { const api = emblaApi() if (api) api.on('slidesInView', logEmblaEvent) })
// ...}
```
If you're using `pnpm`, you need to install `embla-carousel` as a
**devDependency** when importing types from it like demonstrated above.
This is because even though `embla-carousel-solid` has `embla-carousel` as a
dependency, `pnpm` makes nested dependencies inaccessible by design.
Copy code snippet to clipboardCopy
```prism-code html
<script> import { EmblaCarouselType, EmblaEventType } from 'embla-carousel' import emblaCarouselSvelte from 'embla-carousel-svelte'
let emblaApi: EmblaCarouselType
function logEmblaEvent( emblaApi: EmblaCarouselType, eventName: EmblaEventType ): void { console.log(`Embla just triggered ${eventName}!`) }
function onInit(event: CustomEvent<EmblaCarouselType>): void { emblaApi = event.detail emblaApi.on('slidesInView', logEmblaEvent) }</script>
<div class="embla" use:emblaCarouselSvelte onemblaInit="{onInit}">...</div>
```
**Note:** Starting with Svelte 5, the `on:` event handlers have been deprecated. However, `on:emblaInit` will remain for backward compatibility.
If you're using `pnpm`, you need to install `embla-carousel` as a
**devDependency** when importing types from it like demonstrated above.
This is because even though `embla-carousel-svelte` has `embla-carousel` as a
dependency, `pnpm` makes nested dependencies inaccessible by design.
## [reference permalink](https://www.embla-carousel.com/api/events/\#reference) Reference
Below follows an exhaustive **list of all** Embla Carousel **events** together with information about how they work.
* * *
### [init permalink](https://www.embla-carousel.com/api/events/\#init) init
Once: `yes`
Runs when the carousel mounts for the first time. This only fires once which means that it won't fire when the carousel is re-initialized using the [reInit](https://www.embla-carousel.com/api/methods/#reinit) method.
* * *
### [reinit permalink](https://www.embla-carousel.com/api/events/\#reinit) reInit
Once: `no`
Runs when the [reInit](https://www.embla-carousel.com/api/methods/#reinit) method is called. When the window is resized, Embla Carousel automatically calls the [reInit](https://www.embla-carousel.com/api/methods/#reinit) method which will also fire this event.
* * *
### [destroy permalink](https://www.embla-carousel.com/api/events/\#destroy) destroy
Once: `yes`
Runs when the carousel has been destroyed using the [destroy](https://www.embla-carousel.com/api/methods/#destroy) method. This only fires once and will be the last event the carousel fires.
* * *
### [select permalink](https://www.embla-carousel.com/api/events/\#select) select
Once: `no`
Runs when the selected scroll snap changes. The select event is triggered by drag interactions or the [scrollNext](https://www.embla-carousel.com/api/methods/#scrollnext), [scrollPrev](https://www.embla-carousel.com/api/methods/#scrollPrev) or [scrollTo](https://www.embla-carousel.com/api/methods/#scrollto) methods.
* * *
### [scroll permalink](https://www.embla-carousel.com/api/events/\#scroll) scroll
Once: `no`
Runs when the carousel is scrolling. It might be a good idea to throttle this if you're doing expensive stuff in your callback function.
* * *
### [settle permalink](https://www.embla-carousel.com/api/events/\#settle) settle
Once: `no`
Runs when the carousel has settled after scroll has been triggered. Please note that this can take longer than you think when [dragFree](https://www.embla-carousel.com/api/options/#dragfree) is enabled or when using slow [transitions](https://www.embla-carousel.com/api/options/#duration).
* * *
### [resize permalink](https://www.embla-carousel.com/api/events/\#resize) resize
Once: `no`
Runs when the carousel container or the slide sizes change. It's using [ResizeObserver](https://developer.mozilla.org/en-US/docs/Web/API/ResizeObserver) under the hood.
* * *
### [slidesinview permalink](https://www.embla-carousel.com/api/events/\#slidesinview) slidesInView
Once: `no`
Runs when any slide has **entered** or **exited** the viewport. This event is intended to be used together with the [slidesInView](https://www.embla-carousel.com/api/methods/#slidesinview) and/or [slidesNotInView](https://www.embla-carousel.com/api/methods/#slidesnotinview) methods.
* * *
### [slideschanged permalink](https://www.embla-carousel.com/api/events/\#slideschanged) slidesChanged
Once: `no`
Runs when slides are added to, or removed from the carousel [container](https://www.embla-carousel.com/api/options/#container). It's using [MutationObserver](https://developer.mozilla.org/en-US/docs/Web/API/MutationObserver) under the hood.
* * *
### [slidefocus permalink](https://www.embla-carousel.com/api/events/\#slidefocus) slideFocus
Once: `no`
Runs when a slide receives focus. For example, when a focusable element like a button, link or input receives focus inside a slide.
* * *
### [pointerdown permalink](https://www.embla-carousel.com/api/events/\#pointerdown) pointerDown
Once: `no`
Runs when the user has a pointer down on the carousel. It's triggered by a `touchstart` or a `mousedown` event.
* * *
### [pointerup permalink](https://www.embla-carousel.com/api/events/\#pointerup) pointerUp
Once: `no`
Runs when the user has released the pointer from the carousel. It's triggered by a `touchend` or a `mouseup` event.
* * *
[Edit this page on GitHub](https://github.com/davidjerleke/embla-carousel/blob/master/packages/embla-carousel-docs/src/content/pages/api/events.mdx)
## Embla Carousel Options
[Skip to content](https://www.embla-carousel.com/api/options/#main-content)
# Options
Embla Carousel takes various **options** in order to customize how the carousel works.
* * *
## [usage permalink](https://www.embla-carousel.com/api/options/\#usage) Usage
You can provide **options** in **two different ways**: With the [constructor options](https://www.embla-carousel.com/api/options/#constructor-options) and/or [global options](https://www.embla-carousel.com/api/options/#global-options). If both are provided, they will be merged, and if any options are in conflict, the **constructor option** has precedence and will **override global options**.
### [constructor options permalink](https://www.embla-carousel.com/api/options/\#constructor-options) Constructor options
The constructor options is the default way of providing options to Embla Carousel. In the following example, the carousel [loop](https://www.embla-carousel.com/api/options/#loop) option is set to `true`:
VanillaVanillaReactReactVueVueSolidSolidSvelteSvelte
Copy code snippet to clipboardCopy
```prism-code js
import EmblaCarousel from 'embla-carousel'
const emblaNode = document.querySelector('.embla')const emblaApi = EmblaCarousel(emblaNode, { loop: true })
```
Copy code snippet to clipboardCopy
```prism-code jsx
import useEmblaCarousel from 'embla-carousel-react'
export function EmblaCarousel() { const [emblaRef] = useEmblaCarousel({ loop: true })
// ...}
```
Copy code snippet to clipboardCopy
```prism-code html
<script setup> import emblaCarouselVue from 'embla-carousel-vue'
const [emblaRef] = emblaCarouselVue({ loop: true })
// ...</script>
```
Copy code snippet to clipboardCopy
```prism-code jsx
import createEmblaCarousel from 'embla-carousel-solid'
export function EmblaCarousel() { const [emblaRef] = createEmblaCarousel(() => ({ loop: true }))
// ...}
```
Copy code snippet to clipboardCopy
```prism-code html
<script> import emblaCarouselSvelte from 'embla-carousel-svelte'
let options = { loop: true }</script>
<div class="embla" use:emblaCarouselSvelte="{{ options }}">...</div>
```
### [global options permalink](https://www.embla-carousel.com/api/options/\#global-options) Global options
Setting **global options** will be applied to **all carousels** which will override the Embla default options with your own. In the following example [loop](https://www.embla-carousel.com/api/options/#loop) is set to `true`:
VanillaVanillaReactReactVueVueSolidSolidSvelteSvelte
Copy code snippet to clipboardCopy
```prism-code js
import EmblaCarousel from 'embla-carousel'
EmblaCarousel.globalOptions = { loop: true }
const emblaNode = document.querySelector('.embla')const emblaApi = EmblaCarousel(emblaNode, { align: 'start' })
```
Copy code snippet to clipboardCopy
```prism-code jsx
import useEmblaCarousel from 'embla-carousel-react'
useEmblaCarousel.globalOptions = { loop: true }
export function EmblaCarousel() { const [emblaRef] = useEmblaCarousel({ align: 'start' })
// ...}
```
Copy code snippet to clipboardCopy
```prism-code html
<script setup> import emblaCarouselVue from 'embla-carousel-vue'
emblaCarouselVue.globalOptions = { loop: true }
const [emblaRef] = emblaCarouselVue({ align: 'start' })
// ...</script>
```
Copy code snippet to clipboardCopy
```prism-code jsx
import createEmblaCarousel from 'embla-carousel-solid'
createEmblaCarousel.globalOptions = { loop: true }
export function EmblaCarousel() { const [emblaRef] = createEmblaCarousel(() => ({ align: 'start' }))
// ...}
```
Copy code snippet to clipboardCopy
```prism-code html
<script> import emblaCarouselSvelte from 'embla-carousel-svelte'
emblaCarouselSvelte.globalOptions = { loop: true }
let options = { align: 'start' }</script>
<div class="embla" use:emblaCarouselSvelte="{{ options }}">...</div>
```
Make sure to assign global options **before** initializing any carousel and
**only assign it once**. Re-assigning global options might lead to confusing
code and unexpected behaviour.
### [changing options permalink](https://www.embla-carousel.com/api/options/\#changing-options) Changing options
It's possible to **change options** passed to the Embla Carousel constructor **after initialization** with the [reInit](https://www.embla-carousel.com/api/methods/#reinit) method.
In [React](https://www.embla-carousel.com/get-started/react/), [Vue](https://www.embla-carousel.com/get-started/vue/), [Solid](https://www.embla-carousel.com/get-started/solid/) and [Svelte](https://www.embla-carousel.com/get-started/svelte/) wrappers you can pass **reactive options** and the carousel will automatically reinitialize when they change. Here are some examples:
VanillaVanillaReactReactVueVueSolidSolidSvelteSvelte
Copy code snippet to clipboardCopy
```prism-code js
import EmblaCarousel from 'embla-carousel'
const emblaNode = document.querySelector('.embla')const emblaApi = EmblaCarousel(emblaNode, { loop: true })
emblaApi.reInit({ loop: false })
```
Copy code snippet to clipboardCopy
```prism-code jsx
import { useState, useCallback } from 'react'import useEmblaCarousel from 'embla-carousel-react'
export function EmblaCarousel() { const [options, setOptions] = useState({ loop: true }) const [emblaRef, emblaApi] = useEmblaCarousel(options)
const toggleLoop = useCallback(() => { setOptions((currentOptions) => ({ ...currentOptions, loop: !currentOptions.loop })) }, [])
// ...}
```
Copy code snippet to clipboardCopy
```prism-code html
<script setup> import emblaCarouselVue from 'embla-carousel-vue'
const options = ref({ loop: true }) const [emblaRef, emblaApi] = emblaCarouselVue(options)
function toggleLoop() { options.value = { ...options.value, loop: !options.value.loop } }
// ...</script>
```
Copy code snippet to clipboardCopy
```prism-code jsx
import { createSignal } from 'solid-js'import createEmblaCarousel from 'embla-carousel-solid'
export function EmblaCarousel() { const [options, setOptions] = createSignal({ loop: true }) const [emblaRef] = createEmblaCarousel(() => options())
function toggleLoop() { setOptions((currentOptions) => ({ ...currentOptions, loop: !currentOptions.loop })) }
// ...}
```
Copy code snippet to clipboardCopy
```prism-code html
<script> import emblaCarouselSvelte from 'embla-carousel-svelte'
let options = { loop: true }
function toggleLoop() { options = { ...options, loop: !options.loop } }</script>
<div class="embla" use:emblaCarouselSvelte="{{ options }}">...</div>
```
### [typescript permalink](https://www.embla-carousel.com/api/options/\#typescript) TypeScript
The `EmblaOptionsType` is obtained directly from the **core package** `embla-carousel` and used like so:
VanillaVanillaReactReactVueVueSolidSolidSvelteSvelte
Copy code snippet to clipboardCopy
```prism-code tsx
import EmblaCarousel, { EmblaOptionsType } from 'embla-carousel'
const emblaNode = document.querySelector('.embla')const options: EmblaOptionsType = { loop: true }const emblaApi = EmblaCarousel(emblaNode, options)
```
Copy code snippet to clipboardCopy
```prism-code tsx
import React from 'react'import { EmblaOptionsType } from 'embla-carousel'import useEmblaCarousel from 'embla-carousel-react'
type PropType = { options?: EmblaOptionsType}
export function EmblaCarousel(props: PropType) { const [emblaRef, emblaApi] = useEmblaCarousel(props.options)
// ...}
```
If you're using `pnpm`, you need to install `embla-carousel` as a
**devDependency** when importing types from it like demonstrated above.
This is because even though `embla-carousel-react` has `embla-carousel` as a
dependency, `pnpm` makes nested dependencies inaccessible by design.
Copy code snippet to clipboardCopy
```prism-code html
<script setup lang="ts"> import { EmblaOptionsType } from 'embla-carousel' import emblaCarouselVue from 'embla-carousel-vue'
const options: EmblaOptionsType = { loop: true } const [emblaRef] = emblaCarouselVue(options)
// ...</script>
```
If you're using `pnpm`, you need to install `embla-carousel` as a
**devDependency** when importing types from it like demonstrated above.
This is because even though `embla-carousel-vue` has `embla-carousel` as a
dependency, `pnpm` makes nested dependencies inaccessible by design.
Copy code snippet to clipboardCopy
```prism-code tsx
import { EmblaOptionsType } from 'embla-carousel'import createEmblaCarousel from 'embla-carousel-solid'
type PropType = { options?: EmblaOptionsType}
export function EmblaCarousel(props) { const [emblaRef] = createEmblaCarousel(props.options)
// ...}
```
If you're using `pnpm`, you need to install `embla-carousel` as a
**devDependency** when importing types from it like demonstrated above.
This is because even though `embla-carousel-solid` has `embla-carousel` as a
dependency, `pnpm` makes nested dependencies inaccessible by design.
Copy code snippet to clipboardCopy
```prism-code html
<script> import { EmblaOptionsType } from 'embla-carousel' import emblaCarouselSvelte from 'embla-carousel-svelte'
let options: EmblaOptionsType = { loop: true }</script>
<div class="embla" use:emblaCarouselSvelte="{{ options }}">...</div>
```
If you're using `pnpm`, you need to install `embla-carousel` as a
**devDependency** when importing types from it like demonstrated above.
This is because even though `embla-carousel-svelte` has `embla-carousel` as a
dependency, `pnpm` makes nested dependencies inaccessible by design.
## [reference permalink](https://www.embla-carousel.com/api/options/\#reference) Reference
Below follows an exhaustive **list of all** Embla Carousel **options** and their default values.
* * *
### [active permalink](https://www.embla-carousel.com/api/options/\#active) active
Type: `boolean`
Default: `true`
Setting this to `false` will not activate or deactivate the carousel. Useful when used together with the [breakpoints](https://www.embla-carousel.com/api/options/#breakpoints) option to toggle the carousel active/inactive depending on media queries.
* * *
### [align permalink](https://www.embla-carousel.com/api/options/\#align) align
Type: `string | (viewSize: number, snapSize: number, index: number) => number`
Default: `center`
Align the slides relative to the carousel viewport. Use one of the predefined alignments `start`, `center` or `end`. Alternatively, provide your own callback to fully customize the alignment.
* * *
### [axis permalink](https://www.embla-carousel.com/api/options/\#axis) axis
Type: `string`
Default: `x`
Choose scroll axis between `x` and `y`. Remember to stack your slides horizontally or vertically using CSS to match this option.
* * *
### [breakpoints permalink](https://www.embla-carousel.com/api/options/\#breakpoints) breakpoints
Type: `EmblaOptionsType`
Default: `{}`
An object with options that will be applied for a given breakpoint by overriding the options at the root level. Example: `'(min-width: 768px)': { loop: false }`.
**Note:** If multiple queries match, they will be merged. And when breakpoint
options clash, the last one in the list has precedence.
* * *
### [container permalink](https://www.embla-carousel.com/api/options/\#container) container
Type: `string | HTMLElement | null`
Default: `null`
Enables choosing a custom container element which holds the slides. By **default**, Embla will choose the **first direct child element** of the **root element**. Provide either a valid `CSS selector string` or a `HTML element`.
* * *
### [containscroll permalink](https://www.embla-carousel.com/api/options/\#containscroll) containScroll
Type: `false` \| `string`
Default: `'trimSnaps'`
Clear leading and trailing empty space that causes excessive scrolling. Use `trimSnaps` to only use snap points that trigger scrolling or `keepSnaps` to keep them.
**Note:** When this is active, it will **override alignments** applied by the
[align](https://www.embla-carousel.com/api/options/#align) option for enough slides at the **start** and the **end** of
the carousel, in order to **cover** the **leading** and **trailing space**.
* * *
### [direction permalink](https://www.embla-carousel.com/api/options/\#direction) direction
Type: `string`
Default: `ltr`
Choose content direction between `ltr` and `rtl`.
**Note:** When using `rtl`, the content direction also has to be set to RTL,
either by using the [HTML dir\\
attribute](https://developer.mozilla.org/en-US/docs/Web/HTML/Global_attributes/dir)
or the [CSS\\
direction](https://developer.mozilla.org/en-US/docs/Web/CSS/direction)
property.
* * *
### [dragfree permalink](https://www.embla-carousel.com/api/options/\#dragfree) dragFree
Type: `boolean`
Default: `false`
Enables momentum scrolling. The duration of the continued scrolling is proportional to how vigorous the drag gesture is.
* * *
### [dragthreshold permalink](https://www.embla-carousel.com/api/options/\#dragthreshold) dragThreshold
Type: `number`
Default: `10`
Drag threshold in pixels. This only affects **when** clicks are fired and not. In contrast to other carousel libraries, it will **not affect when dragging** of the carousel **starts**.
**Note:** Browsers handle touch events differently than mouse events. Browsers
won't fire the click event when a touch event includes an accidental slight
swipe gesture. This is why this threshold only works for mouse events.
* * *
### [duration permalink](https://www.embla-carousel.com/api/options/\#duration) duration
Type: `number`
Default: `25`
Set scroll duration when triggered by any of the API methods. Higher numbers enables slower scrolling. Drag interactions are not affected because duration is then determined by the drag force.
**Note:** Duration is **not** in milliseconds because Embla uses an attraction
physics simulation when scrolling instead of easings. Only values between
`20`- `60` are recommended.
* * *
### [inviewthreshold permalink](https://www.embla-carousel.com/api/options/\#inviewthreshold) inViewThreshold
Type: `IntersectionObserverInit.threshold`
Default: `0`
This is the Intersection Observer [threshold](https://developer.mozilla.org/en-US/docs/Web/API/Intersection_Observer_API#creating_an_intersection_observer) option that will be applied to all slides.
* * *
### [loop permalink](https://www.embla-carousel.com/api/options/\#loop) loop
Type: `boolean`
Default: `false`
Enables **infinite looping**. Embla will apply `translateX` or `translateY` to the slides that need to change position in order to create the loop effect.
Embla automatically falls back to `false` if slide content isn't enough to
create the loop effect without visible glitches.
* * *
### [skipsnaps permalink](https://www.embla-carousel.com/api/options/\#skipsnaps) skipSnaps
Type: `boolean`
Default: `false`
Allow the carousel to skip scroll snaps if it's dragged vigorously. Note that this option will be ignored if the [dragFree](https://www.embla-carousel.com/api/options/#dragfree) option is set to `true`.
* * *
### [slides permalink](https://www.embla-carousel.com/api/options/\#slides) slides
Type: `string | HTMLElement[] | NodeListOf<HTMLElement> | null`
Default: `null`
Enables using custom slide elements. By **default**, Embla will choose **all direct child elements** of its [container](https://www.embla-carousel.com/api/options/#container). Provide either a valid `CSS selector string` or a `nodeList/array` containing `HTML elements`.
**Note:** Even though it's possible to provide custom slide elements, they
still have to be **direct descendants** of the carousel container.
**Warning:** If you place elements inside the carousel container that aren't
slides, they either shouldn't have any size, or should be detached from the
document flow with `position: absolute` or similar.
* * *
### [slidestoscroll permalink](https://www.embla-carousel.com/api/options/\#slidestoscroll) slidesToScroll
Type: `string | number`
Default: `1`
Group slides together. Drag interactions, dot navigation, and previous/next buttons are mapped to group slides into the given number, which has to be an integer. Set it to `auto` if you want Embla to group slides automatically.
* * *
### [startindex permalink](https://www.embla-carousel.com/api/options/\#startindex) startIndex
Type: `number`
Default: `0`
Set the initial scroll snap to the given number. First snap index starts at `0`. Please note that this is not necessarily equal to the number of slides when used together with the [slidesToScroll](https://www.embla-carousel.com/api/options/#slidestoscroll) option.
* * *
### [watchdrag permalink](https://www.embla-carousel.com/api/options/\#watchdrag) watchDrag
Type: `boolean | (emblaApi: EmblaCarouselType, event: MouseEvent | TouchEvent) => boolean | void`
Default: `true`
Enables for scrolling the carousel with mouse and touch interactions. Set this to `false` to disable drag events or pass a custom callback to add your own drag logic.
**Note:** When passing a custom callback it will run **before** the default
Embla drag behaviour. Return `true` in your callback if you want Embla to run
its default drag behaviour after your callback, or return `false` if you want
to skip it.
* * *
### [watchfocus permalink](https://www.embla-carousel.com/api/options/\#watchfocus) watchFocus
Type: `boolean | (emblaApi: EmblaCarouselType, event: FocusEvent) => boolean | void`
Default: `true`
Embla automatically watches the [slides](https://www.embla-carousel.com/api/options/api/options/#slides) for focus events. The default callback fires the [slideFocus](https://www.embla-carousel.com/api/events/#slidefocus/) event and [scrolls](https://www.embla-carousel.com/api/methods/#scrollto/) to the focused element. Set this to `false` to disable this behaviour or pass a custom callback to add your own focus logic.
**Note:** When passing a custom callback it will run **before** the default
Embla focus behaviour. Return `true` in your callback if you want Embla to run
its default focus behaviour after your callback, or return `false` if you want
to skip it.
* * *
### [watchresize permalink](https://www.embla-carousel.com/api/options/\#watchresize) watchResize
Type: `boolean | (emblaApi: EmblaCarouselType, entries: ResizeObserverEntry[]) => boolean | void`
Default: `true`
Embla automatically watches the [container](https://www.embla-carousel.com/api/methods/#containernode/) and [slides](https://www.embla-carousel.com/api/methods/#slidenodes/) for size changes and runs [reInit](https://www.embla-carousel.com/api/methods/#reinit/) when any size has changed. Set this to `false` to disable this behaviour or pass a custom callback to add your own resize logic.
**Note:** When passing a custom callback it will run **before** the default
Embla resize behaviour. Return `true` in your callback if you want Embla to
run its default resize behaviour after your callback, or return `false` if you
want to skip it.
* * *
### [watchslides permalink](https://www.embla-carousel.com/api/options/\#watchslides) watchSlides
Type: `boolean | (emblaApi: EmblaCarouselType, mutations: MutationRecord[]) => boolean | void`
Default: `true`
Embla automatically watches the [container](https://www.embla-carousel.com/api/methods/#containernode/) for **added** and/or **removed** slides and runs [reInit](https://www.embla-carousel.com/api/methods/#reinit/) if needed. Set this to `false` to disable this behaviour or pass a custom callback to add your own slides changed logic.
**Note:** When passing a custom callback it will run **before** the default
Embla mutation behaviour. Return `true` in your callback if you want Embla to
run its default mutation behaviour after your callback, or return `false` if
you want to skip it.
* * *
[Edit this page on GitHub](https://github.com/davidjerleke/embla-carousel/blob/master/packages/embla-carousel-docs/src/content/pages/api/options.mdx)
## Embla Carousel Fade
[Skip to content](https://www.embla-carousel.com/plugins/fade/#main-content)
# Fade
[View plugin on GitHub](https://github.com/davidjerleke/embla-carousel/tree/master/packages/embla-carousel-fade)
This plugin is used to replace the Embla Carousel scroll functionality with **fade transitions**.
* * *
## [example permalink](https://www.embla-carousel.com/plugins/fade/\#example) Example
Edit Code
## [installation permalink](https://www.embla-carousel.com/plugins/fade/\#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-fade/embla-carousel-fade.umd.js"></script>
```
Copy code snippet to clipboardCopy
```prism-code shell
npm install embla-carousel-fade --save
```
Copy code snippet to clipboardCopy
```prism-code shell
yarn add embla-carousel-fade
```
When the Fade plugin is enabled, the
[inViewThreshold](https://www.embla-carousel.com/api/options/#inviewthreshold) option no longer has any
effect. This is because the Fade plugin stacks any slides with an **opacity**
**higher** than `0` on top of each other, eliminating the concept of scrolling
and gradual appearance of slides.
If your slides are less than 100% of the viewport width, it's recommended to set these options when using the Fade plugin to avoid confusing UX:
Copy code snippet to clipboardCopy
```prism-code ts
const options = { align: 'center', containScroll: false}
```
However, `align: center` is default so you can omit setting the align option and achieve the same thing like so:
Copy code snippet to clipboardCopy
```prism-code ts
const options = { containScroll: false}
```
[Edit this page on GitHub](https://github.com/davidjerleke/embla-carousel/blob/master/packages/embla-carousel-docs/src/content/pages/plugins/fade.mdx)
## Embla Carousel Guide
[Skip to content](https://www.embla-carousel.com/get-started/#main-content)
# Get Started
Embla Carousel is a **library agnostic**, **dependency free** and **lightweight** carousel library. It aims to solve the hardest technical challenges with building carousels, and the rest is up to the user utilizing its highly extensible [API](https://www.embla-carousel.com/api/) and [plugins](https://www.embla-carousel.com/plugins/). Embla Carousel works in all modern browsers.
* * *
## [choose installation type permalink](https://www.embla-carousel.com/get-started/\#choose-installation-type) Choose installation type
- [**Module** \\
\\
Learn how to setup Embla Carousel using vanilla JavaScript.\\
\\
Read more](https://www.embla-carousel.com/get-started/module/)
- [**React** \\
\\
Learn how to setup Embla Carousel using React.\\
\\
Read more](https://www.embla-carousel.com/get-started/react/)
- [**Vue** \\
\\
Learn how to setup Embla Carousel using Vue.\\
\\
Read more](https://www.embla-carousel.com/get-started/vue/)
- [**Svelte** \\
\\
Learn how to setup Embla Carousel using Svelte.\\
\\
Read more](https://www.embla-carousel.com/get-started/svelte/)
- [**Solid** \\
\\
Learn how to setup Embla Carousel using Solid.\\
\\
Read more](https://www.embla-carousel.com/get-started/solid/)
- [**CDN** \\
\\
Learn how to setup Embla Carousel using a CDN.\\
\\
Read more](https://www.embla-carousel.com/get-started/cdn/)
[Edit this page on GitHub](https://github.com/davidjerleke/embla-carousel/blob/master/packages/embla-carousel-docs/src/content/pages/get-started/index.mdx)
## Embla Carousel for React
[Skip to content](https://www.embla-carousel.com/get-started/react/#main-content)
# React
Embla Carousel provides a wrapper for [React](https://react.dev/) that ensures seamless integration of the carousel into your React project and automatic cleanup on component unmount.