Skip to content

Commit c3ce1fa

Browse files
solygambassolygambas
committed
add image carousel
1 parent 571dfec commit c3ce1fa

File tree

4 files changed

+129
-2
lines changed

4 files changed

+129
-2
lines changed

‎35-image carousel/index.html‎

Lines changed: 36 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,36 @@
1+
<!DOCTYPE html>
2+
<html lang="en">
3+
<head>
4+
<meta charset="UTF-8" />
5+
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
6+
<link rel="stylesheet" href="style.css" />
7+
<title>Image Carousel</title>
8+
</head>
9+
<body>
10+
<div class="carousel">
11+
<div class="image-container" id="images">
12+
<img
13+
src="https://images.unsplash.com/photo-1611072566310-7b7bfeca4582?ixid=MXwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHw%3D&ixlib=rb-1.2.1&auto=format&fit=crop&w=752&q=80"
14+
alt="first-image"
15+
/>
16+
<img
17+
src="https://images.unsplash.com/photo-1611072488486-0cae417b73e4?ixid=MXwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHw%3D&ixlib=rb-1.2.1&auto=format&fit=crop&w=752&q=80"
18+
alt="second-image"
19+
/>
20+
<img
21+
src="https://images.unsplash.com/photo-1611072652569-bffa64d83763?ixid=MXwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHw%3D&ixlib=rb-1.2.1&auto=format&fit=crop&w=752&q=80"
22+
alt="third-image"
23+
/>
24+
<img
25+
src="https://images.unsplash.com/photo-1611072652955-5705ec8f91eb?ixid=MXwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHw%3D&ixlib=rb-1.2.1&auto=format&fit=crop&w=752&q=80"
26+
alt="fourth-image"
27+
/>
28+
</div>
29+
<div class="buttons-container">
30+
<button id="left" class="btn">Prev</button>
31+
<button id="right" class="btn">Next</button>
32+
</div>
33+
</div>
34+
<script src="script.js"></script>
35+
</body>
36+
</html>

‎35-image carousel/script.js‎

Lines changed: 36 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,36 @@
1+
const images = document.getElementById("images");
2+
const leftButton = document.getElementById("left");
3+
const rightButton = document.getElementById("right");
4+
5+
const imagesList = document.querySelectorAll("#images img");
6+
let index = 0;
7+
8+
const changeImage = () => {
9+
if (index > imagesList.length - 1) index = 0;
10+
else if (index < 0) index = imagesList.length - 1;
11+
images.style.transform = `translateX(${-index * 500}px)`;
12+
};
13+
14+
const run = () => {
15+
index++;
16+
changeImage();
17+
};
18+
19+
const resetInterval = () => {
20+
clearInterval(interval);
21+
interval = setInterval(run, 2000);
22+
};
23+
24+
let interval = setInterval(run, 2000);
25+
26+
rightButton.addEventListener("click", () => {
27+
index++;
28+
changeImage();
29+
resetInterval();
30+
});
31+
32+
leftButton.addEventListener("click", () => {
33+
index--;
34+
changeImage();
35+
resetInterval();
36+
});

‎35-image carousel/style.css‎

Lines changed: 55 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,55 @@
1+
@import url("https://fonts.googleapis.com/css2?family=Roboto:wght@400;700&display=swap");
2+
3+
* {
4+
box-sizing: border-box;
5+
}
6+
7+
body {
8+
font-family: "Roboto", sans-serif;
9+
display: flex;
10+
align-items: center;
11+
justify-content: center;
12+
height: 100vh;
13+
margin: 0;
14+
}
15+
16+
img {
17+
width: 500px;
18+
height: 500px;
19+
object-fit: cover;
20+
}
21+
22+
.carousel {
23+
box-shadow: 2px 2px rgba(0, 0, 0, 0.3);
24+
height: 530px;
25+
width: 500px;
26+
overflow: hidden;
27+
}
28+
29+
.image-container {
30+
display: flex;
31+
transform: translateX(0);
32+
transition: transform 0.5s ease-in-out;
33+
}
34+
35+
.buttons-container {
36+
display: flex;
37+
justify-content: space-between;
38+
}
39+
40+
.btn {
41+
background-color: rebeccapurple;
42+
color: #fff;
43+
border: none;
44+
padding: 0.5rem;
45+
cursor: pointer;
46+
width: 49.5%;
47+
}
48+
49+
.btn:hover {
50+
opacity: 0.9;
51+
}
52+
53+
.btn:focus {
54+
outline: none;
55+
}

