Skip to content

Commit bf6aa6c

Browse files
miriamjornamiriamjorna
committed
Slideshow Level 1
1 parent 10b3ac9 commit bf6aa6c

3 files changed

Lines changed: 59 additions & 10 deletions

File tree

‎Sprint-3/slideshow/index.html‎

Lines changed: 8 additions & 5 deletions
Original file line numberDiff line numberDiff line change
@@ -1,14 +1,17 @@
1-
<!DOCTYPE html>
1+
<!doctype html>
22
<html lang="en">
33
<head>
44
<meta charset="UTF-8" />
55
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
6-
<title>Title here</title>
6+
<title>Image carousel</title>
77
<script defer src="slideshow.js"></script>
88
</head>
99
<body>
10-
<img id="carousel-img" src="./assets/cute-cat-a.png" alt="cat-pic" />
11-
<button type="button" id="backward-btn">Backwards</button>
12-
<button type="button" id="forward-btn">Forward</button>
10+
<h1>Giraffe Gallery</h1>
11+
<div id="slideshow">
12+
<button id="back">&#8592; Back</button>
13+
<img id="slide" src="" alt="Giraffe" />
14+
<button id="forward">Forward &#8594;</button>
15+
</div>
1316
</body>
1417
</html>

‎Sprint-3/slideshow/slideshow.js‎

Lines changed: 26 additions & 4 deletions
Original file line numberDiff line numberDiff line change
@@ -1,8 +1,30 @@
11
const images = [
2-
"./assets/cute-cat-a.png",
3-
"./assets/cute-cat-b.jpg",
4-
"./assets/cute-cat-c.jpg",
2+
"https://unsplash.com/photos/three-giraffes-on-brown-grass-field-during-daytime-eQdDUdi5qLk",
3+
"https://unsplash.com/photos/a-group-of-giraffes-standing-on-a-dirt-road-nUwKN_3PQ7c",
4+
"https://unsplash.com/photos/giraffe-drinking-water-q73Ehqc4OqY",
5+
"https://unsplash.com/photos/a-giraffe-standing-next-to-a-tree-in-a-field-aWNGjRw4QpM",
56
];
67

8+
let currentIndex = 0;
79

8-
// Write your code here
10+
const slide = document.getElementById("slide");
11+
const backButton = document.getElementById("back");
12+
const forwardButton = document.getElementById("forward");
13+
14+
function updateSlide() {
15+
slide.src = images[currentIndex];
16+
}
17+
18+
backButton.addEventListener("click", () => {
19+
currentIndex = (currentIndex - 1 + images.length) % images.length;
20+
updateSlide();
21+
});
22+
23+
forwardButton.addEventListener("click", () => {
24+
currentIndex = (currentIndex + 1) % images.length;
25+
// makes a loop so that the last pic leads to the first pic and vv
26+
updateSlide();
27+
});
28+
29+
// show first image on load
30+
updateSlide();

‎Sprint-3/slideshow/style.css‎

Lines changed: 25 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -1 +1,25 @@
1-
/** Write your CSS in here **/
1+
body {
2+
font-family: Arial, sans-serif;
3+
text-align: center;
4+
}
5+
6+
#slideshow {
7+
display: flex;
8+
align-items: center;
9+
justify-content: center;
10+
gap: 20px;
11+
margin-top: 30px;
12+
}
13+
14+
#slide {
15+
width: 600px;
16+
height: 400px;
17+
object-fit: cover;
18+
border-radius: 10px;
19+
}
20+
21+
button {
22+
padding: 10px 20px;
23+
font-size: 1rem;
24+
cursor: pointer;
25+
}

0 commit comments

Comments
 (0)