Settings for examples are needed

[DominiqueVial]

Without settings next to each example I am afraid Embla is unusable but in very sample use cases. For example as a user I want to use Embla with thumbnail navigation. There is an example for it but no settings associated.

So I think adding detailed settings will be a huge improvement in this great piece of code !

😀

[davidjerleke]

Hello @DominiqueVial,

Thank you for your request. CodeSandboxes for each example are on their way! The documentation pages are brand new so give me some time to update it with useful code links 😉.

Best,
David

[DominiqueVial]

OK @davidcetinkaya

I give you the time!
I am currently polishing the next version of my artistic website, using another carousel but I keep an eye on Embla.

Best,

Dominique

[davidjerleke]

I will let you know when I have something @DominiqueVial 🙂.

Best,
David

[DarceyLloyd]

bump...

Nice examples, but only installation page has code template that is usable. Tried to view source on them but you got some build process going on for full page js render so that's out the window.... angular? react? vue? custom? Other than inspect element and script hunting in dev tools it's a no go... Look forward to docs / template pages with usable source available.

[davidjerleke]

Hello Darcey (@DarceyLloyd),

As discussed in this issue, examples are on their way. In the meantime, if you want to get started with some basic setups, take a look at these CodeSandboxes:

• Vanilla JS setup with dot & arrow nav
• React setup with dot & arrow nav

Currently, Embla Carousel supports vanilla JavaScript and React usages.

Keep an eye on this issue or hit the watch button if you want to be notified when the new code examples are published.

The documentation page is built with React.

Kindly
David

[DarceyLloyd]

Nice 1 Dave...

I've already got an implementation of the carousel running via vanilla JS ES6+ webpack babel project, I wanted to implement the carousel with the square thumbnail and tracking that, could have hooked into 2 embla carousels and told them to scroll to n but didn't have time to trial and error.

But yep, will keep an eye out for updates.

And thanks for the links.

Keep up the great work :)

Code on :)

[davidjerleke]

Hello again @DominiqueVial ,

Which variant of Embla are you using? Vanilla-JS or React?

Kindly,
David

[davidjerleke]

Hello again Darcey (@DarceyLloyd),

The vanilla thumbnail CodeSandbox is ready. Click on the Edit Code link on the examples page.

Let me know if it helps!

Best,
David

[DarceyLloyd]

Hi Dave,

RE: Vanilla or React
I'm using embla on woocommerce single item shop pages, so it's plain old vanilla js. I'm generating a json string of data via php for parsing via js which in turn generates the DOM structures for emblad to use, then I initialise embla.

RE: Example code
Excellent and looks good! As soon as I get a bit of time to revisit the woocommerce single item shop page I will give it a go.

Thanks

Darcey

[davidjerleke]

@DominiqueVial any updates on this?

Kindly,
David

[DominiqueVial]

Hi Dave,

I don't use Embla for now. My plan is to use it on Kirby, with vanilla JavaScript.

;-)

[davidjerleke]

I see @DominiqueVial, thanks. When you’re ready, you can check out the vanilla thumbnail example as described here.

[davidjerleke]

The vanilla JavaScript examples are in place. React CodeSandboxes are next up.

[davidjerleke]

@DominiqueVial and @DarceyLloyd I'm closing this because I've added CodeSandbox links to every example on the documentation page. Enjoy!

[davidjerleke]

Hello Nick (@ndimatteo),

The React Autoplay CodeSandbox as we discussed some time ago in this issue is ready. Scroll down to the bottom of the page on the examples page here if you're interested.

Please note that the React package has moved into the core library as described in this issue.

Kindly,
David

[RoyiAvital]

@davidjerleke, For me, as unexperienced Hugo user, the Vanilla JS doesn't make sense.
It loads a module which is available locally yet I can't understand how to get it.

Could you please generate examples using a single CSS file for the slider and the CDN link you mention?

Thank You.

[davidjerleke]

Thank you for your question @RoyiAvital.
No, sorry. I'm not planning to add CodeSandbox examples using CDN only.

[RoyiAvital]

Could you make the module file available for download?
As they are implied by CodeSandbox but are not seen.