davidjerleke / embla-carousel

A lightweight carousel library with fluid motion and great swipe precision.
https://www.embla-carousel.com
MIT License
5.39k stars 166 forks source link

How to implement a working prev/next button ? #621

Closed escapingSamsara closed 7 months ago

escapingSamsara commented 8 months ago

I am working with this library for some days now and i LOVE it, but the functionalities are more trial and error than predictable for me.

I was trying to implement the prev next button from the docs etc, but it doesnt work at all (in sveltekit),

this is the base code i am using where i want to implement buttons to control the slides... Screenshot from 2023-11-03 21-16-43

if someone has help, i would be very happy !

sarussss commented 8 months ago

You can refer here, I don't see this implementation in your code. Another thing to note is that questions like this should be posted in the discussions section. Axample. Hope it's useful to you.

davidjerleke commented 8 months ago

Thanks for the help @sarussss đź‘Ť,

@escapingSamsara thank you for your question. As @sarussss mentioned, please always start with creating a new discussion instead of an issue.

Unfortunately, Svelte examples haven't been added to the docs yet (except getting started). And the guides section will be rewritten from scratch when I have the time to do so.

However, until then you can check this CodeSandbox out.

Best, David

escapingSamsara commented 8 months ago

Hey David ! Sorry for not creating a discussion ! Will do the next time something comes up!

Thanks for the CodeSandbox. Would love to see some codeboxes for the other features on embla carousel tailored for sveltekit aswell, since i really like the library !

One question just out of initial confusion: What are the utils.js and embla-carousel-reactive-utils,js and emblaCarousel.js files needed for ? It seems to work without them inside my project and inside the codesandbox aswell.

If anyone else wants some thing to use and work with, i created a MINI demo for embla carousel possibilities in sveltekit with 3 carousel types (including the arrow button example), i was able to get to work up to now, wanted it for my own documentation but thought, why not just share it :)

https://github.com/escapingSamsara/embla-components-svelte-showcase

davidjerleke commented 8 months ago

Hi @escapingSamsara,

Sorry for not creating a discussion ! Will do the next time something comes up!

No worries. Thanks for understanding.

Would love to see some codeboxes for the other features on embla carousel tailored for sveltekit aswell, since i really like the library!

I know. I think more people agree. The limitation here is that with a few exceptions, I’m the sole maintainer of this library working on it in my spare time, which is very limited. Sometimes I get donations and that helps me spend some extra time on this project. And sometimes people contribute which also frees up time. I will do my best but can’t give guarantees about how and when 🙂.

One question just out of initial confusion: What are the utils.js and embla-carousel-reactive-utils,js and emblaCarousel.js files needed for ? It seems to work without them inside my project and inside the codesandbox aswell.

Good question! They’re not needed anymore and are artifacts from when I was drafting v8 at an early stage, which is now in RC (release candidate) version 14 by the way. So the stable v8 is just around the corner and won’t get any significant changes. I will clean up the sandbox when I get the chance.

If anyone else wants some thing to use and work with, i created a MINI demo for embla carousel possibilities in sveltekit with 3 carousel types (including the arrow button example), i was able to get to work up to now, wanted it for my own documentation but thought, why not just share it :)

That’s really great. I’m sure that Svelte devs would love to have at least some examples to get the idea of how to work with a DIY library like Embla. Thank you 👍🏻.

Best, David