Firstly, thank you for a great library! I am absolutely in love with it.
This issues is not necessarily a bug report or feature request - more like a feedback for both sides.
I need to use Embla in a specific use case or format. I believe that I have been pretty successful with it so far.
Let me show and tell you, what it is about.
In an essence, I need slides that come outside the container of the carousel to stack under each other - on both sides. As the slides move "off the limits" they animate translate3d and scale transforms as well as an opacity property.
Nothing difficult, you would think, but still a day of work went into to get it just right.
Now, the Embla library is nicely written without a doubt. However, figuring out its "inner workings" is not a simple task. Specifically when it comes to the internalEngine() function and general structure of the API (as there is no real documentation). I struggled most with getting the right snap values in place i.e. scrollSnapList() function and "tying" with the scrollProgress(). My understanding is that these two functions are the core calculations for getting the slide positioning and subsequently their transitions/animations right and smooth.
I was wondering if you could take a look at the code and provide a feedback on the code and overall implementation. I am curious to see if there is a more cleaner or effective way of getting to the above use case of Embla carousel.
The script is unfortunately not dynamic when slide width changes i.e. .embla__slide CSS class and slidesPerView variable (only works with 2 slides in the "middle" at the moment)UPDATE - fixed now
I am quite unsure if oneSnap variable to calculate "distance" between two slides is correctly implemented, maybe there is a better approach?
Is there an engine helper for calculating when the slide is off limits (i.e. leftOffset/rightOffset vars in my case)?
When the slide width is changed
It isn't working correctly when the loop option is enabled in the current configuration. Moreover, I noticed when a container has grid display property instead of flex, the loop functionality is totally broken.
Any other suggestions and/or concerns would be greatly welcome.
I would be very happy for you to use it as one of the examples for the official documentation once the code is a bit polished.
stepanjakl
commented
2 years ago
Hi @davidjerleke,
Firstly, thank you for a great library! I am absolutely in love with it.
This issues is not necessarily a bug report or feature request - more like a feedback for both sides.
I need to use Embla in a specific use case or format. I believe that I have been pretty successful with it so far.
Let me show and tell you, what it is about.
In an essence, I need slides that come outside the container of the carousel to stack under each other - on both sides. As the slides move "off the limits" they animate
translate3dandscaletransforms as well as anopacityproperty.Nothing difficult, you would think, but still a day of work went into to get it just right.
Now, the Embla library is nicely written without a doubt. However, figuring out its "inner workings" is not a simple task. Specifically when it comes to the
internalEngine()function and general structure of the API (as there is no real documentation). I struggled most with getting the right snap values in place i.e.scrollSnapList()function and "tying" with thescrollProgress(). My understanding is that these two functions are the core calculations for getting the slide positioning and subsequently their transitions/animations right and smooth.I was wondering if you could take a look at the code and provide a feedback on the code and overall implementation. I am curious to see if there is a more cleaner or effective way of getting to the above use case of Embla carousel.
Here is the code: https://codesandbox.io/s/h7bkx1?file=/src/js/index.js
A few notes:
The script is unfortunately not dynamic when slide width changes i.e.UPDATE - fixed now.embla__slideCSS class andslidesPerViewvariable (only works with 2 slides in the "middle" at the moment)oneSnapvariable to calculate "distance" between two slides is correctly implemented, maybe there is a better approach?leftOffset/rightOffsetvars in my case)?loopoption is enabled in the current configuration. Moreover, I noticed when a container hasgriddisplay property instead offlex, the loop functionality is totally broken.I would be very happy for you to use it as one of the examples for the official documentation once the code is a bit polished.
I am looking forward to your answer :)