[Feat]: Add a fade plugin

[dmorda]

Love the carousel and was able to get it working right away. The one thing that I need that it doesn't provide is a way to have a scroll option for single/multiple slides and a fade option to handle next/previous transition when it's just showing a single slide at a time.

Is that something that has been requested before?

[davidjerleke]

Hi Damon (@dmorda), Merry Christmas, and thank you for opening this issue 🎅.

About:

A way to have a scroll option for single/multiple slides

Would you mind explaining what you mean a bit more in detail or provide an example? Because I need more information to answer this question, but I'm going to take a guess and ask if you've checked out the slidesToScroll option? Here's a CodeSandbox that demonstrates how you can achieve this.

The answer to your question about the fade option is no, it has not been requested yet. I'm not sure what you mean by fade option because it can be done in many different ways so would you mind explaining a bit further? I'm guessing here too but maybe you can achieve this by hooking onto the classname toggling for selected slides? Please have a look at the documentation here.

Thank you in advance!

Best, David

[dmorda]

Thanks for the quick response and a Merry Christmas to you as well. What I'm trying to achieve is a Fade effect , as an example view this page and search for the word "Fade". That will provide an example of what I'm trying to accomplish.

Let me know if that helps!

[davidjerleke]

Hi again Damon (@dmorda), Thank you for the clarification, it helps 👍.

The vision for Embla is carousels that move in a fluid and natural manner. The assumption here is that the carousel should be scrollable, and that doesn't play well with fade sliders that don't feel natural when dragging/swiping. This is why a fade option is not a part of the Embla vision and won't be incorporated into the Embla core.

But with that said, I've setup a CodeSandbox example for you, where I've created the fade effect just by tweaking some CSS.

I hope that you'll find it useful!

Best, David

[dmorda]

That small tweak now lets me re-use Embla for both the fade version of a carousel and the normal sliding version. Thanks so much, happy holidays!

[davidjerleke]

Hi Damon (@dmorda),

I’m glad to hear that 🙂. Thank you and happy holidays to you too!

Kindly, David

[vntw]

Hey @davidjerleke, sorry for digging up an old issue but I found your sandbox for a fade slider (thanks!). While playing around with it, I noticed that every slide is seen as "in view" by the slider and subsequently gets the selectedClass when the window is resized, meaning no more slides.

I added a reInit and resize listener to the sandbox here to fix this. If this is the correct change, it might make sense to update your original sandbox for future users that may find this?

Happy to hear your thoughts on this 🙂 Thanks!

[davidjerleke]

Hi @vntw,

Thank you for noticing this.

I added a reInit and resize listener to the sandbox here to fix this. If this is the correct change, it might make sense to update your original sandbox for future users that may find this?

Your suggestion does the trick, nice work 👍. I've updated the original CodeSandbox. I also added the skipSnaps: false; option because skipping slides when vigorous dragging occurs might lead to confusing UX for fade sliders. From the docs:

Allow the carousel to skip scroll snaps if it's dragged vigorously. Note that this option will be ignored if the dragFree option is set to true.

Thank you for your efforts!

Best, David

[silllli]

Thank you @davidjerleke!

[davidjerleke]

Reopening this:

As of v.6 it’s possible to provide plugins to Embla. A Fade plugin will be added in the future:

• #703

[aKandzior]

Great solution with the fade effect!

I have an improvement suggestion for the CSS used in the SandBox.

I was applying the example CSS code to my project and noticed that since positon: absolute; is used to stack the slides, it is also required to set the slide height on the .embla__container.

In my case, I wanted the container to automatically use the height as defined by the slide markup itself. By changing the CSS to use display: grid; as per the code below, the height of the slides is still defined by the slide side markup.

.embla__container {
  transform: none !important; /* override Embla */
  display: flex;
}

.embla__slide {
  transform: none !important; /* required if loop is active */
  flex: 0 0 auto;
  width: 100%;
  height: 250px;
  opacity: 0;
  transition: opacity 1s;
  counter-increment: embla;
  border-radius: 0.5rem;
  font-size: 5rem;
}

.embla--is-ready .embla__container {
  display: grid;
}

.embla--is-ready .embla__slide {
  grid-row: 1;
  grid-column: 1;
}

[SunpieAgency]

