rotating image

jephlandicho · jephlandicho · commit 300eea1e116f · 2024-04-05T09:00:53.000Z
diff --git a/projects/rotating-image-gallery/index.html b/projects/rotating-image-gallery/index.html
@@ -8,56 +8,7 @@
     <link rel="stylesheet" href="style.css" />
   </head>
   <body>
-    <div class="image-container">
-      <span style="--i: 1">
-        <div class="image-wrapper">
-          <img src="https://picsum.photos/id/237/300/200" />
-          <div class="description">Description 1</div>
-        </div>
-      </span>
-      <span style="--i: 2">
-        <div class="image-wrapper">
-          <img src="https://picsum.photos/id/23/300/200" />
-          <div class="description">Description 2</div>
-        </div>
-      </span>
-      <span style="--i: 3">
-        <div class="image-wrapper">
-          <img src="https://picsum.photos/id/48/300/200" />
-          <div class="description">Description 3</div>
-        </div>
-      </span>
-      <span style="--i: 4">
-        <div class="image-wrapper">
-          <img src="https://picsum.photos/id/12/300/200" />
-          <div class="description">Description 4</div>
-        </div>
-      </span>
-      <span style="--i: 5">
-        <div class="image-wrapper">
-          <img src="https://picsum.photos/id/59/300/200" />
-          <div class="description">Description 5</div>
-        </div>
-      </span>
-      <span style="--i: 6">
-        <div class="image-wrapper">
-          <img src="https://picsum.photos/id/160/300/200" />
-          <div class="description">Description 6</div>
-        </div>
-      </span>
-      <span style="--i: 7">
-        <div class="image-wrapper">
-          <img src="https://picsum.photos/id/370/300/200" />
-          <div class="description">Description 7</div>
-        </div>
-      </span>
-      <span style="--i: 8">
-        <div class="image-wrapper">
-          <img src="https://picsum.photos/id/478/300/200" />
-          <div class="description">Description 8</div>
-        </div>
-      </span>
-    </div>
+    <div class="image-container"></div>
     <div class="btn-container">
       <button class="btn" id="prev">Prev</button>
       <button class="btn" id="next">Next</button>
diff --git a/projects/rotating-image-gallery/index.js b/projects/rotating-image-gallery/index.js
@@ -1,3 +1,38 @@
+const imageDetails = [
+  {
+    url: "https://picsum.photos/id/91/367/267",
+    description: "Description 1"
+  },
+  {
+    url: "https://picsum.photos/id/96/367/267",
+    description: "Description 2"
+  },
+  {
+    url: "https://picsum.photos/id/88/367/267",
+    description: "Description 3"
+  },
+  {
+    url: "https://picsum.photos/id/90/367/267",
+    description: "Description 4"
+  },
+  {
+    url: "https://picsum.photos/id/88/367/267",
+    description: "Description 5"
+  },
+  {
+    url: "https://picsum.photos/id/58/367/267",
+    description: "Description 6"
+  },
+  {
+    url: "https://picsum.photos/id/55/367/267",
+    description: "Description 7"
+  },
+  {
+    url: "https://picsum.photos/id/48/367/267",
+    description: "Description 8"
+  }
+];
+
 const imageContainerEl = document.querySelector(".image-container");
 
 const prevEl = document.getElementById("prev");
@@ -16,7 +51,18 @@ nextEl.addEventListener("click", () => {
 });
 
 function updateGallery() {
+  const imagesHTML = imageDetails.map((detail, index) => `
+    <span style="--i: ${index + 1}">
+      <div class="image-wrapper">
+        <img src="${detail.url}" />
+        <div class="description">${detail.description}</div>
+      </div>
+    </span>
+  `).join("");
+
+  imageContainerEl.innerHTML = imagesHTML;
   imageContainerEl.style.transform = `perspective(1000px) rotateY(${x}deg)`;
+
   timer = setTimeout(() => {
     x = x - 45;
     updateGallery();
