Looping slider being cut off

[Fergie77]

I've been playing about with Embla having come from using keen-slider, it's been really easy to set up so thank you for that! I've just been having a bit of an issue with my slider looping. It does loop, but either side of the loop it's cut off until you reach the end and the slides repeat.

On the site I'm designing, I have a container for the slider of 1440px wide for laptop, which should conceal the cut off, but I'd like on larger screen sizes for the whole loop to be visible. Has anyone else done something like this?

My project link is here

https://preview.webflow.com/preview/nova-living-sandbox?utm_medium=preview_link&utm_source=designer&utm_content=nova-living-sandbox&preview=29bba499509ff5723c190dbdfbe9ec89&pageId=6478a06d99f941eb0514fe7f&workflow=preview

And the live site is here, I've just made a testing page for the slider itself so there's no confusion

https://nova-living-sandbox.webflow.io/embla-slider

This is basically what I'm trying to accomplish, on laptop size

And basically how it should look on desktop

At the moment on a larger screen it looks like this

[davidjerleke]

Hi @Fergie77,

For this to work on desktop the slide container has to be as wide as the screen on desktop devices. Embla is assuming that you’re covering any overflow outside its container because that is where slide positions are altered to create the loop effect. All examples in the documentation website clearly demonstrate this with the required HTML and CSS markup.

After making the container full width of the screen, you can set slide sizes to something less than the viewport, like 400px for example. But this isn’t optimal because:

• You need enough slides to fill the whole screen width. And what if the screen is big? Embla will fall back to loop: false when there aren’t enough slides to cover the loop effect. So it will probably look weird if this happens.

I would recommend you to reconsider this design choice.

Best,
David

[mishakupia]

agree with you