Feature Request: Preload Next and Previous Slides in Loop Mode (incorrect setup)

[0xtlt]

Is your feature request related to an issue?

• While using Embla Carousel with the loop feature enabled, I am facing an issue where as I slide through slides 1, 2, 3, 4, 5, it works fine, but when it loops back, slide 1 only appears when it's in the container. The expected behavior is for slide 1 to be preloaded into position before it comes into view, ensuring a seamless transition as the slides loop around. A detailed example illustrating this issue can be found here.

Describe the solution you'd like

• I propose an option be added to the Embla Carousel settings that allows for preloading a specified number of slides ahead and behind the current slide while in loop mode, to ensure a smooth transition as the slides loop around. Example:

const embla = EmblaCarousel(emblaNode, {
  loop: true,
  preloadSlides: 2,
  // other options...
});

In this setup, preloadSlides: 2 would mean that two slides ahead and two slides behind the current slide are preloaded into position, ensuring a smooth transition as the slides loop around.

Additional context

• The issue arises when looping from slide 5 to slide 1, where slide 1 isn't preloaded into position, causing it to only appear once it's in the container. A seamless transition is expected as it loops back to slide 1.

I have been using Embla Carousel extensively and it's by far the best carousel library I have come across. The flexibility and performance it offers are unparalleled. However, having the ability to preload slides in a loop would enhance the user experience significantly, especially in scenarios similar to the one I am facing. Thank you for considering this feature request.

[davidjerleke]

Hi @0xtlt,

Thank you for your question. As stated in the contribution guidelines, please create a new discussion when you want to ask something before jumping into issues. You can copy paste the issue description to the discussion.

I don't think it's clear what you want to do when checking your repository out so please create a CodeSandbox that clearly demonstrates what you want to achieve or share a link to a carousel setup (using a different library) that already does this.

Thank you for understanding.

Best, David

[davidjerleke]

@0xtlt let me know if you're interested in pursuing this when you've read my response.

[davidjerleke]

@0xtlt I will delete this issue soon if you don’t respond.

[sarussss]

Hi @davidjerleke,

I'm following this article, this is an example I followed the author of this article, I look forward to receiving your feedback.

https://codesandbox.io/s/embla-carousel-loop-vanilla-forked-jdwhy3 https://tppr.me/2KeXg

"The issue arises when looping from slide 5 to slide 1, where slide 1 isn't preloaded into position, causing it to only appear once it's in the container. "

[davidjerleke]

Thanks for the additional details @sarussss 👍.

I think I have a pretty good picture of what you and @0xtlt are doing wrong now. Embla doesn't hide slides and load them as you scroll. Your problem is caused by a faulty markup and CSS setup. You're setting overflow: hidden; on a container of your own choice and therefore you don't follow the required bare minimum setup properly. There's no surprise in why stuff isn't working as intended.

The docs make it very clear that the bare minimum setup has to be:

A minimal setup requires an overflow wrapper and a scroll container. Start by adding the following HTML structure to your carousel:

<div class="embla">
  <div class="embla__container">
    <div class="embla__slide">Slide 1</div>
    <div class="embla__slide">Slide 2</div>
    <div class="embla__slide">Slide 3</div>
  </div>
</div>

The wrapping element with the classname embla is needed to cover the scroll overflow. The element with the container classname is the scroll body that scrolls the slides. Continue by adding the following CSS to these elements:

.embla {
  overflow: hidden;
}
.embla__container {
  display: flex;
}
.embla__slide {
  flex: 0 0 100%;
  min-width: 0;
}

🚨 Now. If you want the previous and next slide to be visible (peek), don't move overflow: hidden; to another container of your own choice (breaking the required setup). Just set slide sizes to something less than 100%. For example, 80% and you're good to go:

.embla__slide {
- flex: 0 0 100%; // Remove this
+ flex: 0 0 80%; // Add this
  min-width: 0;
}

@sarussss here's your sandbox but I've corrected your faulty markup so it's working as intended now.

Best, David

[sarussss]

Hi @davidjerleke , Thank you very much for this great answer, and I'm really sorry I had some events recently and couldn't respond to you as soon as possible.

[davidjerleke]

@sarussss thank you for getting back to me. It seems like my explanation and sandbox demonstration solved your problem?

If yes, I’m going to close this issue, because @0xtlt isn’t responding at all.

Best, David

[sarussss]

Yes, my problem is solved. @davidjerleke thank you.