v2.9.1 - Scroll Progress additions

🌟 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 🎉!

v2.9.0 - Percent Alignment

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

v2.8.0 - Settle event

🌟 New features

The settle event is a new feature. This feature was specified and requested in issue #48.

embla.on('settle', () => {
  console.log(`The carousel has stopped scrolling.`)
})

The settle event allows users to hook onto when the carousel has stopped scrolling.

v2.7.4 - Android touch device event bug

🛠️ Bugfixes

This patch resolves one bug:

• It solves issue #27. When Android devices fired the mousemove event during touch interactions, Embla threw a console error. This patch comes with a fix for this issue.

v2.7.0 - ScrollBy

🌟 New features

The API method scrollBy() is a new feature. This feature was specified in issue #23 and requested in issue #21.

embla.scrollBy(0.5)

The scrollBy()method allows users to manipulate the current scroll progress by passing a number as an argument. Scroll to target is smooth.

v2.6.5 - Options documentation update

🌟 New features

The options section in the readme has been updated with expandable details for each option:

v2.6.4 - Contextmenu & Mouse Button bug

🛠️ Bugfixes

This patch resolves two bugs:

• It solves issue #37 and cancels any drag interaction when contextmenu is opened.
• For mouse events, the carousel only listens for drag events if clicked mouse button is the left button.

v2.6.0 - Click Allowed

🌟 New features

The API method clickAllowed() is a new feature. This feature was requested in issue #22 and #24.

embla.clickAllowed()

This method is an opt-in feature. Here is how it works: It returns false if:

Mouse Pointers

• Mouse drags the carousel.

Touch Pointers

• Touch drags the carousel.
• Carousel is in motion (i.e. is scrolling).

Otherwise it will return true.

v2.5.5 - Updated NPM packages

📦 Package updates

Outdated NPM packages were updated in this release.

v2.5.3 - ContainScroll bugfix

🛠️ Bugfixes

This release is a fix for the containScroll bug as described in issue #30.