v4.1.3 - Refactor of EventEmitter

🌟 Improvements

This release comes with a refactored eventEmitter component that slightly reduces the bundle size.

v4.1.2 - Improve ScrollBounds

🌟 Improvements

• The ScrollBounds component is now responsible for applying friction instead of the dragHandler component when the carousel is out of bounds.

v4.1.1 - Migrate from TravisCI to Github Actions

4.1.1

v4.1.0 - RTL Support

🌟 New Features

This release comes with RTL (Right To Left) support (#43) for Embla. Special thanks to @omarkhatibco and @ppromerojr for all the help. And good news! This feature doesn't add any weight to the Embla library. It actually comes with a slightly reduced bundle size.

Usage

The options object is configured like so:

const emblaNode = document.getElementById('embla')
const options = { direction: 'rtl' } // Default is 'ltr'

const embla = EmblaCarousel(emblaNode, options)

The HTML direction also has to be set to RTL. This can be achieved by using the HTML dir attribute:

<div class="embla" id="embla" dir="rtl">
  ...
</div>

...or using the CSS direction property:

.embla {
  direction: rtl;
}

CodeSandboxes

I've added the following two sandboxes to the examples page to get you started:

• Vanilla JS
• React JS

Enjoy!

v4.0.5 - Check for truthy class names before toggling them

🛠️ Bugfixes

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

v4.0.3 - SlidesInView & Text Selection bug

🛠️ Bugfixes

Comes with fixes for:

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

v4.0.2 - Resize debounce bugfix

🛠️ Bugfixes

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

v4.0.0 - An upgraded React hook

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!

v3.0.28 - Mark package as side effect free

• 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.

v3.0.27 - Window bind & event.cancelable

• 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.