v3.0.10

3.0.10

v3.0.0 - Embla - More powerful than ever!

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.

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.