Skip to content

Commit 300eea1

Browse files
jephlandichojephlandicho
committed
rotating image
1 parent fc72bf7 commit 300eea1

File tree

2 files changed

+47
-50
lines changed

2 files changed

+47
-50
lines changed

‎projects/rotating-image-gallery/index.html

Lines changed: 1 addition & 50 deletions
Original file line numberDiff line numberDiff line change
@@ -8,56 +8,7 @@
88
<link rel="stylesheet" href="style.css" />
99
</head>
1010
<body>
11-
<div class="image-container">
12-
<span style="--i: 1">
13-
<div class="image-wrapper">
14-
<img src="https://picsum.photos/id/237/300/200" />
15-
<div class="description">Description 1</div>
16-
</div>
17-
</span>
18-
<span style="--i: 2">
19-
<div class="image-wrapper">
20-
<img src="https://picsum.photos/id/23/300/200" />
21-
<div class="description">Description 2</div>
22-
</div>
23-
</span>
24-
<span style="--i: 3">
25-
<div class="image-wrapper">
26-
<img src="https://picsum.photos/id/48/300/200" />
27-
<div class="description">Description 3</div>
28-
</div>
29-
</span>
30-
<span style="--i: 4">
31-
<div class="image-wrapper">
32-
<img src="https://picsum.photos/id/12/300/200" />
33-
<div class="description">Description 4</div>
34-
</div>
35-
</span>
36-
<span style="--i: 5">
37-
<div class="image-wrapper">
38-
<img src="https://picsum.photos/id/59/300/200" />
39-
<div class="description">Description 5</div>
40-
</div>
41-
</span>
42-
<span style="--i: 6">
43-
<div class="image-wrapper">
44-
<img src="https://picsum.photos/id/160/300/200" />
45-
<div class="description">Description 6</div>
46-
</div>
47-
</span>
48-
<span style="--i: 7">
49-
<div class="image-wrapper">
50-
<img src="https://picsum.photos/id/370/300/200" />
51-
<div class="description">Description 7</div>
52-
</div>
53-
</span>
54-
<span style="--i: 8">
55-
<div class="image-wrapper">
56-
<img src="https://picsum.photos/id/478/300/200" />
57-
<div class="description">Description 8</div>
58-
</div>
59-
</span>
60-
</div>
11+
<div class="image-container"></div>
6112
<div class="btn-container">
6213
<button class="btn" id="prev">Prev</button>
6314
<button class="btn" id="next">Next</button>

‎projects/rotating-image-gallery/index.js

Lines changed: 46 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -1,3 +1,38 @@
1+
const imageDetails = [
2+
{
3+
url: "https://picsum.photos/id/91/367/267",
4+
description: "Description 1"
5+
},
6+
{
7+
url: "https://picsum.photos/id/96/367/267",
8+
description: "Description 2"
9+
},
10+
{
11+
url: "https://picsum.photos/id/88/367/267",
12+
description: "Description 3"
13+
},
14+
{
15+
url: "https://picsum.photos/id/90/367/267",
16+
description: "Description 4"
17+
},
18+
{
19+
url: "https://picsum.photos/id/88/367/267",
20+
description: "Description 5"
21+
},
22+
{
23+
url: "https://picsum.photos/id/58/367/267",
24+
description: "Description 6"
25+
},
26+
{
27+
url: "https://picsum.photos/id/55/367/267",
28+
description: "Description 7"
29+
},
30+
{
31+
url: "https://picsum.photos/id/48/367/267",
32+
description: "Description 8"
33+
}
34+
];
35+
136
const imageContainerEl = document.querySelector(".image-container");
237

338
const prevEl = document.getElementById("prev");
@@ -16,7 +51,18 @@ nextEl.addEventListener("click", () => {
1651
});
1752

1853
function updateGallery() {
54+
const imagesHTML = imageDetails.map((detail, index) => `
55+
<span style="--i: ${index + 1}">
56+
<div class="image-wrapper">
57+
<img src="${detail.url}" />
58+
<div class="description">${detail.description}</div>
59+
</div>
60+
</span>
61+
`).join("");
62+
63+
imageContainerEl.innerHTML = imagesHTML;
1964
imageContainerEl.style.transform = `perspective(1000px) rotateY(${x}deg)`;
65+
2066
timer = setTimeout(() => {
2167
x = x - 45;
2268
updateGallery();

0 commit comments

Comments
 (0)