Embla-carousel: Improve transition between last slide and first slide when loop true and parallax

[carlosmori]

Feature request is related to

• [x] The Vanilla JavaScript version
• [x] The React version
• [x] The Embla Carousel core (all versions)
• [ ] Documentation website
• [ ] Other

Is your feature request related to an issue?

Hey! I'm trying to make a carousel that uses parallax and loops. However, in the last slide and in the first slide I'm getting weird behavior that I don't know if it's possible to be fixed.

Describe the solution you'd like

I would like the carousel to behave the same way in all slides transitions.

Additional context

I created a Sandbox https://codesandbox.io/s/happy-bird-0fhwo with this example, but it applies to the one you provided in the docs as well

[davidcetinkaya]

Hi Carlos (@carlosmori),

Thank you for your feature request and the CodeSandbox 👍. At the time of writing, I haven't looked into what needs to be done in order to make the parallax example work with loop enabled. I guess I haven't prioritized it among all the other things to do. I'll look into it when I have the possibility to do so.

Thank you for your patience.

Best,
David

[davidcetinkaya]

Hi Carlos (@carlosmori),

Great news! It was much easier than I thought to implement parallax with loop enabled. I've updated the parallax CodeSandbox. Please check it out and let me know how it goes.

Best,
David

[carlosmori]

Thats Amazing David!!
Such wonderful work, congratulations for this carousel! and thanks you for the quick response :)

[davidcetinkaya]

Carlos (@carlosmori) it does work as expected right? Just want to confirm 🙂. Thanks!

[gavink97]

I will be looking into this when I get home.

What changed?

Thank you

On Fri, Mar 12, 2021 at 9:37 PM David @.*> wrote:

Carlos @.* https://github.com/carlosmori) it does work as
expected right? Just want to confirm 🙂. Thanks!

—
You are receiving this because you are subscribed to this thread.
Reply to this email directly, view it on GitHub
https://github.com/davidcetinkaya/embla-carousel/issues/153#issuecomment-797464180,
or unsubscribe
https://github.com/notifications/unsubscribe-auth/ASUQVJZWF5KX5BS4VBQWNZ3TDIDHXANCNFSM4Y4L5WVA
.

[davidcetinkaya]

For anyone interested, the CodeSandboxes for these can be found on the examples page. I'm also going to add the links here for convenience:

• Parallax Vanilla JavaScript
• Parallax React

[davidcetinkaya]

@gavink97 and @carlosmori, let me know when you've had the time to test this and if this works as intended.

Cheers,
David

[gavink97]

:) Yes! Loop true is working with parallax!

Looks great,
Gavin K

On Mar 13, 2021, at 4:45, David @.*> wrote:

@gavink97 https://github.com/gavink97 and @carlosmori https://github.com/carlosmori, let me know when you've had the time to test this and if this works as intended.

Cheers,
David

—
You are receiving this because you were mentioned.
Reply to this email directly, view it on GitHub https://github.com/davidcetinkaya/embla-carousel/issues/153#issuecomment-797713440, or unsubscribe https://github.com/notifications/unsubscribe-auth/ASUQVJ4OMXDEMYBBRNICMW3TDJVOJANCNFSM4Y4L5WVA.

[davidcetinkaya]

Thanks for confirming Gavin (@gavink97) 👍🏻.

Enjoy!

[carlosmori]

@davidcetinkaya Sure, I will refactor our old carousel with this one and I will let you know if I find something! Thanks David!

[carlosmori]

@davidcetinkaya Wanted to let you know that I could successfully migrate to this Carousel over the weekend and the experience was amazing.
Thank you so much for building such a wonderful, when we go live I can show you the final implementation!

[carlosmori]

@davidcetinkaya also I wanted to implement some resizing in the carousel that showed more slides towards the bigger sizes.

So mobile show only 2 slides, Tablet 3 and desktop( 1024px ) show 4 slides.

I accomplish this by changing the min-width propery in the embla__slide element and some media queries, I also changing the options (slidesToScroll) using css.

So each mobile will have min-width 50% , on Tablet Im getting min-width: 33% and in Desktop min-width: 25%.

I wanted to ask you , since Im getting some gaps in between the images until they reach the next breakpoint, how would you remove those gaps?
I need to maintain aspect ratio in the images as they resize. So its really difficult to accomplish both taking the full space of the slide and maintaining aspect ratio.
I dont know if I explained myself correctly , so forget about it if you didnt understand me xD

Again thank you for this piece of code, I really liked it!

[davidcetinkaya]

Hi Carlos (@carlosmori),

I don’t think this is related to any issues with the parallax setup. I would suggest that you create a CodeSandbox with your setup so I can understand why you’re getting the gaps. I need that to help you.

Best,
David