🛠️ Bugfixes

• Fixes the issue described in PR #108. Special thanks to @msallent for his efforts!

🛠️ Bugfixes

Comes with fixes for:

• Issue #87. Special thanks to @S1SYPHOS for reporting this.
• Issue #102. Special thanks to @huttameps for reporting this.

🛠️ Bugfixes

• Comes with a fix for issue #99. Special thanks to @flayks for reporting this.

Note! This major release comes with breaking changes for React users only ⚛️!

Massive thanks to Felix (@xiel) for his contributions to this release 🙏!

🌟 Improvements

• Instead of exposing an encapsulated component <EmblaCarouselReact>, the useEmblaCarousel() hook now exposes a ref you can attach to your own component. The ref approach makes the Embla footprint smaller regarding forcing stuff on the user. Basically, what the <EmblaCarouselReact> component did was creating a React Element with the style { overflow: "hidden" }. As a consequence, the user had to pass a string to choose DOM element type (div, ul, section etc...) and had to use the className prop in order to style the encapsulated element. This release solves issue #94.
• Embla Carousel didn't initialize correctly if the component that used <EmblaCarouselReact> returned null before initializing the carousel. This release solves issue #91.
• The options parameter passed to the useEmblaCarousel({ loop: false }) was before this release a one way ticket. Changing options didn't reinitialize the carousel with the new options. This has been fixed in this release.

Migration

Migrating is luckily very easy.

❌ Deprecated way to do it

import React, { useEffect } from 'react'
import { useEmblaCarousel } from 'embla-carousel/react'

const EmblaCarousel = () => {
  const [EmblaCarouselReact, emblaApi] = useEmblaCarousel({ loop: false })

  return (
    <EmblaCarouselReact>
      <div className="embla__container">
        <div className="embla__slide">Slide 1</div>
        <div className="embla__slide">Slide 2</div>
        <div className="embla__slide">Slide 3</div>
      </div>
    </EmblaCarouselReact>
  )
}

export default EmblaCarousel

✅ New way to do it

import React, { useEffect } from 'react'
import { useEmblaCarousel } from 'embla-carousel/react'

const EmblaCarousel = () => {
  const [emblaRef, emblaApi] = useEmblaCarousel({ loop: false })

  return (
    <div className="embla" ref={emblaRef}> /* Make sure this element has overflow: hidden; */
      <div className="embla__container">
        <div className="embla__slide">Slide 1</div>
        <div className="embla__slide">Slide 2</div>
        <div className="embla__slide">Slide 3</div>
      </div>
    </div>
  )
}

export default EmblaCarousel

Enjoy!

• Resolves issue #84 with PR #93 which removed side effects from the react package. Special thanks to @wopian for his efforts.
• The Embla Carousel package is now marked with "sideEffects": false in package.json.

• A fix for the window bind issue has been merged #85. Special thanks to @romellem for this.
• The drag handler now respects event.cancelable and bails if it returns false.

This release resolves issue #82. Special thanks to @sedlukha.

🌟 Improvements

• Small code improvements that resulted in a smaller bundle size.

🛠️ Bugfixes

• When an empty carousel with no slides was initialized, canScrollNext() and canScrollPrev() returned true when loop: true. This has been resolved.
• Comes with a fix for issue #81. Special thanks to @misshu1 for reporting this.

🌟 Improvements

This release resolves issue #78. Special thanks to @korsvanloon for opening this issue.

🛠️ Bugfixes

This release resolves issue #77. Special thanks to @jamesdbruner for noticing this.

🛠️ Bugfixes

This release resolves issue #75. Special thanks to @korsvanloon for opening this issue.

🌟 New Features

The embla-carousel-react has now moved into the core package which will improve the maintainability of this project. For example, as soon as a new version is released, React users won't have to wait for the React package to be published separately.

How to migrate from the React package

Please migrate as soon as possible. Start by uninstalling the react package and installing the core package like so:

NPM

npm uninstall embla-carousel-react --save

npm install embla-carousel --save

YARN

yarn remove embla-carousel-react --save

