xiel / embla-carousel-wheel-gestures

wheel interactions for Embla Carousel
https://embla-carousel-wheel-gestures.xiel.dev/react.html
MIT License
57 stars 9 forks source link

How to import without using npm? #206

Closed tbqmax closed 1 month ago

tbqmax commented 2 months ago

I appreciate your understanding and patience as I'm still learning. I'm having trouble figuring out how to import this specific plugin without using npm, and I could really use some guidance.

For all other embla plugins, I've been able to download the code directly and import it successfully.

For example, with embla-carousel-fade I download the code from JSDELIVER into my local embla-fade.js file. Then, in another file, I import it like this:

import EmblaCarousel from "embla.js";
import ClassNames from "embla-fade.js";

customElements.define('my-embla', class MyEmbla extends HTMLElement { ... });

This approach works perfectly for me and I'm comfortable doing this way. However, I'm struggling to replicate this process with "embla-carousel-wheel-gestures" plugin. Could someone please provide some guidance or advice on how to achieve this?

Thank you so much for your help!

xiel commented 2 months ago

Hey @tbqmax

when u download & save the esm file from here, you should be able to import the plugin like that:

import { WheelGesturesPlugin } from 'embla-carousel-wheel-gestures.js'

The reason for that is that we are currently using a named export, instead of a default export. export{t as WheelGesturesPlugin}

You might also need this https://cdn.jsdelivr.net/npm/wheel-gestures@2.2.45/+esm file... as we are depending on that package. Then u would need to change the import in the embla-carousel-wheel-gestures.js file to that local file too.

Usually it would be recommended to just use a bundler/packager, so you dont have to do that kind of stuff ;)

Hope that helps ✌️