completed image carousel

tsr-kairi · Jul 10, 2021 · 33e1b8a · 33e1b8a
1 parent 9bd6033
commit 33e1b8a
Show file tree

Hide file tree

Showing 3 changed files with 144 additions and 0 deletions.
diff --git a/Day 35 - Image Carousel/app.js b/Day 35 - Image Carousel/app.js
@@ -0,0 +1,41 @@
+const imgs = document.getElementById("imgs");
+const leftBtn = document.getElementById("left");
+const rightBtn = document.getElementById("right");
+
+const img = document.querySelectorAll("#imgs img");
+
+let idx = 0;
+
+let interval = setInterval((run, 2500));
+
+function run() {
+  idx++;
+  changeImage();
+}
+
+function changeImage() {
+  if (idx > img.length - 1) {
+    idx = 0;
+  } else if (idx < 0) {
+    idx = img.length - 1;
+  }
+
+  imgs.style.transform = `translateX(${-idx * 500}px)`;
+}
+
+function ressetInterval() {
+  clearInterval(interval);
+  interval = setInterval(run, 2500);
+}
+
+rightBtn.addEventListener("click", () => {
+  idx++;
+  changeImage();
+  ressetInterval();
+});
+
+leftBtn.addEventListener("click", () => {
+  idx--;
+  changeImage();
+  ressetInterval();
+});
diff --git a/Day 35 - Image Carousel/index.html b/Day 35 - Image Carousel/index.html
@@ -0,0 +1,47 @@
+<!DOCTYPE html>
+<html lang="en">
+  <head>
+    <meta charset="UTF-8" />
+    <meta http-equiv="X-UA-Compatible" content="IE=edge" />
+    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
+    <link rel="stylesheet" href="./style.css" />
+    <title>Image | Carousel</title>
+  </head>
+  <body>
+    <div class="carousel">
+      <div class="image-container" id="imgs">
+        <img
+          src="https://images.unsplash.com/photo-1588629424594-b3a76a97fb73?ixid=MnwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8&ixlib=rb-1.2.1&auto=format&fit=crop&w=667&q=80"
+          alt="first image"
+        />
+
+        <img
+          src="https://images.unsplash.com/photo-1552611052-60b2c00a2be8?ixid=MnwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8&ixlib=rb-1.2.1&auto=format&fit=crop&w=626&q=80"
+          alt="second image"
+        />
+
+        <img
+          src="https://images.unsplash.com/photo-1484344958632-f7264ab71ecc?ixlib=rb-1.2.1&ixid=MnwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8&auto=format&fit=crop&w=682&q=80"
+          alt="third image"
+        />
+
+        <img
+          src="https://images.unsplash.com/photo-1597906379938-c1db1b85d3bd?ixid=MnwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8&ixlib=rb-1.2.1&auto=format&fit=crop&w=750&q=80"
+          alt="fourth image"
+        />
+
+        <img
+          src="https://images.unsplash.com/photo-1620198945119-49fd5dec8927?ixid=MnwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8&ixlib=rb-1.2.1&auto=format&fit=crop&w=667&q=80"
+          alt="fifth image"
+        />
+      </div>
+
+      <div class="buttons-container">
+        <button id="left" class="btn">Prev</button>
+        <button id="right" class="btn">Next</button>
+      </div>
+    </div>
+
+    <script src="./app.js"></script>
+  </body>
+</html>
diff --git a/Day 35 - Image Carousel/style.css b/Day 35 - Image Carousel/style.css
@@ -0,0 +1,56 @@
+*::after,
+*::before {
+  box-sizing: border-box;
+  margin: 0;
+  padding: 0;
+}
+
+body {
+  color: #fff;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  height: 100vh;
+  margin: 0;
+}
+
+img {
+  height: 500px;
+  width: 500px;
+  object-fit: cover;
+}
+
+.carousel {
+  box-shadow: 2px 2px 5px rgba(0, 0, 0, 0.3);
+  height: 530px;
+  width: 500px;
+  overflow: hidden;
+}
+
+.image-container {
+  display: flex;
+  transform: translateX(0);
+  transition: transform 0.5s ease-in-out;
+}
+
+.buttons-container {
+  display: flex;
+  justify-content: space-between;
+}
+
+.btn {
+  background-color: rebeccapurple;
+  color: #fff;
+  border: none;
+  padding: 0.5rem;
+  cursor: pointer;
+  width: 49.5%;
+}
+
+.btn:hover {
+  opacity: 0.9;
+}
+
+.btn:focus {
+  outline: none;
+}