yarn add embla-carousel --save

Change your import

// from this...
import { useEmblaCarousel } from 'embla-carousel-react';

// ...to this
import { useEmblaCarousel } from 'embla-carousel/react';

IMPORTANT Notes!

• To anyone NOT using the useEmblaCarousel() hook. The class setup is no longer supported. Please migrate to the hook setup as soon as possible.
• David here from the future! Some things have changed with the React implementation since this release. Make sure to read the release notes for version 4.0.0 on how to use Embla Carousel with React, if you're using version 4.0.0 and up.

I would very much appreciate

If you've starred the Embla Carousel React package, please take a moment to migrate your star ⭐ to the core package as well. I would appreciate that a lot.

Thank you!
David

Embla Carousel - The next major version is here 🎉 .

Embla Carousel v.3 is here, and here's all you need to know before upgrading.

🌟 New Features

New and changed options:

• #50 - Y-axis support has been implemented { axis: 'x' | 'y' }.
• #61 - Automatically falls back to loop: false when content isn't enough for the loop effect to work.
• #19 - ContainScroll additions has been implemented as described here { containScroll: '' | 'trimSnaps' | 'keepSnaps' }.
• Opt-out from selectedClass toggling by passing an empty string { selectedClass: '' }.
• Opt-out from draggableClass by passing an empty string { draggableClass: '' }.
• Opt-out from draggingClass toggling by passing an empty string { draggingClass: '' }.
• Choose in view threshold for slides in view { inViewThreshold: 0.5 }. Pass a number between 0 and 1 representing percentage of each slide size that needs to be visible in the carousel viewport in order to be considered in view. Ex: 0.5 = 50% of a slide needs to be in view.

New API methods:

• slidesInView() - Get a list of slide indexes within the carousel viewport.
• slidesNotInView() - Get a list of slide indexes not within the carousel viewport.

💔 Breaking Changes

Renamed events:

• dragStart has been renamed to pointerDown.
• dragEnd has been renamed to pointerUp.

Deprecated API methods:

• scrollBy() has been removed.
• scrollToProgress() has been removed.

Deprecated API method parameters:

• target : boolean for the API method scrollProgress() has been removed.

Changed options:

• containScroll is now a string. An empty string equals the previous behavior when it was false. The previous true value is now named 'trimSnaps'.

Changed API methods:

• changeOptions() has been renamed to reInit().
• scrollSnapList() now returns an array of numbers representing the scroll progress for each snap point. Indexes and slide nodes per snap point has been removed.

🛠️ Bugfixes

• #65 - Opened by @ontrigger.
• #46 - Opened by @olushchik.

🌟 New features

This release comes with more tools to manipulate the carousels scrollProgress.

Additions to scrollProgress

It's now possible to get the scroll progress of either the carousels current scroll location or its target scroll location. Get the scroll progress of the carousels current scroll location:

embla.scrollProgress()

Get the scroll progress of the carousels target scroll location

const target = true
embla.scrollProgress(target)

Additions to scrollBy

It's now possible to pass a second boolean parameter if you want the carousel to snap to the closest snap position. Passing true will snap the carousel while false will scroll by the exact given amount.

const snapToClosest = true
embla.scrollBy(0.2, snapToClosest)

New feature scrollToProgress

As discussed in issue #26 this feature allows for setting the absolute scroll progress directly as compared to scrollBy which adds to the current scroll progress. Like scrollBy, it also accepts a second boolean parameter if you want the carousel to snap to the closest snap position. Passing true will snap the carousel while false will scroll to the exact given progress.

const snapToClosest = true
embla.scrollToProgress(0.2, snapToClosest)

Thanks a bunch @xiel for this feature request.

Enjoy 🎉!

🌟 New features

The percent alignment is a new feature. This feature was specified and requested in issue #49.

const options = { align: 0.2 }
const embla = EmblaCarousel(emblaNode, options)

This feature allows users to specify percentage alignment by passing a number, where a fraction like 0.2 represents 20% of the viewport size. Percentage will be measured from the start edge of the viewport.