Great solution with the fade effect! I have an improvement suggestion for the CSS used in the SandBox [...]```

I think best practice would be to do something like this:

.embla.fade.ready .embla__slide { position: absolute; } .embla__slide.is-selected { position: relative; }

This requires the classes module but works perfect for me. Height of the container is automatically adapted to your selected slide.

[vettloffah]

The sandbox linked multiple times here doesn't load anymore. Does anyone have a copy of the code?

[davidjerleke]

• @vettloffah please read this: https://github.com/davidjerleke/embla-carousel/discussions/741#discussioncomment-8415273.

[davidjerleke]

Finally got an hour without interruptions to work on the embla-carousel-fade plugin. I have dragging between slides left to implement. Here's a sneak preview for anyone interested:

https://github.com/davidjerleke/embla-carousel/assets/11529148/8011050e-4c12-45fd-b310-1aa2e9160d95

[nikolay17538583]

Finally got an hour without interruptions to work on the embla-carousel-fade plugin. I have dragging between slides left to implement. Here's a sneak preview for anyone interested:

fade-plugin-wip.mp4

🙏🏼🥺

[nikolay17538583]

Finally got an hour without interruptions to work on the embla-carousel-fade plugin. I have dragging between slides left to implement. Here's a sneak preview for anyone interested:

https://github.com/davidjerleke/embla-carousel/assets/11529148/8011050e-4c12-45fd-b310-1aa2e9160d95

David, any info when this will be available? I really need this 🥺

[davidjerleke]

David, any info when this will be available? I really need this 🥺

@nikolay17538583 unfortunately no. I'm doing this on my unpaid spare time so I never know when I get my next chance to work on this.

[davidjerleke]

Update

We’re getting close to a release people. I only have two edge cases left to fix and after that I will clean up some code and add a page to the documentation.

Anyone who wants to help out and speed up the release of this plugin can keep an eye on this issue as I will publish CodeSandboxes here as soon as I’m done with fixing the edge cases. If you guys test the sandboxes and help out, we might be able to catch some obvious bugs before the release.

Best, David

[HIT2022]

Let us know if there's a sandbox ready; happy to help test.

[rPr3v0t]

Yes let us know when it's ready i'm interested too :)

[AndreiMotinga]

@davidjerleke any chance to use this plugin now, even the active dev version?

[walton-alex]

Same here, I'd be happy to use an active dev version for now too. I appreciate the work @davidjerleke!

[davidjerleke]

I paused the development on this because I did some bug fixes which were released in v8.0.1 and v8.0.2. But they're released now so I will continue working on the fade plugin. Most things are in place but can't give an ETA of course because I don't have much spare time to begin with.

[sitoexpress]

@davidjerleke we're using splide in our projects and since it seems it's a dead end, we're thinking to move everything on Embla. A fade plugin would really make it the definitive js carousel!

[davidjerleke]

[!IMPORTANT]
This is NOT the finished product but a work in progress. Most things are in place but not everything yet.

React (last edit 2024-05-10)

• CodeSandbox
• App view

[meirroth]

@davidjerleke Looks perfect! Do you think it'll be possible to apply the lazy rendering solution discussed here while using this new plugin? Rendering only the slides in view is especially useful for performance when dealing with heavy content like images (note how in your example app above, all images are loaded even though only one is shown), custom components, or even videos where you want the player to be destroyed when it goes out of view.

[sarussss]

Hi @davidjerleke. I think we can modify function positionSlides

  function positionSlides() {
    const { scrollSnaps, slideRegistry } = emblaApi.internalEngine()
    const slides = emblaApi.slideNodes()
    scrollSnaps.forEach((scrollSnap, scrollSnapIndex) => {
      const slidesInSnap = slideRegistry[scrollSnapIndex]
      slidesInSnap.forEach((slideIndex) => {
        slides[slideIndex].style.transform = `translateX(${scrollSnap}px)`
      })
    })
  }

Replace

  function positionSlides() {
    emblaApi.slideNodes().forEach((slide, slideIndex) => {
      slide.style.transform = `translateX(${slideIndex * -100}%)`
    })
  }

What do you think, is this possible? Demo

[davidjerleke]

@sarussss thank you for your input 👍. My solution works with slides that are less than 100% wide too - They will be centered and also works when slidesToScroll: 'auto'. That's the motivation for my solution.

[sarussss]

@davidjerleke thank you for your feedback. I think it's not really necessary because when using fade, we will adjust the width in the parent element and fade only works well when there is only 1 slide in each viewport.

Don't care too much about these things, these are just some of my thoughts, because I don't understand Embla as deeply as you do, so if anything is incorrect, please forgive me.

P/S: Thanks for your hard work, the fade plugin is awesome.

Demo

[ItsFrankieD]

Out of curiosity, will the fade duration be adjustable? For both autoplay and next / previous trigger, I feel as though a duration adjustment is almost a necessity. Great work thus far!