Fade

View plugin on GitHub

This plugin is used to replace the Embla Carousel scroll functionality with fade transitions.

Example

Installation

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

<script src="https://unpkg.com/embla-carousel-fade/embla-carousel-fade.umd.js"></script>

npm install embla-carousel-fade --save

yarn add embla-carousel-fade

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}