Basic carousel with vanilla js

arparvezz · Dec 10, 2023 · 6659253 · 6659253
commit 6659253
Show file tree

Hide file tree

Showing 7 changed files with 198 additions and 0 deletions.
diff --git a/app.js b/app.js
@@ -0,0 +1,80 @@
+let sliderImges = document.querySelectorAll(".slider__img");
+let leftIndicator = document.querySelector(".left__ind");
+let righttIndicator = document.querySelector(".right__ind");
+let activeImg = 0;
+let dotWrapper = document.querySelector(".dot__wrapper");
+let dots = document.querySelectorAll(".dot");
+
+// default image - active first image
+changeImg(0);
+
+// print dots by image count - dynamic
+function printDots(num) {
+  for (let i = 0; i < num; i++) {
+    let span = document.createElement("span");
+    span.classList.add("dot");
+    dotWrapper.appendChild(span);
+  }
+}
+printDots(sliderImges.length);
+// change image by clicking dots
+dots.forEach((value, ind) => {
+  value.addEventListener("click", function (event) {
+    changeImg(ind);
+  });
+});
+
+// left arrow click function
+leftIndicator.addEventListener("click", function (event) {
+  if (activeImg > 0) {
+    activeImg -= 1;
+    changeImg(activeImg);
+    activeDots(activeImg);
+  } else {
+    activeImg = sliderImges.length - 1;
+    changeImg(activeImg);
+    activeDots(activeImg);
+  }
+});
+
+// right arrow click function
+righttIndicator.addEventListener("click", function (event) {
+  if (activeImg < sliderImges.length - 1) {
+    activeImg += 1;
+    changeImg(activeImg);
+    activeDots(activeImg);
+  } else {
+    activeImg = 0;
+    changeImg(activeImg);
+    activeDots(activeImg);
+  }
+});
+
+// Change image by index
+function changeImg(showNumber) {
+  sliderImges.forEach((value, ind) => {
+    if (ind != showNumber) {
+      value.style.display = "none";
+    } else {
+      value.style.display = "";
+    }
+  });
+}
+
+// active dot and color by image index function
+function activeDots(indexNumber) {
+  let childs = dotWrapper.children;
+  [...childs].forEach((val, ind) => {
+    if (ind == indexNumber) {
+      val.style.backgroundColor = "black";
+    } else {
+      val.style.backgroundColor = "rgb(198, 198, 198)";
+    }
+  });
+}
+
+// Default active dot when load the content - dynamic 
+document.addEventListener("DOMContentLoaded", function () {
+  // dot indicator
+  activeDots(0);
+});
diff --git a/asset/bangladesh.ico b/asset/bangladesh.ico
diff --git a/asset/black-rock.jpg b/asset/black-rock.jpg
diff --git a/asset/door.jpg b/asset/door.jpg
diff --git a/asset/island.jpg b/asset/island.jpg
diff --git a/index.html b/index.html
@@ -0,0 +1,47 @@
+<!DOCTYPE html>
+<html lang="en">
+
+<head>
+  <meta charset="UTF-8">
+  <meta name="viewport" content="width=device-width, initial-scale=1.0">
+  <title>Basic Functional vanilla js carousel</title>
+  <link rel="shortcut icon" href="./asset/bangladesh.ico" type="image/x-icon">
+  <link rel="stylesheet" href="style.css">
+</head>
+
+<body>
+  <header class="container">
+    <h2>Basic Vanilla JS carousel</h2>
+  </header>
+  <div class="container">
+    <div class="slider__wrapper">
+      <!-- left indicator -->
+      <button class="left__ind">
+        <svg width="24" height="24" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
+          <path d="M15 6C15 6 9.00001 10.4189 9 12C8.99999 13.5812 15 18 15 18" stroke="#ffffff" stroke-width="1.5"
+            stroke-linecap="round" stroke-linejoin="round" />
+        </svg>
+      </button>
+      <!-- slider image wrapper -->
+      <div class="slider__images">
+        <!-- put your image here -->
+        <img src="./asset/black-rock.jpg" class="slider__img">
+        <img src="./asset/island.jpg" class="slider__img">
+        <img src="./asset/door.jpg" class="slider__img">
+      </div>
+      <!-- right indicator -->
+      <button class="right__ind">
+        <svg width="24" height="24" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
+          <path d="M9.00005 6C9.00005 6 15 10.4189 15 12C15 13.5812 9 18 9 18" stroke="#ffffff" stroke-width="1.5"
+            stroke-linecap="round" stroke-linejoin="round" />
+        </svg>
+      </button>
+    </div>
+    <div class="dot__wrapper">
+      <!-- dot appear here dynamically by js -->
+    </div>
+  </div>
+  <script src="./app.js"></script>
+</body>
+
+</html>
diff --git a/style.css b/style.css
@@ -0,0 +1,71 @@
+* {
+  margin: 0;
+  padding: 0;
+  box-sizing: border-box;
+}
+
+img {
+  max-width: 100%;
+  height: auto;
+}
+
+.container {
+  max-width: 1200px;
+  width: 90%;
+  margin: 0 auto;
+}
+
+header {
+  text-align: center;
+  padding: 10px;
+}
+
+/* slider css */
+.slider__wrapper {
+  max-width: 80%;
+  margin: 0 auto;
+  display: flex;
+  gap: 3px;
+  justify-content: space-between;
+  align-items: center;
+}
+
+button {
+  background-color: black;
+  color: white;
+  border: 0;
+  outline: 0;
+  /* padding: 5px 2px; */
+  padding-top: 4px;
+
+  border-radius: 5px;
+  font-family: inherit;
+  cursor: pointer;
+  transition: .3s ease-in-out;
+
+}
+
+button:hover {
+  background-color: rgb(37, 37, 37);
+}
+.dot__wrapper{
+  height: 20px;
+  width: 100%;
+  display: flex;
+  justify-content: center;
+  align-items: center;
+}
+.dot{
+  width: 10px;
+  height: 10px;
+  background-color: rgb(198, 198, 198);
+  border-radius: 50%;
+  display: inline-block;
+  margin: 0 4px;
+  cursor: pointer;
+}
+@media(min-width: 1000px) {
+  .slider__wrapper{
+    max-width: 70%;
+  }
+}