Fade

View plugin on GitHub

This plugin replaces Embla Carousel's default scrolling behavior with smooth fade transitions between slides.

Example

Installation

Start by installing the npm package and save it to your dependencies:

npm install embla-carousel-fade --save

When the Fade plugin is enabled, the inViewThreshold option no longer has any effect. This is because the Fade plugin stacks any slides with an opacity higher than 0 on top of each other, eliminating the concept of scrolling and gradual appearance of slides.

If your slides are less than 100% of the viewport width, it's recommended to set these options when using the Fade plugin to avoid confusing UX:


const options = {  align: 'center',  containScroll: false}


However, align: center is default so you can omit setting the align option and achieve the same thing like so:


const options = {  containScroll: false}

Options

Below follows an exhaustive list of all Fade options and their default values.

active

Type:boolean
Default: true

{ active: false | true }

Setting this to false will not activate or deactivate the plugin. Useful when used together with the breakpoints option to toggle the plugin active/inactive depending on media queries.

breakpoints

Type:FadeOptionsType
Default: {}

{   active: true,  '(min-width: 768px)': { active: false }}

An object with options that will be applied for a given breakpoint by overriding the options at the root level.

Note: If multiple queries match, they will be merged. And when breakpoint options clash, the last one in the list has precedence.

Methods

Below follows an exhaustive list of all Fade methods with their respective parameters and return values.

ssrStyles

Parameters:(container: string, slides?: string)
Returns: string

emblaApi.ssrStyles('.embla__container', '.embla__slide') + emblaApi.plugins().fade?.ssrStyles('.embla__container', '.embla__slide')

Generate CSS for server-side rendering (SSR). This helper outputs minimal styles for the specified container and slide selectors, ensuring a stable, non-shifting layout when rendered on the server. When called on a client-initialized instance, it returns an empty string. Wrap the output in a <style> tag.

Note: Make sure to choose a unique selector for your container to avoid affecting other Embla Carousels on the same page.

Edit this page on GitHub