@jocampo3/slider 1.0.1

package/README.md

@@ -0,0 +1 @@
+# slider-js

package/index.js

@@ -0,0 +1,51 @@
+export default class Slider {
+  constructor(slider, interval) {
+    this.slider = slider;
+    this.slides = this.slider.children;
+    this.index = 0;
+    this.interval = interval;
+    this.timer = null;
+    this.restartTimer();
+    this.addListeners();
+  }
+
+  slideWidth() {
+    return this.slider.clientWidth;
+  }
+
+  restartTimer() {
+    clearInterval(this.timer);
+    this.timer = setInterval(() => this.next(), this.interval);
+  }
+
+  goTo(i) {
+    this.index = (i + this.slides.length) % this.slides.length;
+    this.slider.scrollTo({ left: this.index * this.slideWidth(), behavior: 'smooth' });
+    this.restartTimer();
+  }
+
+  next() {
+    this.goTo(this.index + 1);
+  }
+
+  getCurrentIndex() {
+    return Math.round(this.slider.scrollLeft / this.slideWidth());
+  }
+
+  addListeners() {
+    this.slider.addEventListener('scroll', () => {
+      this.index = this.getCurrentIndex();
+    })
+    this.slider.addEventListener('mouseenter', () => {
+      clearInterval(this.timer);
+    });
+
+    this.slider.addEventListener('mouseleave', () => {
+      this.restartTimer();
+    });
+
+    window.addEventListener('resize', () => {
+      this.goTo(this.index);
+    });
+  }
+}

package/package.json

@@ -0,0 +1,31 @@
+{
+  "name": "@jocampo3/slider",
+  "version": "1.0.1",
+  "description": "Simple, reusable content carousel. Built with CSS and minimal JavaScript.",
+  "keywords": [
+    "slider"
+  ],
+  "homepage": "https://github.com/jocampo3/slider-js#readme",
+  "bugs": {
+    "url": "https://github.com/jocampo3/slider-js/issues"
+  },
+  "repository": {
+    "type": "git",
+    "url": "git+https://github.com/jocampo3/slider-js.git"
+  },
+  "license": "ISC",
+  "author": "Jose Ocampo",
+  "type": "commonjs",
+  "main": "index.js",
+  "exports": {
+    ".": "./index.js",
+    "./styles.css": "./styles.css"
+  },
+  "files": [
+    "index.js",
+    "styles.css"
+  ],
+  "scripts": {
+    "test": "echo \"Error: no test specified\" && exit 1"
+  }
+}

package/styles.css

@@ -0,0 +1 @@
+.slideshow,.slideshow>* a{width:100%;height:100%;display:flex}a{text-decoration:none}.slideshow{overflow-x:scroll;overflow-y:hidden;scroll-snap-type:x mandatory;overscroll-behavior-x:contain;scrollbar-width:none}.slideshow::-webkit-scrollbar{display:none}.slideshow:hover{scroll-behavior:smooth}.slideshow>*{position:relative;scroll-snap-align:start;flex-shrink:0;width:100%;height:100%}.slideshow>* a{align-items:center;justify-content:center;-webkit-tap-highlight-color:transparent}.slideshow a>*{max-width:100%;max-height:100%;object-fit:contain;z-index:1}.slideshow a:focus-visible{outline:0}.slideshow a:after,.slideshow a:before{z-index:2;content:"";display:block;position:absolute;top:0;bottom:0;width:calc(50% + 4vw)}.slideshow a:before{left:calc(-1 * calc(50% + 4vw))}.slideshow a:after{right:calc(-1 * calc(50% + 4vw))}.slideshow :first-child a:before,.slideshow :last-child a:after{display:none}