View plugin on GitHub

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



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>

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}
Edit this page on GitHub