diff --git a/docs/docs/index.html b/docs/docs/index.html index f055751..4955a30 100644 --- a/docs/docs/index.html +++ b/docs/docs/index.html @@ -208,7 +208,22 @@

Additional installation options

Install with yarn

yarn add swiffy-slider
+

Load Swiffy slider using webpack, ESBuild and other build tools.
+ NOTE: Swiffy slider is an ES Module and you need a supported processing ECMAScript compiler - i.e. webpack 5+ etc. +

+ +

+// import Swiffy Slider JS
+import { swiffyslider } from 'swiffy-slider'
+window.swiffyslider = swiffyslider;
+
+window.addEventListener("load", () => {
+    window.swiffyslider.init();
+});
 
+// import Swiffy Slider CSS
+import "swiffy-slider/css"
+
@@ -648,17 +663,26 @@

Javascript API

Javascript loading and binding

-

oad Swiffy slider using webpack, ESBuild and other build tools. In your index.js (or whatever you call it).
+

Load Swiffy slider using webpack, ESBuild and other build tools. In your index.js (or whatever you call it).
NOTE: Swiffy slider is an ES Module and you need a supported processing ECMAScript compiler - i.e. webpack 5+ etc.


+// import Swiffy Slider JS
 import { swiffyslider } from 'swiffy-slider'
 window.swiffyslider = swiffyslider;
 
 window.addEventListener("load", () => {
     window.swiffyslider.init();
 });
+
+// import Swiffy Slider CSS
+import "swiffy-slider/css"
+
+ +

+// import Swiffy Slider src CSS unminified
+import "swiffy-slider/src/swiffy-slider.css"
 

Avoid autobinding by adding data-noinit attribute on the script tag and then attach the slider manually

diff --git a/package.json b/package.json index 94c1007..c1adc20 100644 --- a/package.json +++ b/package.json @@ -10,12 +10,15 @@ ".": { "import": "./src/swiffy-slider.esm.js" }, + "./css": { + "import": "./dist/css/swiffy-slider.min.css" + }, "./src/swiffy-slider.css": { "import": "./src/swiffy-slider.css" } }, - "style": "./src/swiffy-slider.css", - "browser": "./dist/js/swiffy-slider.min.js", + "style": "dist/css/swiffy-slider.min.css", + "browser": "dist/js/swiffy-slider.min.js", "files": [ "dist/{css,js}/*.{css,js,map}", "src/*.{css,js}" diff --git a/readme.md b/readme.md index 9e2249d..a4a6cdb 100644 --- a/readme.md +++ b/readme.md @@ -110,6 +110,22 @@ Swiffy Slider script automatically binds to all `.swiffy-slider` instances - Install with [npm](https://www.npmjs.com/): `npm install swiffy-slider` - Install with [yarn](https://yarnpkg.com/): `yarn add swiffy-slider` +Loading (ESM) + +```javascript +// import Swiffy Slider JS +import { swiffyslider } from 'swiffy-slider' +window.swiffyslider = swiffyslider; + +window.addEventListener("load", () => { + window.swiffyslider.init(); +}); + +// import Swiffy Slider CSS +import "swiffy-slider/css" + +``` + Read the [Getting started page](https://www.swiffyslider.com/docs/) for examples, configuration options and a visual configurator. ## Features @@ -614,12 +630,21 @@ Load Swiffy slider using webpack, ESBuild and other build tools. In your index.j NOTE: Swiffy slider is an ES Module and you need a supported processing ECMAScript compiler - i.e. webpack 5+ etc. ```javascript +// import Swiffy Slider JS import { swiffyslider } from 'swiffy-slider' window.swiffyslider = swiffyslider; window.addEventListener("load", () => { window.swiffyslider.init(); }); + +// import Swiffy Slider CSS +import "swiffy-slider/css" + +``` +```css +// import Swiffy Slider src CSS unminified +import "swiffy-slider/src/swiffy-slider.css" ``` Avoid autobinding by adding `data-noinit` attribute on the script tag and then attach the slider manually