From 591fb64e36e4377ddaf3ea3d5f6faac3739cc577 Mon Sep 17 00:00:00 2001
From: NetMan <13informatyka14@gmail.com>
Date: Mon, 19 Feb 2024 14:19:54 +0100
Subject: [PATCH] Initial commit, completed project

---
 .gitignore   |  3 ++
 README.md    | 41 +++++++++++++++++++++++++
 index.js     | 85 ++++++++++++++++++++++++++++++++++++++++++++++++++++
 package.json | 27 +++++++++++++++++
 style.css    | 58 +++++++++++++++++++++++++++++++++++
 5 files changed, 214 insertions(+)
 create mode 100644 .gitignore
 create mode 100644 README.md
 create mode 100644 index.js
 create mode 100644 package.json
 create mode 100644 style.css

diff --git a/.gitignore b/.gitignore
new file mode 100644
index 0000000..b8c1505
--- /dev/null
+++ b/.gitignore
@@ -0,0 +1,3 @@
+node_modules
+node_modules/
+node_modules/*
\ No newline at end of file
diff --git a/README.md b/README.md
new file mode 100644
index 0000000..242ed19
--- /dev/null
+++ b/README.md
@@ -0,0 +1,41 @@
+# odin-simple-image-slider
+
+Simple image slider - slides through images
+
+My third npm package with the-odin-project
+
+## usage
+
+install: `npm i odin-simple-image-slider`
+
+import in your project:
+
+`import imageSlider from "odin-simple-image-slider"`
+
+the default style is at `./node_modules/odin-simple-image-slider/style.css` and is imported at `index.js` in the same location
+
+### syntax
+
+`imageSlider(...images)`
+
+### example
+
+```
+import imageSlider from "./simple-image-slider/index.js";
+import Grass from './grass.jpg';
+import Snow from './snow.jpg';
+import Pc from './pc.jpg';
+import Desert from './desert.jpg';
+
+
+const app = document.querySelector('#app');
+
+app.append(imageSlider(Grass, Snow, Pc, Desert));
+```
+
+it returns a dom node that you can append using append/appendChild
+
+## license
+
+ISC
+
diff --git a/index.js b/index.js
new file mode 100644
index 0000000..012764e
--- /dev/null
+++ b/index.js
@@ -0,0 +1,85 @@
+import "./style.css"
+
+import { createElement, ChevronRight, ChevronLeft, Dot } from 'lucide';
+
+export default function imageSlider(...images) {
+    const imageSliderHTML = document.createElement("div");
+    imageSliderHTML.classList.add('image-slider');
+
+    const imageContainer = document.createElement("div");
+    imageContainer.classList.add("slider-image-container");
+    imageContainer.style.cssText = `
+    --translate-by: -0vw;
+    transform: translateX(var(--translate-by));
+    `;
+
+    images.forEach(image => {
+        const element = new Image();
+        element.src = image;
+        element.classList.add("slider-image");
+        imageContainer.append(element)
+    })
+    imageSliderHTML.append(imageContainer);
+
+    const left = createElement(ChevronLeft);
+    left.classList.add("slider-btn-left", "slider-btn");
+
+    const right = createElement(ChevronRight);
+    right.classList.add("slider-btn-right", "slider-btn");
+    imageSliderHTML.append(left, right);
+
+    function updateDots() {
+        let currentPic = -parseInt(imageContainer.style.getPropertyValue('--translate-by')) / 100;
+        dots.childNodes.forEach(dot => {
+            dot.style.stroke = "gray";
+        })
+        dots.children[currentPic].style.stroke = "white";
+    }
+
+    left.addEventListener("click", () => {
+        clearInterval(myInterval);
+        let currentPic = -parseInt(imageContainer.style.getPropertyValue('--translate-by')) / 100;
+        if (currentPic <= 0) {
+            imageContainer.style.setProperty('--translate-by', `-${images.length-1}00vw`)
+        } else {
+            imageContainer.style.setProperty('--translate-by', `-${currentPic - 1}00vw`)
+        }
+        updateDots();
+        myInterval = setInterval(next, 6000);
+    })
+
+    function next() {
+        clearInterval(myInterval);
+        let currentPic = -parseInt(imageContainer.style.getPropertyValue('--translate-by')) / 100;
+        if (currentPic + 1 > images.length - 1) {
+            imageContainer.style.setProperty('--translate-by', `-0vw`)
+        } else {
+            imageContainer.style.setProperty('--translate-by', `-${currentPic + 1}00vw`)
+        }
+        updateDots();
+        myInterval = setInterval(next, 6000);
+    }
+
+    right.addEventListener("click", next)
+    
+    let myInterval = setInterval(next, 6000);
+
+    const dots = document.createElement("div");
+    dots.classList.add("dots-contain")
+
+    for (let i in images) {
+        const dot = createElement(Dot);
+        dot.classList.add("slider-dot");
+        dot.addEventListener("click", () => {
+            imageContainer.style.setProperty('--translate-by', `-${i}00vw`) 
+            updateDots(i);
+        })
+        dots.append(dot);
+    }
+
+    imageSliderHTML.append(dots);
+
+    updateDots();
+
+    return imageSliderHTML;
+}
\ No newline at end of file
diff --git a/package.json b/package.json
new file mode 100644
index 0000000..54b6889
--- /dev/null
+++ b/package.json
@@ -0,0 +1,27 @@
+{
+  "name": "odin-simple-image-slider",
+  "version": "1.0.0",
+  "description": "Simple image slider",
+  "main": "index.js",
+  "scripts": {
+    "test": "echo \"Error: no test specified\" && exit 1"
+  },
+  "keywords": [
+    "image",
+    "slider",
+    "simple",
+    "js",
+    "html",
+    "css",
+    "theodinproject"
+  ],
+  "author": "NetMan",
+  "license": "ISC",
+  "dependencies": {
+    "lucide": "^0.331.0"
+  },
+  "repository": {
+    "type": "git",
+    "url": "https://git.638626.xyz/tod/odin-simple-image-slider.git"
+  }
+}
diff --git a/style.css b/style.css
new file mode 100644
index 0000000..54def7c
--- /dev/null
+++ b/style.css
@@ -0,0 +1,58 @@
+.image-slider {
+    overflow: hidden;
+    height: 100dvh;
+    width: 100vw;
+}
+
+.slider-image-container {
+    height: 100%;
+    min-width: 100%;
+    display: flex;
+    flex-direction: row;
+    transition: all 0.5s ease-in-out;
+}
+
+.slider-btn {
+    position: absolute;
+    top: 50%;
+    transform: translateY(-50%);
+    cursor: pointer;
+    background: #000000aa;
+    border-radius: 20px;
+    padding: 2px;
+    stroke: white;
+}
+
+.slider-btn-left {
+    left: 10px;
+}
+
+.slider-btn-right {
+    right: 10px;
+}
+
+.slider-image {
+    display: block;
+    flex: 0 0 100vw;
+    max-width: 100vw;
+    height: auto !important;
+    object-fit: cover;
+}
+
+.dots-contain {
+    display: flex;
+    flex-direction: row;
+    justify-content: center;
+    position: absolute;
+    bottom: 10px;
+    left: 50%;
+    transform: translateX(-50%);
+    background: #000000aa;
+    border-radius: 20px;
+}
+
+.slider-dot {
+    cursor: pointer;
+    transform: scale(1.5);
+    stroke: white;
+}
\ No newline at end of file