All Versions
74
Latest Version
Avg Release Cycle
7 days
Latest Release
1236 days ago

Changelog History
Page 1

  • v4.1.2 Changes

    December 07, 2020

    🍱 🌟 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

    November 25, 2020

  • v4.1.0 Changes

    November 11, 2020

    🍱 🌟 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:

    Enjoy!

  • v4.0.6

    October 19, 2020

  • v4.0.5 Changes

    September 30, 2020

    🛠️ Bugfixes

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

  • v4.0.4

    September 20, 2020

  • v4.0.3 Changes

    September 13, 2020

    🛠️ Bugfixes

    🛠 Comes with fixes for:

  • v4.0.2 Changes

    September 09, 2020

    🛠️ Bugfixes

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

  • v4.0.1

    August 26, 2020

  • v4.0.0 Changes

    August 26, 2020

    🚀 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" }. 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!