adding

example/index.html

@@ -18,13 +18,13 @@
                 </h1>
             </div>
             <div class="bar__main justify-end">
-                <a class="button button--small m-left-sm-3 m-bottom-0" href="https://gitea.node001.net/tiny-components/notification" rel="noopener" target="_blank">
+                <a class="button button--small m-left-sm-3 m-bottom-0" href="https://gitea.node001.net/tiny-components/slider" rel="noopener" target="_blank">
                     Gitea
                     <svg class="m-left-3 icon fill-text" aria-hidden="true">
                         <use xlink:href="/symbol-defs.svg#icon-gitea"></use>
                     </svg>
                 </a>
-                <a class="button button--small m-left-sm-3 m-bottom-0" href="https://gitea.node001.net/tiny-components/notification" rel="noopener" target="_blank">
+                <a class="button button--small m-left-sm-3 m-bottom-0" href="https://gitea.node001.net/tiny-components/slider" rel="noopener" target="_blank">
                     Github
                     <svg class="m-left-3 icon fill-text" aria-hidden="true">
                         <use xlink:href="/symbol-defs.svg#icon-github"></use>

example/spritemap.js

@@ -1,13 +1 @@
-(self["webpackChunk_tiny_components_slider"] = self["webpackChunk_tiny_components_slider"] || []).push([["spritemap"],{
+(self.webpackChunk_tiny_components_slider=self.webpackChunk_tiny_components_slider||[]).push([[355],{256:()=>{}}]);
-
-/***/ "?c20d":
-/*!******************************!*\
-  !*** spritemap-dummy-module ***!
-  \******************************/
-/***/ (() => {
-
-
-
-/***/ })
-
-}]);

src/mixin.js

@@ -72,24 +72,28 @@ export default {
 
         // getting current max
         const max = this.state.max
+        const element = this.$('.' + this.state.classes.item)
 
-        // setting max to show visible
+        if (element) {
-        this.state.max = 0
-        this.state.width = this.$('.' + this.state.classes.item).offsetWidth
 
-        // check how many elements can visible in element
+            // setting max to show visible
-        this.$$('.' + this.state.classes.item).forEach((element, index) => {
+            this.state.max = 0
-            if (element.offsetLeft < this.root.offsetWidth) {
+            this.state.width = element.offsetWidth
-                this.state.max++;
-            }
-        })
 
-        // change position to fit new max value
+            // check how many elements can visible in element
-        const value = Math.abs(this.state.max - max)
+            this.$$('.' + this.state.classes.item).forEach((element, index) => {
+                if (element.offsetLeft < this.root.offsetWidth) {
+                    this.state.max++;
+                }
+            })
 
-        // @TODO check this, at 0 it makes me mad
+            // change position to fit new max value
-        if (this.state.position >= value && this.state.position > 1) {
+            const value = Math.abs(this.state.max - max)
-            this.state.position -= value
+
+            // @TODO check this, at 0 it makes me mad
+            if (this.state.position >= value && this.state.position > 1) {
+                this.state.position -= value
+            }
         }
     },
 

webpack.mix.js

@@ -67,6 +67,7 @@ mix
         extend: {
             content: [
                 path.join(__dirname, 'src/**.riot'),
+                path.join(__dirname, 'src/**.js'),
                 path.join(__dirname, 'example/index.html')
             ]
         }