‎README.md‎

Lines changed: 2 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -17,7 +17,7 @@
1717
| 09 | [Sound Board](https://github.com/solygambas/html-css-fifty-projects/tree/master/09-sound%20board) | [Live Demo](https://codepen.io/solygambas/full/oNzaPQa) |
1818
| 10 | [Dad Jokes](https://github.com/solygambas/html-css-fifty-projects/tree/master/10-dad%20jokes) | [Live Demo](https://codepen.io/solygambas/full/gOwBQZK) |
1919
| 11 | [Event Keycodes](https://github.com/solygambas/html-css-fifty-projects/tree/master/11-event%20KeyCodes) | [Live Demo](https://codepen.io/solygambas/full/zYKmypd) |
20-
| 12 | [Faq Collapse](https://github.com/solygambas/html-css-fifty-projects/tree/master/12-FAQ%20collapse) | [Live Demo](https://codepen.io/solygambas/full/ExgdqWm) |
20+
| 12 | [FAQ Collapse](https://github.com/solygambas/html-css-fifty-projects/tree/master/12-FAQ%20collapse) | [Live Demo](https://codepen.io/solygambas/full/ExgdqWm) |
2121
| 13 | [Random Choice Picker](https://github.com/solygambas/html-css-fifty-projects/tree/master/13-random%20choice%20picker) | [Live Demo](https://codepen.io/solygambas/full/eYdQgqN) |
2222
| 14 | [Animated Navigation](https://github.com/solygambas/html-css-fifty-projects/tree/master/14-animated%20navigation) | [Live Demo](https://codepen.io/solygambas/full/KKgrWGz) |
2323
| 15 | [Incrementing Counter](https://github.com/solygambas/html-css-fifty-projects/tree/master/15-incrementing%20counter) | [Live Demo](https://codepen.io/solygambas/full/qBaQmeW) |
@@ -40,7 +40,7 @@
4040
| 32 | [Good Cheap Fast](https://github.com/solygambas/html-css-fifty-projects/tree/master/32-good%20cheap%20fast) | [Live Demo](https://codepen.io/solygambas/full/QWKoxwP) |
4141
| 33 | [Notes App](https://github.com/solygambas/html-css-fifty-projects/tree/master/33-notes%20app) | [Live Demo](https://codepen.io/solygambas/full/qBavQog) |
4242
| 34 | [Animated Countdown](https://github.com/solygambas/html-css-fifty-projects/tree/master/34-animated%20countdown) | [Live Demo](https://codepen.io/solygambas/full/vYXPbYW) |
43-
| 35 | [Image Carousel](https://github.com/solygambas/html-css-fifty-projects/tree/master/image-carousel) | [Live Demo](/image-carousel/) |
43+
| 35 | [Image Carousel](https://github.com/solygambas/html-css-fifty-projects/tree/master/35-image%20carousel) | [Live Demo](https://codepen.io/solygambas/full/zYKbQZK) |
4444
| 36 | [Hoverboard](https://github.com/solygambas/html-css-fifty-projects/tree/master/hoverboard) | [Live Demo](/hoverboard/) |
4545
| 37 | [Pokedex](https://github.com/solygambas/html-css-fifty-projects/tree/master/pokedex) | [Live Demo](/pokedex/) |
4646
| 38 | [Mobile Tab Navigation](https://github.com/solygambas/html-css-fifty-projects/tree/master/mobile-tab-navigation) | [Live Demo](/mobile-tab-navigation/) |

0 commit comments

Comments
 (0)