Janady13/llms-txt-hub / packages/content/data/unofficial/embla-carousel/llms-full.txt

1# https://www.embla-carousel.com/ llms-full.txt 2 3## Embla Carousel 4[Skip to content](https://www.embla-carousel.com/#main-content) 5 6 7 8# EmblaCarousel 9 10## A lightweight carousel library with fluid motion and great swipe precision 11 12- [Examples](https://www.embla-carousel.com/examples/predefined/) 13- [Generator](https://www.embla-carousel.com/examples/generator/) 14 15- [**Highly Extensible** \\ 16\\ 17An API designed with flexibility and extensibility in mind.\\ 18\\ 19Read more](https://www.embla-carousel.com/api/) 20- [**Plugin System** \\ 21\\ 22Add functionality and customize your carousels as you go.\\ 23\\ 24Read more](https://www.embla-carousel.com/plugins/) 25- [**Carousel generator** \\ 26\\ 27Create your own customized carousel in no time.\\ 28\\ 29Read more](https://www.embla-carousel.com/examples/generator/) 30 31## Embla Carousel Plugins 32[Skip to content](https://www.embla-carousel.com/plugins/#main-content) 33 34# Plugins 35 36Here is a list of available Embla Carousel plugins that will **extend your carousels** with additional features, that goes beyond the built-in Embla Carousel core features. 37 38* * * 39 40## [choose a plugin permalink](https://www.embla-carousel.com/plugins/\#choose-a-plugin) Choose a plugin 41 42- [**Autoplay** \\ 43\\ 44Learn how to use the Autoplay plugin for Embla Carousel\\ 45\\ 46Read more](https://www.embla-carousel.com/plugins/autoplay/) 47- [**Auto Scroll** \\ 48\\ 49Learn how to use the Auto Scroll plugin for Embla Carousel\\ 50\\ 51Read more](https://www.embla-carousel.com/plugins/auto-scroll/) 52- [**Auto Height** \\ 53\\ 54Learn how to use the Auto Height plugin for Embla Carousel\\ 55\\ 56Read more](https://www.embla-carousel.com/plugins/auto-height/) 57- [**Class Names** \\ 58\\ 59Learn how to use the Class Names plugin for Embla Carousel\\ 60\\ 61Read more](https://www.embla-carousel.com/plugins/class-names/) 62- [**Fade** \\ 63\\ 64Learn how to use the Fade plugin for Embla Carousel\\ 65\\ 66Read more](https://www.embla-carousel.com/plugins/fade/) 67- [**Wheel Gestures** \\ 68\\ 69Learn how to add this Wheel Gesture plugin to Embla Carousel\\ 70\\ 71Read more](https://www.embla-carousel.com/plugins/wheel-gestures/) 72 73[Edit this page on GitHub](https://github.com/davidjerleke/embla-carousel/blob/master/packages/embla-carousel-docs/src/content/pages/plugins/index.mdx) 74 75## Embla Carousel Guides 76[Skip to content](https://www.embla-carousel.com/guides/#main-content) 77 78# Practical Guides 79 80Here is a list of practical step-by-step guides to help you achieve a specific goal. These guides demonstrate how to **customize your carousels** for different use cases and teach you more about how Embla Carousel works. 81 82* * * 83 84## [pick a guide permalink](https://www.embla-carousel.com/guides/\#pick-a-guide) Pick a guide 85 86- [**Slide Container** \\ 87\\ 88This guide demonstrates how to setup the Embla Carousel slide container correctly.\\ 89\\ 90Read more](https://www.embla-carousel.com/guides/slide-container/) 91- [**Slide Sizes** \\ 92\\ 93This guide demonstrates how Embla Carousel handles slide sizes and how to customize them.\\ 94\\ 95Read more](https://www.embla-carousel.com/guides/slide-sizes/) 96- [**Slide Gaps** \\ 97\\ 98This guide demonstrates how Embla Carousel handles slide gaps and how to customize them.\\ 99\\ 100Read more](https://www.embla-carousel.com/guides/slide-gaps/) 101- [**Breakpoints** \\ 102\\ 103This guide demonstrates how to customize Embla Carousel based on different breakpoints.\\ 104\\ 105Read more](https://www.embla-carousel.com/guides/breakpoints/) 106- [**Prev & Next Buttons** \\ 107\\ 108This guide demonstrates how to setup previous and next buttons using the Embla Carousel API.\\ 109\\ 110Read more](https://www.embla-carousel.com/guides/previous-and-next-buttons/) 111 112[Edit this page on GitHub](https://github.com/davidjerleke/embla-carousel/blob/master/packages/embla-carousel-docs/src/content/pages/guides/index.mdx) 113 114## Embla Carousel API 115[Skip to content](https://www.embla-carousel.com/api/#main-content) 116 117# API 118 119A lightweight carousel shouldn't be limited to just its core features. That's why the Embla Carousel API is **designed** with **extensibility in mind**, and it exposes a **rich API** that can **easily be extended** to cover most of the use cases for carousels. 120 121* * * 122 123## [explore the api permalink](https://www.embla-carousel.com/api/\#explore-the-api) Explore the API 124 125- [**Options** \\ 126\\ 127Discover how to customize Embla Carousel with its available options.\\ 128\\ 129Read more](https://www.embla-carousel.com/api/options/) 130- [**Methods** \\ 131\\ 132Explore Embla Carousel methods useful for extending the carousel beyond its native functionality.\\ 133\\ 134Read more](https://www.embla-carousel.com/api/methods/) 135- [**Events** \\ 136\\ 137Learn how to listen to Embla Carousel events and how to make use of them.\\ 138\\ 139Read more](https://www.embla-carousel.com/api/events/) 140- [**Plugins** \\ 141\\ 142Learn how to add plugins to Embla Carousel and extend it.\\ 143\\ 144Read more](https://www.embla-carousel.com/api/plugins/) 145 146[Edit this page on GitHub](https://github.com/davidjerleke/embla-carousel/blob/master/packages/embla-carousel-docs/src/content/pages/api/index.mdx) 147 148## Embla Carousel Examples 149[Skip to content](https://www.embla-carousel.com/examples/#main-content) 150 151# Example Setups 152 153Get started instantly with Embla Carousel by finding an example setup that suits your needs. All examples are generated using the [CodeSandbox](https://codesandbox.io/) API. 154 155* * * 156 157## [choose type of examples permalink](https://www.embla-carousel.com/examples/\#choose-type-of-examples) Choose type of examples 158 159- [**Predefined** \\ 160\\ 161Browse predefined Embla Carousel setups that demonstrates its features.\\ 162\\ 163Read more](https://www.embla-carousel.com/examples/predefined/) 164- [**Generator** \\ 165\\ 166Generate and customize your own Embla Carousel setup.\\ 167\\ 168Read more](https://www.embla-carousel.com/examples/generator/) 169 170[Edit this page on GitHub](https://github.com/davidjerleke/embla-carousel/blob/master/packages/embla-carousel-docs/src/content/pages/examples/index.mdx) 171 172## Embla Autoplay Plugin 173[Skip to content](https://www.embla-carousel.com/plugins/autoplay/#main-content) 174 175# Autoplay 176 177[View plugin on GitHub](https://github.com/davidjerleke/embla-carousel/tree/master/packages/embla-carousel-autoplay) 178 179This plugin is used to extend Embla Carousel with **autoplay** functionality. 180 181* * * 182 183## [example permalink](https://www.embla-carousel.com/plugins/autoplay/\#example) Example 184 185Edit Code 186 1871 188 1892 190 1913 192 1934 194 1955 196 197Start 198 199## [installation permalink](https://www.embla-carousel.com/plugins/autoplay/\#installation) Installation 200 201Start by installing the **npm package** and save it to your dependencies: 202 203CDNCDNnpmnpmyarnyarn 204 205Copy code snippet to clipboardCopy 206 207```prism-code html 208<script src="https://unpkg.com/embla-carousel-autoplay/embla-carousel-autoplay.umd.js"></script> 209``` 210 211Copy code snippet to clipboardCopy 212 213```prism-code shell 214npm install embla-carousel-autoplay --save 215``` 216 217Copy code snippet to clipboardCopy 218 219```prism-code shell 220yarn add embla-carousel-autoplay 221``` 222 223## [options permalink](https://www.embla-carousel.com/plugins/autoplay/\#options) Options 224 225Below follows an exhaustive **list of all** `Autoplay` **options** and their default values. 226 227* * * 228 229### [delay permalink](https://www.embla-carousel.com/plugins/autoplay/\#delay) delay 230 231Type: `number | (scrollSnapList: number[], emblaApi: EmblaCarouselType) => number[]` 232 233Default: `4000` 234 235Choose a delay between transitions in milliseconds. If you pass a number, the same delay will be **applied to all transitions**. If you pass a function, you can return an array of numbers based on the `scrollSnapList` parameter and set **different delays for each scroll snap**. 236 237* * * 238 239### [jump permalink](https://www.embla-carousel.com/plugins/autoplay/\#jump) jump 240 241Type: `boolean` 242 243Default: `false` 244 245When set to true `true`, autoplay will do instant slide transitions when advancing. 246 247* * * 248 249### [playoninit permalink](https://www.embla-carousel.com/plugins/autoplay/\#playoninit) playOnInit 250 251Type: `boolean` 252 253Default: `true` 254 255If set to `false`, you'll have to start autoplay manually by calling the [play](https://www.embla-carousel.com/plugins/autoplay/#play) method. It's useful to set this to `false` when you want full control over the timing. For example, when building an autoplay progress bar. 256 257* * * 258 259### [stoponinteraction permalink](https://www.embla-carousel.com/plugins/autoplay/\#stoponinteraction) stopOnInteraction 260 261Type: `boolean` 262 263Default: `true` 264 265If set to `false`, autoplay will not be disabled after drag interactions, and it will restart every time after an interaction. 266 267* * * 268 269### [stoponmouseenter permalink](https://www.embla-carousel.com/plugins/autoplay/\#stoponmouseenter) stopOnMouseEnter 270 271Type: `boolean` 272 273Default: `false` 274 275When enabled, autoplay will stop when a mouse pointer enters the Embla Carousel container. If [stopOnInteraction](https://www.embla-carousel.com/plugins/autoplay/#stoponinteraction) is also `false`, autoplay will resume when the mouse leaves the carousel container. 276 277* * * 278 279### [stoponfocusin permalink](https://www.embla-carousel.com/plugins/autoplay/\#stoponfocusin) stopOnFocusIn 280 281Type: `boolean` 282 283Default: `true` 284 285When enabled, autoplay will stop when a focusable element inside the carousel recieves focus. If [stopOnInteraction](https://www.embla-carousel.com/plugins/autoplay/#stoponinteraction) is `false`, autoplay will resume when the user leaves focus. 286 287* * * 288 289### [stoponlastsnap permalink](https://www.embla-carousel.com/plugins/autoplay/\#stoponlastsnap) stopOnLastSnap 290 291Type: `boolean` 292 293Default: `false` 294 295If this parameter is enabled, autoplay will stop when it reaches last slide. 296 297* * * 298 299### [rootnode permalink](https://www.embla-carousel.com/plugins/autoplay/\#rootnode) rootNode 300 301Type: `(emblaRoot: HTMLElement) => HTMLElement | null` 302 303Default: `null` 304 305The **node** that should **respond** to user **interactions** like [stopOnMouseEnter](https://www.embla-carousel.com/plugins/autoplay/#stoponmouseenter) and [stopOnInteraction](https://www.embla-carousel.com/plugins/autoplay/#stoponinteraction). If this is omitted, the node that wraps the Embla Carousel will be used as default. 306 307* * * 308 309## [methods permalink](https://www.embla-carousel.com/plugins/autoplay/\#methods) Methods 310 311Below follows an exhaustive **list of all** `Autoplay` **methods** with their respective parameters and return values. 312 313* * * 314 315### [play permalink](https://www.embla-carousel.com/plugins/autoplay/\#play) play 316 317Parameters: `jump?: boolean` 318 319Returns: `void` 320 321Start autoplay. Set the **jump** parameter to `true` when you want autoplay to do instant slide transitions when advancing. Please note that providing a value to this method vill override the [jump](https://www.embla-carousel.com/plugins/autoplay/#jump) option. 322 323* * * 324 325### [stop permalink](https://www.embla-carousel.com/plugins/autoplay/\#stop) stop 326 327Parameters: `none` 328 329Returns: `void` 330 331Stop autoplay. 332 333* * * 334 335### [reset permalink](https://www.embla-carousel.com/plugins/autoplay/\#reset) reset 336 337Parameters: `none` 338 339Returns: `void` 340 341Resets the timer and starts over. This will only take effect if autoplay is already active. If autoplay is stopped, this method won't do anything. 342 343* * * 344 345### [isplaying permalink](https://www.embla-carousel.com/plugins/autoplay/\#isplaying) isPlaying 346 347Parameters: `none` 348 349Returns: `boolean` 350 351Returns a boolean whether autoplay is playing or not. 352 353* * * 354 355### [timeuntilnext permalink](https://www.embla-carousel.com/plugins/autoplay/\#timeuntilnext) timeUntilNext 356 357Parameters: `none` 358 359Returns: `number | null` 360 361If the autoplay timer is active, this will return a number representing the time left until the autoplay scrolls to the next snap. If the timer is not active, this will return `null`. Use this together with the [autoplay:timerset](https://www.embla-carousel.com/plugins/autoplay/#autoplaytimerset) and [autoplay:timerstopped](https://www.embla-carousel.com/plugins/autoplay/#autoplaytimerstopped) events to create a custom progress bar for autoplay. 362 363If you're using a reactive wrapper for Embla Carousel like 364`embla-carousel-react` and building an autoplay progress bar, you probably 365want to set [playOnInit](https://www.embla-carousel.com/plugins/autoplay/#playoninit) to `false` and call 366the `play` method manually to fully control the timing. 367 368This is because the autoplay plugin will start playing as soon as it's 369initialized, which might not be what you want in these cases. 370 371* * * 372 373## [events permalink](https://www.embla-carousel.com/plugins/autoplay/\#events) Events 374 375Below follows an exhaustive **list of all** `Autoplay` **events** together with information about how they work. 376 377* * * 378 379### [autoplayplay permalink](https://www.embla-carousel.com/plugins/autoplay/\#autoplayplay) autoplay:play 380 381Once: `no` 382 383Fires when autoplay starts playing. When this event is triggered, the **autoplay timer is active**, and autoplay will select the next scroll snap and start scrolling to it when the [delay](https://www.embla-carousel.com/plugins/autoplay/#delay) has passed. 384 385* * * 386 387### [autoplaystop permalink](https://www.embla-carousel.com/plugins/autoplay/\#autoplaystop) autoplay:stop 388 389Once: `no` 390 391Fires when autoplay stops playing. When this event is triggered, the **autoplay timer is not active anymore**. 392 393* * * 394 395### [autoplayselect permalink](https://www.embla-carousel.com/plugins/autoplay/\#autoplayselect) autoplay:select 396 397Once: `no` 398 399Fires directly after autoplay selects the next scroll snap and starts scrolling to it. 400 401* * * 402 403### [autoplaytimerset permalink](https://www.embla-carousel.com/plugins/autoplay/\#autoplaytimerset) autoplay:timerset 404 405Once: `no` 406 407Fires when the autoplay timer is set. As soon as the timer is set, countdown to autoplay to the next scroll snap will begin. 408 409* * * 410 411### [autoplaytimerstopped permalink](https://www.embla-carousel.com/plugins/autoplay/\#autoplaytimerstopped) autoplay:timerstopped 412 413Once: `no` 414 415Fires when the autoplay timer is stopped. 416 417* * * 418 419[Edit this page on GitHub](https://github.com/davidjerleke/embla-carousel/blob/master/packages/embla-carousel-docs/src/content/pages/plugins/autoplay.mdx) 420 421## Embla Carousel Methods 422[Skip to content](https://www.embla-carousel.com/api/methods/#main-content) 423 424# Methods 425 426Embla Carousel exposes a set of **useful methods** which makes it very **extensible**. 427 428* * * 429 430## [usage permalink](https://www.embla-carousel.com/api/methods/\#usage) Usage 431 432You need an **initialized carousel** in order to **make use of methods**. They can be accessed during the lifecycle of a carousel and won't do anything after a carousel instance has been destroyed with the [destroy](https://www.embla-carousel.com/api/methods/#destroy) method. 433 434### [calling methods permalink](https://www.embla-carousel.com/api/methods/\#calling-methods) Calling methods 435 436In the following example, the [slideNodes](https://www.embla-carousel.com/api/methods/#slidenodes) method is called and logged to the console as soon as the carousel has been initialized: 437 438VanillaVanillaReactReactVueVueSolidSolidSvelteSvelte 439 440Copy code snippet to clipboardCopy 441 442```prism-code js 443import EmblaCarousel from 'embla-carousel' 444const emblaNode = document.querySelector('.embla')const emblaApi = EmblaCarousel(emblaNode) 445console.log(emblaApi.slideNodes()) 446``` 447 448Copy code snippet to clipboardCopy 449 450```prism-code jsx 451import { useEffect } from 'react'import useEmblaCarousel from 'embla-carousel-react' 452export function EmblaCarousel() { const [emblaRef, emblaApi] = useEmblaCarousel() 453 useEffect(() => { if (emblaApi) console.log(emblaApi.slideNodes()) }, [emblaApi]) 454 // ...} 455``` 456 457Copy code snippet to clipboardCopy 458 459```prism-code html 460<script setup> import { onMounted } from 'vue' import emblaCarouselVue from 'embla-carousel-vue' 461 const [emblaRef, emblaApi] = emblaCarouselVue() 462 onMounted(() => { if (emblaApi.value) console.log(emblaApi.value.slideNodes()) }) 463 // ...</script> 464``` 465 466Copy code snippet to clipboardCopy 467 468```prism-code jsx 469import { onMount } from 'solid-js'import createEmblaCarousel from 'embla-carousel-solid' 470export function EmblaCarousel() { const [emblaRef, emblaApi] = createEmblaCarousel() 471 onMount(() => { const api = emblaApi() if (api) console.log(api.slideNodes()) }) 472 // ...} 473``` 474 475Copy code snippet to clipboardCopy 476 477```prism-code html 478<script> import emblaCarouselSvelte from 'embla-carousel-svelte' 479 let emblaApi 480 function onInit(event) { emblaApi = event.detail console.log(emblaApi.slideNodes()) }</script> 481<div class="embla" use:emblaCarouselSvelte onemblaInit="{onInit}">...</div> 482``` 483 484**Note:** Starting with Svelte 5, the `on:` event handlers have been deprecated. However, `on:emblaInit` will remain for backward compatibility. 485 486### [typescript permalink](https://www.embla-carousel.com/api/methods/\#typescript) TypeScript 487 488The `EmblaCarouselType` is obtained directly from the **core package** `embla-carousel` and used like so: 489 490VanillaVanillaReactReactVueVueSolidSolidSvelteSvelte 491 492Copy code snippet to clipboardCopy 493 494```prism-code tsx 495import EmblaCarousel, { EmblaCarouselType } from 'embla-carousel' 496const emblaNode = document.querySelector('.embla')const emblaApi = EmblaCarousel(emblaNode) 497function logSlidesInView(emblaApi: EmblaCarouselType): void { console.log(emblaApi.slidesInView())} 498emblaApi.on('slidesInView', logSlidesInView) 499``` 500 501Copy code snippet to clipboardCopy 502 503```prism-code tsx 504import React, { useCallback } from 'react'import { EmblaCarouselType } from 'embla-carousel'import useEmblaCarousel from 'embla-carousel-react' 505export function EmblaCarousel() { const [emblaRef, emblaApi] = useEmblaCarousel() 506 const logSlidesInView = useCallback((emblaApi: EmblaCarouselType) => { console.log(emblaApi.slidesInView()) }, []) 507 useEffect(() => { if (emblaApi) emblaApi.on('slidesInView', logSlidesInView) }, [emblaApi, logSlidesInView]) 508 // ...} 509``` 510 511If you're using `pnpm`, you need to install `embla-carousel` as a 512**devDependency** when importing types from it like demonstrated above. 513 514This is because even though `embla-carousel-react` has `embla-carousel` as a 515dependency, `pnpm` makes nested dependencies inaccessible by design. 516 517Copy code snippet to clipboardCopy 518 519```prism-code html 520<script setup lang="ts"> import { onMounted } from 'vue' import { EmblaCarouselType } from 'embla-carousel' import emblaCarouselVue from 'embla-carousel-vue' 521 const [emblaRef] = emblaCarouselVue() 522 function logSlidesInView(emblaApi: EmblaCarouselType): void { console.log(emblaApi.slidesInView()) } 523 onMounted(() => { if (emblaApi.value) emblaApi.value.on('slidesInView', logSlidesInView) }) 524 // ...</script> 525``` 526 527If you're using `pnpm`, you need to install `embla-carousel` as a 528**devDependency** when importing types from it like demonstrated above. 529 530This is because even though `embla-carousel-vue` has `embla-carousel` as a 531dependency, `pnpm` makes nested dependencies inaccessible by design. 532 533Copy code snippet to clipboardCopy 534 535```prism-code jsx 536import { onMount } from 'solid-js'import { EmblaCarouselType } from 'embla-carousel'import createEmblaCarousel from 'embla-carousel-solid' 537export function EmblaCarousel() { const [emblaRef, emblaApi] = createEmblaCarousel() 538 function logSlidesInView(emblaApi: EmblaCarouselType): void { console.log(emblaApi.slidesInView()) } 539 onMount(() => { const api = emblaApi() if (api) api.on('slidesInView', logSlidesInView) }) 540 // ...} 541``` 542 543If you're using `pnpm`, you need to install `embla-carousel` as a 544**devDependency** when importing types from it like demonstrated above. 545 546This is because even though `embla-carousel-solid` has `embla-carousel` as a 547dependency, `pnpm` makes nested dependencies inaccessible by design. 548 549Copy code snippet to clipboardCopy 550 551```prism-code html 552<script> import { EmblaCarouselType } from 'embla-carousel' import emblaCarouselSvelte from 'embla-carousel-svelte' 553 let emblaApi: EmblaCarouselType 554 function logSlidesInView(emblaApi: EmblaCarouselType): void { console.log(emblaApi.slidesInView()) } 555 function onInit(event: CustomEvent<EmblaCarouselType>): void { emblaApi = event.detail emblaApi.on('slidesInView', logSlidesInView) }</script> 556<div class="embla" use:emblaCarouselSvelte onemblaInit="{onInit}">...</div> 557``` 558 559**Note:** Starting with Svelte 5, the `on:` event handlers have been deprecated. However, `on:emblaInit` will remain for backward compatibility. 560 561If you're using `pnpm`, you need to install `embla-carousel` as a 562**devDependency** when importing types from it like demonstrated above. 563 564This is because even though `embla-carousel-svelte` has `embla-carousel` as a 565dependency, `pnpm` makes nested dependencies inaccessible by design. 566 567## [reference permalink](https://www.embla-carousel.com/api/methods/\#reference) Reference 568 569Below follows an exhaustive **list of all** Embla Carousel **methods** with their respective parameters and return values. 570 571* * * 572 573### [rootnode permalink](https://www.embla-carousel.com/api/methods/\#rootnode) rootNode 574 575Parameters: `none` 576 577Returns: `HTMLElement` 578 579Get the root node that holds the scroll container with slides inside. This method can be useful when you need to manipulate the root element dynamically or similar. 580 581* * * 582 583### [containernode permalink](https://www.embla-carousel.com/api/methods/\#containernode) containerNode 584 585Parameters: `none` 586 587Returns: `HTMLElement` 588 589Get the container node that holds the slides. This method can be useful when you need to manipulate the container element dynamically or similar. 590 591* * * 592 593### [slidenodes permalink](https://www.embla-carousel.com/api/methods/\#slidenodes) slideNodes 594 595Parameters: `none` 596 597Returns: `HTMLElement[]` 598 599Get all the slide nodes inside the container. This method can be useful when you need to manipulate the slide elements dynamically or similar. 600 601* * * 602 603### [scrollnext permalink](https://www.embla-carousel.com/api/methods/\#scrollnext) scrollNext 604 605Parameters: `jump?: boolean` 606 607Returns: `void` 608 609Scroll to the next snap point if possible. When [loop](https://www.embla-carousel.com/api/options/#loop) is disabled and the carousel has reached the last snap point, this method won't do anything. Set the **jump** parameter to `true` when you want to go to the next slide instantly. 610 611* * * 612 613### [scrollprev permalink](https://www.embla-carousel.com/api/methods/\#scrollprev) scrollPrev 614 615Parameters: `jump?: boolean` 616 617Returns: `void` 618 619Scroll to the previous snap point if possible. When [loop](https://www.embla-carousel.com/api/options/#loop) is disabled and the carousel has reached the first snap point, this method won't do anything. Set the **jump** parameter to `true` when you want to go to the previous slide instantly. 620 621* * * 622 623### [scrollto permalink](https://www.embla-carousel.com/api/methods/\#scrollto) scrollTo 624 625Parameters: `index: number`, `jump?: boolean` 626 627Returns: `void` 628 629Scroll to a snap point by its unique index. If [loop](https://www.embla-carousel.com/api/options/#loop) is enabled, Embla Carousel will choose the closest way to the target snap point. Set the **jump** parameter to `true` when you want to go to the desired slide instantly. 630 631* * * 632 633### [canscrollnext permalink](https://www.embla-carousel.com/api/methods/\#canscrollnext) canScrollNext 634 635Parameters: `none` 636 637Returns: `boolean` 638 639Check the possiblity to scroll to a next snap point. If [loop](https://www.embla-carousel.com/api/options/#loop) is enabled and the container holds any slides, this will always return `true`. 640 641* * * 642 643### [canscrollprev permalink](https://www.embla-carousel.com/api/methods/\#canscrollprev) canScrollPrev 644 645Parameters: `none` 646 647Returns: `boolean` 648 649Check the possiblity to scroll to a previous snap point. If [loop](https://www.embla-carousel.com/api/options/#loop) is enabled and the container holds any slides, this will always return `true`. 650 651* * * 652 653### [selectedscrollsnap permalink](https://www.embla-carousel.com/api/methods/\#selectedscrollsnap) selectedScrollSnap 654 655Parameters: `none` 656 657Returns: `number` 658 659Get the index of the selected snap point. 660 661* * * 662 663### [previousscrollsnap permalink](https://www.embla-carousel.com/api/methods/\#previousscrollsnap) previousScrollSnap 664 665Parameters: `none` 666 667Returns: `number` 668 669Get the index of the previously selected snap point. 670 671* * * 672 673### [scrollsnaplist permalink](https://www.embla-carousel.com/api/methods/\#scrollsnaplist) scrollSnapList 674 675Parameters: `none` 676 677Returns: `number[]` 678 679Get an array containing all the snap point positions. Each position represents how far the carousel needs to progress in order to reach this position. 680 681* * * 682 683### [scrollprogress permalink](https://www.embla-carousel.com/api/methods/\#scrollprogress) scrollProgress 684 685Parameters: `none` 686 687Returns: `number` 688 689Check how far the carousel has scrolled of its scrollable length from 0 - 1. For example, **0.5 equals 50%**. For example, this can be useful when creating a scroll progress bar. 690 691* * * 692 693### [slidesinview permalink](https://www.embla-carousel.com/api/methods/\#slidesinview) slidesInView 694 695Parameters: `none` 696 697Returns: `number[]` 698 699Get slide indexes **visible** in the carousel viewport. Honors the [inViewThreshold](https://www.embla-carousel.com/api/options/#inviewthreshold) option. 700 701* * * 702 703### [slidesnotinview permalink](https://www.embla-carousel.com/api/methods/\#slidesnotinview) slidesNotInView 704 705Parameters: `none` 706 707Returns: `number[]` 708 709Get slide indexes **not visible** in the carousel viewport. Honors the [inViewThreshold](https://www.embla-carousel.com/api/options/#inviewthreshold) option. 710 711* * * 712 713### [internalengine permalink](https://www.embla-carousel.com/api/methods/\#internalengine) internalEngine 714 715Parameters: `none` 716 717Returns: `EmblaEngineType` 718 719Exposes almost all internal functionality used by Embla. Useful when creating plugins or similar. 720 721**Note:** Please **refrain** from creating **bug reports** related to this 722method. If you're using this and running into problems, it's a 99.8% chance 723that you don't understand how this works. Use at your own risk. 724 725* * * 726 727### [reinit permalink](https://www.embla-carousel.com/api/methods/\#reinit) reInit 728 729Parameters: `options?: EmblaOptionsType`, `plugins?: EmblaPluginType[]` 730 731Returns: `void` 732 733Hard reset the carousel after it has been initialized. This method allows for changing [options](https://www.embla-carousel.com/api/options/) and [plugins](https://www.embla-carousel.com/api/plugins/) after initializing a carousel. 734 735**Note:** Passed options will be **merged** with current options, but passed 736plugins will **replace** current plugins. 737 738* * * 739 740### [plugins permalink](https://www.embla-carousel.com/api/methods/\#plugins) plugins 741 742Parameters: `none` 743 744Returns: `EmblaPluginsType` 745 746Returns an object with key value pairs where the keys are the plugin names, and the plugin API:s are the values. 747 748* * * 749 750### [destroy permalink](https://www.embla-carousel.com/api/methods/\#destroy) destroy 751 752Parameters: `none` 753 754Returns: `void` 755 756Destroy the carousel instance permanently. This is a one way operation and is intended to be used as a cleanup measure when the carousel instance isn't needed anymore. 757 758* * * 759 760### [on permalink](https://www.embla-carousel.com/api/methods/\#on) on 761 762Parameters: `event: EmblaEventType`, `callback: (emblaApi: EmblaCarouselType, eventName: EmblaEventType) => void` 763 764Returns: `void` 765 766**Subscribe** to an Embla specific [event](https://www.embla-carousel.com/api/events/) with a **callback**. Added event listeners will persist even if [reInit](https://www.embla-carousel.com/api/methods/#reinit) is called, either until the carousel is destroyed or the event is removed with the [off](https://www.embla-carousel.com/api/methods/#off) method. 767 768* * * 769 770### [off permalink](https://www.embla-carousel.com/api/methods/\#off) off 771 772Parameters: `event: EmblaEventType`, `callback: (emblaApi: EmblaCarouselType, eventName: EmblaEventType) => void` 773 774Returns: `void` 775 776**Unsubscribe** from an Embla specific [event](https://www.embla-carousel.com/api/events/). Make sure to pass the **same callback reference** when the callback was added with the [on](https://www.embla-carousel.com/api/methods/#on) method. 777 778* * * 779 780### [emit permalink](https://www.embla-carousel.com/api/methods/\#emit) emit 781 782Parameters: `event: EmblaEventType` 783 784Returns: `void` 785 786Emits an embla [event](https://www.embla-carousel.com/api/events/). This doesn't trigger any internal Embla functionality. 787 788* * * 789 790[Edit this page on GitHub](https://github.com/davidjerleke/embla-carousel/blob/master/packages/embla-carousel-docs/src/content/pages/api/methods.mdx) 791 792## Embla Carousel Plugins 793[Skip to content](https://www.embla-carousel.com/api/plugins/#main-content) 794 795# Plugins 796 797It's possible to **extend** Embla carousel with additional features using **plugins**. The complete list of official plugins can be found [here](https://www.embla-carousel.com/plugins/). 798 799* * * 800 801## [installation permalink](https://www.embla-carousel.com/api/plugins/\#installation) Installation 802 803All **official plugins** are separate **NPM packages**. They're all **prefixed** with `embla-carousel` followed by its **unique** plugin **name**. For example, the `Autoplay` plugin is installed like so: 804 805CDNCDNnpmnpmyarnyarn 806 807Copy code snippet to clipboardCopy 808 809```prism-code html 810<script src="https://unpkg.com/embla-carousel-autoplay/embla-carousel-autoplay.umd.js"></script> 811``` 812 813Copy code snippet to clipboardCopy 814 815```prism-code shell 816npm install embla-carousel-autoplay --save 817``` 818 819Copy code snippet to clipboardCopy 820 821```prism-code shell 822yarn add embla-carousel-autoplay 823``` 824 825## [usage permalink](https://www.embla-carousel.com/api/plugins/\#usage) Usage 826 827The Embla Carousel **constructor** accepts an **array of plugins**. Each plugin might have its own [options](https://www.embla-carousel.com/api/plugins/#constructor-options), [methods](https://www.embla-carousel.com/api/plugins/#calling-methods) and [events](https://www.embla-carousel.com/api/plugins/#adding-event-listeners). 828 829### [adding a plugin permalink](https://www.embla-carousel.com/api/plugins/\#adding-a-plugin) Adding a plugin 830 831The constructor plugin array is the default way of providing plugins to Embla Carousel. In the following example, the [Autoplay](https://www.embla-carousel.com/plugins/autoplay/) plugin is added to the carousel: 832 833VanillaVanillaReactReactVueVueSolidSolidSvelteSvelte 834 835Copy code snippet to clipboardCopy 836 837```prism-code js 838import EmblaCarousel from 'embla-carousel'import Autoplay from 'embla-carousel-autoplay' 839const emblaNode = document.querySelector('.embla')const embla = EmblaCarousel(emblaNode, { loop: true }, [Autoplay()]) 840``` 841 842Copy code snippet to clipboardCopy 843 844```prism-code jsx 845import useEmblaCarousel from 'embla-carousel-react'import Autoplay from 'embla-carousel-autoplay' 846export function EmblaCarousel() { const [emblaRef] = useEmblaCarousel({ loop: true }, [Autoplay()]) 847 // ...} 848``` 849 850Copy code snippet to clipboardCopy 851 852```prism-code html 853<script setup> import emblaCarouselVue from 'embla-carousel-vue' import Autoplay from 'embla-carousel-autoplay' 854 const [emblaRef] = emblaCarouselVue({ loop: true }, [Autoplay()]) 855 // ...</script> 856``` 857 858Copy code snippet to clipboardCopy 859 860```prism-code jsx 861import createEmblaCarousel from 'embla-carousel-solid'import Autoplay from 'embla-carousel-autoplay' 862export function EmblaCarousel() { const [emblaRef] = createEmblaCarousel( () => ({ loop: true }), () => [AutoPlay()] ) 863 // ...} 864``` 865 866Copy code snippet to clipboardCopy 867 868```prism-code html 869<script> import emblaCarouselSvelte from 'embla-carousel-svelte' import Autoplay from 'embla-carousel-autoplay' 870 let plugins = [Autoplay()]</script> 871<div class="embla" use:emblaCarouselSvelte="{{ plugins }}">...</div> 872``` 873 874Note that it's possible to **change plugins** passed to the Embla Carousel 875constructor **after initialization** with the [reInit](https://www.embla-carousel.com/api/methods/#reinit) 876method. 877 878### [constructor options permalink](https://www.embla-carousel.com/api/plugins/\#constructor-options) Constructor options 879 880Plugins have their own specific **options** which is the first argument of the plugin constructor. This allows for configuring the plugin to your liking: 881 882VanillaVanillaReactReactVueVueSolidSolidSvelteSvelte 883 884Copy code snippet to clipboardCopy 885 886```prism-code js 887import EmblaCarousel from 'embla-carousel'import Autoplay from 'embla-carousel-autoplay' 888const emblaNode = document.querySelector('.embla')const embla = EmblaCarousel(emblaNode, { loop: true }, [ Autoplay({ delay: 4000 })]) 889``` 890 891Copy code snippet to clipboardCopy 892 893```prism-code jsx 894import useEmblaCarousel from 'embla-carousel-react'import Autoplay from 'embla-carousel-autoplay' 895export function EmblaCarousel() { const [emblaRef] = useEmblaCarousel({ loop: true }, [ Autoplay({ delay: 4000 }) ]) 896 // ...} 897``` 898 899Copy code snippet to clipboardCopy 900 901```prism-code html 902<script setup> import emblaCarouselVue from 'embla-carousel-vue' import Autoplay from 'embla-carousel-autoplay' 903 const [emblaRef] = emblaCarouselVue({ loop: true }, [ Autoplay({ delay: 4000 }) ]) 904 // ...</script> 905``` 906 907Copy code snippet to clipboardCopy 908 909```prism-code jsx 910import createEmblaCarousel from 'embla-carousel-solid'import Autoplay from 'embla-carousel-autoplay' 911export function EmblaCarousel() { const [emblaRef] = createEmblaCarousel( () => ({ loop: true }), () => [AutoPlay({ delay: 4000 })] ) 912 // ...} 913``` 914 915Copy code snippet to clipboardCopy 916 917```prism-code html 918<script> import emblaCarouselSvelte from 'embla-carousel-svelte' import Autoplay from 'embla-carousel-autoplay' 919 let plugins = [Autoplay({ delay: 4000 })]</script> 920<div class="embla" use:emblaCarouselSvelte="{{ plugins }}">...</div> 921``` 922 923### [global options permalink](https://www.embla-carousel.com/api/plugins/\#global-options) Global options 924 925All [official plugins](https://www.embla-carousel.com/plugins/) allows you to set **global options** that will be applied to all instances. This allows for overriding the default plugin options with your own: 926 927VanillaVanillaReactReactVueVueSolidSolidSvelteSvelte 928 929Copy code snippet to clipboardCopy 930 931```prism-code js 932import EmblaCarousel from 'embla-carousel'import Autoplay from 'embla-carousel-autoplay' 933Autoplay.globalOptions = { delay: 4000 } 934const emblaNode = document.querySelector('.embla')const embla = EmblaCarousel(emblaNode, { loop: true }, [Autoplay()]) 935``` 936 937Copy code snippet to clipboardCopy 938 939```prism-code jsx 940import useEmblaCarousel from 'embla-carousel-react'import Autoplay from 'embla-carousel-autoplay' 941Autoplay.globalOptions = { delay: 4000 } 942export function EmblaCarousel() { const [emblaRef] = useEmblaCarousel({ loop: true }, [Autoplay()]) 943 // ...} 944``` 945 946Copy code snippet to clipboardCopy 947 948```prism-code html 949<script setup> import emblaCarouselVue from 'embla-carousel-vue' import Autoplay from 'embla-carousel-autoplay' 950 Autoplay.globalOptions = { delay: 4000 } 951 const [emblaRef] = emblaCarouselVue({ loop: true }, [Autoplay()]) 952 // ...</script> 953``` 954 955Copy code snippet to clipboardCopy 956 957```prism-code jsx 958import createEmblaCarousel from 'embla-carousel-solid'import Autoplay from 'embla-carousel-autoplay' 959Autoplay.globalOptions = { delay: 4000 } 960export function EmblaCarousel() { const [emblaRef] = createEmblaCarousel( () => ({ loop: true }), () => [AutoPlay()] ) 961 // ...} 962``` 963 964Copy code snippet to clipboardCopy 965 966```prism-code html 967<script> import emblaCarouselSvelte from 'embla-carousel-svelte' import Autoplay from 'embla-carousel-autoplay' 968 Autoplay.globalOptions = { delay: 4000 } 969 let plugins = [Autoplay()]</script> 970<div class="embla" use:emblaCarouselSvelte="{{ plugins }}">...</div> 971``` 972 973Make sure to assign global options **before** initializing any carousel and 974**only assign it once**. Re-assigning global options might lead to confusing 975code and unexpected behaviour. 976 977### [calling methods permalink](https://www.embla-carousel.com/api/plugins/\#calling-methods) Calling methods 978 979Additionally, some plugins expose their own **API methods**. You can access plugin methods by calling the [plugin](https://www.embla-carousel.com/api/methods/#plugins) method like demonstrated below: 980 981VanillaVanillaReactReactVueVueSolidSolidSvelteSvelte 982 983Copy code snippet to clipboardCopy 984 985```prism-code js 986import EmblaCarousel from 'embla-carousel'import Autoplay from 'embla-carousel-autoplay' 987const emblaNode = document.querySelector('.embla')const emblaApi = EmblaCarousel(emblaNode, { loop: true }, [Autoplay()]) 988emblaApi.plugins().autoplay.stop() 989``` 990 991Copy code snippet to clipboardCopy 992 993```prism-code jsx 994import { useEffect } from 'react'import useEmblaCarousel from 'embla-carousel-react'import Autoplay from 'embla-carousel-autoplay' 995export function EmblaCarousel() { const [emblaRef, emblaApi] = useEmblaCarousel({ loop: true }, [Autoplay()]) 996 useEffect(() => { if (emblaApi) emblaApi.plugins().autoplay.stop() }, [emblaApi]) 997 // ...} 998``` 999 1000Copy code snippet to clipboardCopy 1001 1002```prism-code html 1003<script setup> import { onMounted } from 'vue' import emblaCarouselVue from 'embla-carousel-vue' import Autoplay from 'embla-carousel-autoplay' 1004 const [emblaRef, emblaApi] = emblaCarouselVue({ loop: true }, [Autoplay()]) 1005 onMounted(() => { if (emblaApi.value) emblaApi.value.plugins().autoplay.stop() }) 1006 // ...</script> 1007``` 1008 1009Copy code snippet to clipboardCopy 1010 1011```prism-code jsx 1012import { onMount } from 'solid-js'import createEmblaCarousel from 'embla-carousel-solid'import Autoplay from 'embla-carousel-autoplay' 1013export function EmblaCarousel() { const [emblaRef, emblaApi] = createEmblaCarousel( () => ({ loop: true }), () => [AutoPlay()] ) 1014 onMount(() => { const api = emblaApi() if (api) api.plugins().autoplay.stop() }) 1015 // ...} 1016``` 1017 1018Copy code snippet to clipboardCopy 1019 1020```prism-code html 1021<script> import emblaCarouselSvelte from 'embla-carousel-svelte' import Autoplay from 'embla-carousel-autoplay' 1022 let emblaApi let plugins = [Autoplay()] 1023 function onInit(event) { emblaApi = event.detail emblaApi.plugins().autoplay.stop() }</script> 1024<div class="embla" use:emblaCarouselSvelte="{{ plugins }}" onemblaInit="{onInit}"> ...</div> 1025``` 1026 1027**Note:** Starting with Svelte 5, the `on:` event handlers have been deprecated. However, `on:emblaInit` will remain for backward compatibility. 1028 1029### [adding event listeners permalink](https://www.embla-carousel.com/api/plugins/\#adding-event-listeners) Adding event listeners 1030 1031Some plugins fire their own **events**. Plugin events are structured as follows `<plugin-name>:eventname`. [Adding](https://www.embla-carousel.com/api/events/#adding-event-listeners) and [removing](https://www.embla-carousel.com/api/events/#removing-event-listeners) plugin event listeners is done the same way as native Embla events. Here's an example where an event is added to the autoplay plugin: 1032 1033VanillaVanillaReactReactVueVueSolidSolidSvelteSvelte 1034 1035Copy code snippet to clipboardCopy 1036 1037```prism-code js 1038import EmblaCarousel from 'embla-carousel'import Autoplay from 'embla-carousel-autoplay' 1039const emblaNode = document.querySelector('.embla')const emblaApi = EmblaCarousel(emblaNode, { loop: true }, [Autoplay()]) 1040function logPluginEvent(emblaApi, eventName) { console.log(`Autoplay just triggered ${eventName}!`)} 1041emblaApi.on('autoplay:stop', logPluginEvent) 1042``` 1043 1044Copy code snippet to clipboardCopy 1045 1046```prism-code jsx 1047import { useEffect, useCallback } from 'react'import useEmblaCarousel from 'embla-carousel-react'import Autoplay from 'embla-carousel-autoplay' 1048export function EmblaCarousel() { const [emblaRef, emblaApi] = useEmblaCarousel({ loop: true }, [Autoplay()]) 1049 const logPluginEvent = useCallback((emblaApi, eventName) => { console.log(`Autoplay just triggered ${eventName}!`) }, []) 1050 useEffect(() => { if (emblaApi) emblaApi.on('autoplay:stop', logPluginEvent) }, [emblaApi, logPluginEvent]) 1051 // ...} 1052``` 1053 1054Copy code snippet to clipboardCopy 1055 1056```prism-code html 1057<script setup> import { onMounted } from 'vue' import emblaCarouselVue from 'embla-carousel-vue' import Autoplay from 'embla-carousel-autoplay' 1058 const [emblaRef, emblaApi] = emblaCarouselVue({ loop: true }, [Autoplay()]) 1059 function logPluginEvent(emblaApi, eventName) { console.log(`Autoplay just triggered ${eventName}!`) } 1060 onMounted(() => { if (emblaApi.value) emblaApi.value.on('autoplay:stop', logPluginEvent) }) 1061 // ...</script> 1062``` 1063 1064Copy code snippet to clipboardCopy 1065 1066```prism-code jsx 1067import { onMount } from 'solid-js'import createEmblaCarousel from 'embla-carousel-solid'import Autoplay from 'embla-carousel-autoplay' 1068export function EmblaCarousel() { const [emblaRef, emblaApi] = createEmblaCarousel( () => ({ loop: true }), () => [AutoPlay()] ) 1069 function logPluginEvent(emblaApi, eventName) { console.log(`Autoplay just triggered ${eventName}!`) } 1070 onMount(() => { const api = emblaApi() if (api) api.on('autoplay:stop', logPluginEvent) }) 1071 // ...} 1072``` 1073 1074Copy code snippet to clipboardCopy 1075 1076```prism-code html 1077<script> import emblaCarouselSvelte from 'embla-carousel-svelte' import Autoplay from 'embla-carousel-autoplay' 1078 let emblaApi let plugins = [Autoplay()] 1079 function logPluginEvent(emblaApi, eventName) { console.log(`Autoplay just triggered ${eventName}!`) } 1080 function onInit(event) { emblaApi = event.detail emblaApi.on('autoplay:stop', logPluginEvent) }</script> 1081<div class="embla" use:emblaCarouselSvelte="{{ plugins }}" onemblaInit="{onInit}"> ...</div> 1082``` 1083 1084**Note:** Starting with Svelte 5, the `on:` event handlers have been deprecated. However, `on:emblaInit` will remain for backward compatibility. 1085 1086### [typescript permalink](https://www.embla-carousel.com/api/plugins/\#typescript) TypeScript 1087 1088The `EmblaPluginType` is obtained directly from the **core package** `embla-carousel` and used like so: 1089 1090VanillaVanillaReactReactVueVueSolidSolidSvelteSvelte 1091 1092Copy code snippet to clipboardCopy 1093 1094```prism-code tsx 1095import EmblaCarousel, { EmblaPluginType } from 'embla-carousel'import Autoplay from 'embla-carousel-autoplay' 1096const emblaNode = document.querySelector('.embla')const plugins: EmblaPluginType[] = [Autoplay()]const emblaApi = EmblaCarousel(emblaNode, { loop: true }, plugins) 1097``` 1098 1099Copy code snippet to clipboardCopy 1100 1101```prism-code tsx 1102import React from 'react'import { EmblaPluginType } from 'embla-carousel'import useEmblaCarousel from 'embla-carousel-react'import Autoplay from 'embla-carousel-autoplay' 1103type PropType = { plugins?: EmblaPluginType[]} 1104export function EmblaCarousel(props) { const [emblaRef, emblaApi] = useEmblaCarousel({ loop: true }, props.plugins) 1105 // ...} 1106``` 1107 1108If you're using `pnpm`, you need to install `embla-carousel` as a 1109**devDependency** when importing types from it like demonstrated above. 1110 1111This is because even though `embla-carousel-react` has `embla-carousel` as a 1112dependency, `pnpm` makes nested dependencies inaccessible by design. 1113 1114Copy code snippet to clipboardCopy 1115 1116```prism-code html 1117<script setup lang="ts"> import { EmblaPluginType } from 'embla-carousel' import emblaCarouselVue from 'embla-carousel-vue' import Autoplay from 'embla-carousel-autoplay' 1118 const plugins: EmblaPluginType[] = [Autoplay()] const [emblaRef] = emblaCarouselVue({ loop: true }, plugins) 1119 // ...</script> 1120``` 1121 1122If you're using `pnpm`, you need to install `embla-carousel` as a 1123**devDependency** when importing types from it like demonstrated above. 1124 1125This is because even though `embla-carousel-vue` has `embla-carousel` as a 1126dependency, `pnpm` makes nested dependencies inaccessible by design. 1127 1128Copy code snippet to clipboardCopy 1129 1130```prism-code tsx 1131import { EmblaPluginType } from 'embla-carousel'import createEmblaCarousel from 'embla-carousel-solid'import Autoplay from 'embla-carousel-autoplay' 1132type PropType = { plugins?: EmblaPluginType[]} 1133export function EmblaCarousel(props) { const [emblaRef, emblaApi] = createEmblaCarousel( () => ({ loop: true }), props.plugins ) 1134 // ...} 1135``` 1136 1137If you're using `pnpm`, you need to install `embla-carousel` as a 1138**devDependency** when importing types from it like demonstrated above. 1139 1140This is because even though `embla-carousel-solid` has `embla-carousel` as a 1141dependency, `pnpm` makes nested dependencies inaccessible by design. 1142 1143Copy code snippet to clipboardCopy 1144 1145```prism-code html 1146<script> import { EmblaPluginType } from 'embla-carousel' import emblaCarouselSvelte from 'embla-carousel-svelte' import Autoplay from 'embla-carousel-autoplay' 1147 let emblaApi let plugins: EmblaPluginType[] = [Autoplay()]</script> 1148<div class="embla" use:emblaCarouselSvelte="{{ plugins }}">...</div> 1149``` 1150 1151If you're using `pnpm`, you need to install `embla-carousel` as a 1152**devDependency** when importing types from it like demonstrated above. 1153 1154This is because even though `embla-carousel-svelte` has `embla-carousel` as a 1155dependency, `pnpm` makes nested dependencies inaccessible by design. 1156 1157[Edit this page on GitHub](https://github.com/davidjerleke/embla-carousel/blob/master/packages/embla-carousel-docs/src/content/pages/api/plugins.mdx) 1158 1159## Carousel Breakpoints Guide 1160[Skip to content](https://www.embla-carousel.com/guides/breakpoints/#main-content) 1161 1162# Breakpoints 1163 1164This guide demonstrates how to customize your carousels for different breakpoints using the [flexbox](https://www.embla-carousel.com/guides/slide-container/#using-flexbox) setup. Embla Carousel offers a convenient way to customize your carousels based on different breakpoints including changing [options](https://www.embla-carousel.com/api/options/), using plain CSS. 1165 1166* * * 1167 1168## [changing slide sizes permalink](https://www.embla-carousel.com/guides/breakpoints/\#changing-slide-sizes) Changing slide sizes 1169 1170Embla Carousel will **automatically pick up** any **changes in slide sizes** when the **window is resized**. It's a walk in the park to change slide sizes based on your breakpoints: 1171 1172Copy code snippet to clipboardCopy 1173 1174```prism-code css 1175.embla__slide { flex: 0 0 100%; /* Default slide covers 100% of the viewport */}@media (min-width: 768px) { .embla__slide { flex: 0 0 50%; /* Breakpoint SM slide covers 50% of the viewport */ }} 1176``` 1177 1178## [changing slide gaps permalink](https://www.embla-carousel.com/guides/breakpoints/\#changing-slide-gaps) Changing slide gaps 1179 1180Embla Carousel will **automatically pick up** any **changes in gap sizes** when the **window is resized**. It's very simple to change gap sizes based on your breakpoints: 1181 1182Copy code snippet to clipboardCopy 1183 1184```prism-code css 1185.embla__slide { margin-right: 10px; /* Default slide gap */}@media (min-width: 768px) { .embla__slide { margin-right: 20px; /* Breakpoint SM gap */ }} 1186``` 1187 1188## [changing options permalink](https://www.embla-carousel.com/guides/breakpoints/\#changing-options) Changing options 1189 1190You can provide [options](https://www.embla-carousel.com/api/options/) that will be applied for specific breakpoints using the [breakpoint](https://www.embla-carousel.com/api/options/#breakpoints) option. 1191 1192Here's an example of a carousel that's only active when the screen width is less than 768px: 1193 1194Copy code snippet to clipboardCopy 1195 1196```prism-code js 1197const options = { active: true, breakpoints: { '(min-width: 768px)': { active: false } }} 1198``` 1199 1200Because the default [active](https://www.embla-carousel.com/api/options/#active) value is `true`, we can omit it from the root level and achieve the same result as above like this: 1201 1202Copy code snippet to clipboardCopy 1203 1204```prism-code js 1205const options = { breakpoints: { '(min-width: 768px)': { active: false } }} 1206``` 1207 1208When breakpoint options **are in conflict**, the last option in the breakpoints options will be applied: 1209 1210Copy code snippet to clipboardCopy 1211 1212```prism-code js 1213const options = { loop: false, breakpoints: { '(min-width: 768px)': { loop: true }, '(min-width: 420px)': { loop: false } // This will override the (min-width: 768px) breakpoint loop option }} 1214``` 1215 1216If multiple queries match, they will be **merged**: 1217 1218Copy code snippet to clipboardCopy 1219 1220```prism-code js 1221const options = { loop: false, // --> 419px screens and down will apply { loop: false } breakpoints: { '(min-width: 420px)': { align: 'start' }, // --> 420px screens and up will apply { align: 'start', loop: false } '(min-width: 768px)': { loop: true } // --> 768px screens and up will apply { align: 'start', loop: true } }} 1222``` 1223 1224[Edit this page on GitHub](https://github.com/davidjerleke/embla-carousel/blob/master/packages/embla-carousel-docs/src/content/pages/guides/breakpoints.md) 1225 1226## Carousel Generator 1227[Skip to content](https://www.embla-carousel.com/examples/generator/#main-content) 1228 1229# Carousel generator 1230 1231Just follow the instructions and create your own customized carousel setup in no time! 1232 1233* * * 1234 1235## [choose framework permalink](https://www.embla-carousel.com/examples/generator/\#choose-framework) Choose framework 1236 1237- Vanilla 1238- Vanilla + TypeScript 1239- React 1240- React + TypeScript 1241 1242## [basic settings permalink](https://www.embla-carousel.com/examples/generator/\#basic-settings) Basic settings 1243 1244-Horizontal 1245 1246-Vertical 1247 1248-Left to right 1249 1250-Right to left 1251 1252-Loop 1253 1254-Drag free 1255 1256-Accessibility (under development) 1257 1258## [navigation settings permalink](https://www.embla-carousel.com/examples/generator/\#navigation-settings) Navigation settings 1259 1260-Previous and next buttons 1261 1262-Dot navigation 1263 1264## [slide settings permalink](https://www.embla-carousel.com/examples/generator/\#slide-settings) Slide settings 1265 1266Slide size (%) 1267 1268Slide gaps (px) 1269 1270## [alignment settings permalink](https://www.embla-carousel.com/examples/generator/\#alignment-settings) Alignment settings 1271 1272Aligment settings will only make a visual **difference** for carousels with slide sizes **less than 100%**. 1273 1274-Start 1275 1276-Center 1277 1278-End 1279 1280-Clear leading and trailing space 1281 1282## [plugins permalink](https://www.embla-carousel.com/examples/generator/\#plugins) Plugins 1283 1284-Autoplay 1285 1286-Wheel gestures (under development) 1287 1288* * * 1289 1290## [support permalink](https://www.embla-carousel.com/examples/generator/\#support) Support 1291 1292Did this save you time? Don't say thank you! **Share** it, **star** it or **support** this project: 1293 1294[Sponsor](https://github.com/sponsors/davidjerleke) 1295 12961 1297 12982 1299 13003 1301 13024 1303 13045 1305 1306- Expand carousel preview 1307- Create Sandbox 1308 1309[Edit this page on GitHub](https://github.com/davidjerleke/embla-carousel/blob/master/packages/embla-carousel-docs/src/content/pages/examples/generator.mdx) 1310 1311## Carousel Examples 1312[Skip to content](https://www.embla-carousel.com/examples/predefined/#main-content) 1313 1314# Predefined Examples 1315 1316Get started instantly with pre-made CodeSandboxes or customize your carousel with the [carousel generator](https://www.embla-carousel.com/examples/generator/). 1317 1318* * * 1319 1320## [basic examples permalink](https://www.embla-carousel.com/examples/predefined/\#basic-examples) Basic Examples 1321 1322Basic carousel setups that require minimal effort to get started with. 1323 1324### [default permalink](https://www.embla-carousel.com/examples/predefined/\#default) Default 1325 1326Edit Code 1327 13281 1329 13302 1331 13323 1333 13344 1335 13365 1337 1338### [loop permalink](https://www.embla-carousel.com/examples/predefined/\#loop) Loop 1339 1340Edit Code 1341 13421 1343 13442 1345 13463 1347 13484 1349 13505 1351 1352### [right to left permalink](https://www.embla-carousel.com/examples/predefined/\#right-to-left) Right To Left 1353 1354Edit Code 1355 13561 1357 13582 1359 13603 1361 13624 1363 13645 1365 1366### [slides to scroll permalink](https://www.embla-carousel.com/examples/predefined/\#slides-to-scroll) Slides To Scroll 1367 1368Edit Code 1369 13701 1371 13722 1373 13743 1375 13764 1377 13785 1379 13806 1381 13827 1383 13848 1385 13869 1387 138810 1389 1390### [drag free permalink](https://www.embla-carousel.com/examples/predefined/\#drag-free) Drag Free 1391 1392Edit Code 1393 13941 1395 13962 1397 13983 1399 14004 1401 14025 1403 14046 1405 14067 1407 14088 1409 14109 1411 141210 1413 141411 1415 141612 1417 141813 1419 142014 1421 142215 1423 142416 1425 14261 / 16 1427 1428### [align permalink](https://www.embla-carousel.com/examples/predefined/\#align) Align 1429 1430Edit Code 1431 14321 1433 14342 1435 14363 1437 14384 1439 14405 1441 1442### [variable widths permalink](https://www.embla-carousel.com/examples/predefined/\#variable-widths) Variable Widths 1443 1444Edit Code 1445 14461 1447 14482 1449 14503 1451 14524 1453 14545 1455 14566 1457 14587 1459 14608 1461 14629 1463 14641 / 9 1465 1466### [y axis permalink](https://www.embla-carousel.com/examples/predefined/\#y-axis) Y-axis 1467 1468Edit Code 1469 14701 1471 14722 1473 14743 1475 14764 1477 14785 1479 1480### [slides per view permalink](https://www.embla-carousel.com/examples/predefined/\#slides-per-view) Slides Per View 1481 1482Edit Code 1483 14841 1485 14862 1487 14883 1489 14904 1491 14925 1493 14946 1495 1496### [thumbnails permalink](https://www.embla-carousel.com/examples/predefined/\#thumbnails) Thumbnails 1497 1498Edit Code 1499 15001