Merge pull request #30 from dynamicweb/29-standard-sass-and-css-impor…

…t-doesnt-seem-to-be-working

Add /css to exports for shorthand css + update doc

docs/docs/index.html

@@ -208,7 +208,22 @@ <h2 id="additional-installation-options">Additional installation options</h2>
                                 <p>Install with <a href="https://yarnpkg.com/">yarn</a></p>
                                 <pre><code>yarn add swiffy-slider</code></pre>
 
+                                <p>Load Swiffy slider using webpack, ESBuild and other build tools. <br>
+                                    <span class="badge bg-primary">NOTE:</span> Swiffy slider is an ES Module and you need a supported processing ECMAScript compiler - i.e. webpack 5+ etc.
+                                </p>
+
+                                <pre><code class="language-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"
+</code></pre>
                             </section>
 
                             <section>
@@ -648,17 +663,26 @@ <h2>Javascript API</h2>
 
                                 <h3 id="javascript-loading-and-binding">Javascript loading and binding</h3>
 
-                                <p>oad Swiffy slider using webpack, ESBuild and other build tools. In your index.js (or whatever you call it). <br>
+                                <p>Load Swiffy slider using webpack, ESBuild and other build tools. In your index.js (or whatever you call it). <br>
                                     <span class="badge bg-primary">NOTE:</span> Swiffy slider is an ES Module and you need a supported processing ECMAScript compiler - i.e. webpack 5+ etc.
                                 </p>
 
                                 <pre><code class="language-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"
+</code></pre>
+
+                                <pre><code class="language-css">
+// import Swiffy Slider src CSS unminified
+import "swiffy-slider/src/swiffy-slider.css"
 </code></pre>
 
                                 <p>Avoid autobinding by adding <code>data-noinit</code> attribute on the script tag and then attach the slider manually</p>

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}"

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