Skip to content

Commit f63f559

Browse files
HuXn-WebDevHuXn-WebDev
committed
Background Image Carousel using HTML, CSS and JAVASCRIPT
1 parent 861ef58 commit f63f559

File tree

3 files changed

+161
-0
lines changed

3 files changed

+161
-0
lines changed

‎59. Background Image Carousel/app.js‎

Lines changed: 40 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,40 @@
1+
const body = document.body;
2+
const imgs = document.querySelectorAll(".img");
3+
const arrowBtns = document.querySelectorAll(".arrow-btn");
4+
5+
let activeImg = 0;
6+
7+
function activeImages() {
8+
imgs.forEach((img) => {
9+
img.classList.remove("active");
10+
img.classList.remove("animateTransition");
11+
});
12+
13+
imgs[activeImg].classList.add("active");
14+
imgs[activeImg].classList.add("animateTransition");
15+
}
16+
17+
setImageAsBackground();
18+
19+
function setImageAsBackground() {
20+
body.style.backgroundImage = imgs[activeImg].style.backgroundImage;
21+
}
22+
23+
arrowBtns.forEach((btn) => {
24+
btn.addEventListener("click", () => {
25+
if (btn.classList == "right-arrow") {
26+
activeImg++;
27+
if (activeImg > imgs.length - 1) {
28+
activeImg = 0;
29+
}
30+
} else {
31+
activeImg--;
32+
if (activeImg < 0) {
33+
activeImg = imgs.length - 1;
34+
}
35+
}
36+
37+
setImageAsBackground();
38+
activeImages();
39+
});
40+
});

‎59. Background Image Carousel/index.html‎

Lines changed: 52 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,52 @@
1+
<html lang="en">
2+
<head>
3+
<meta charset="UTF-8" />
4+
<meta http-equiv="X-UA-Compatible" content="IE=edge" />
5+
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
6+
<title>Background Image Carousel</title>
7+
<link rel="stylesheet" href="style.css" />
8+
</head>
9+
<body>
10+
<main class="img-container">
11+
<div
12+
class="img active"
13+
style="
14+
background-image: url(https://source.unsplash.com/1600x900/?nature,rain);
15+
"
16+
></div>
17+
<div
18+
class="img"
19+
style="
20+
background-image: url(https://source.unsplash.com/1600x900/?nature,sky);
21+
"
22+
></div>
23+
<div
24+
class="img"
25+
style="
26+
background-image: url(https://source.unsplash.com/1600x900/?nature,lake);
27+
"
28+
></div>
29+
<div
30+
class="img"
31+
style="
32+
background-image: url(https://source.unsplash.com/1600x900/?nature,water);
33+
"
34+
></div>
35+
<div
36+
class="img"
37+
style="
38+
background-image: url(https://source.unsplash.com/1600x900/?nature,forest);
39+
"
40+
></div>
41+
42+
<button class="btn arrow-btn left-arrow">
43+
<p>&#x2190;</p>
44+
</button>
45+
<button class="btn arrow-btn right-arrow">
46+
<p>&#x2192;</p>
47+
</button>
48+
</main>
49+
50+
<script src="app.js"></script>
51+
</body>
52+
</html>

‎59. Background Image Carousel/style.css‎

Lines changed: 69 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,69 @@
1+
* {
2+
margin: 0;
3+
padding: 0;
4+
box-sizing: border-box;
5+
font-family: sans-serif;
6+
}
7+
8+
:root {
9+
--transition-speed: 0.5s;
10+
--btn-bg-color: transparent;
11+
}
12+
13+
body {
14+
display: flex;
15+
flex-direction: column;
16+
justify-content: center;
17+
align-items: center;
18+
transition: var(--transition-speed) ease;
19+
}
20+
21+
.img {
22+
background-position: center;
23+
background-size: cover;
24+
background-repeat: no-repeat;
25+
top: -15vh;
26+
left: -15vw;
27+
z-index: 1;
28+
}
29+
30+
.arrow-btn {
31+
position: fixed;
32+
bottom: 10vh;
33+
}
34+
35+
.left-arrow {
36+
left: calc(50vw - 120px);
37+
}
38+
39+
.right-arrow {
40+
right: calc(50vw - 120px);
41+
}
42+
43+
.btn {
44+
background-color: var(--btn-bg-color);
45+
border: none;
46+
color: crimson;
47+
font-size: 3rem;
48+
cursor: pointer;
49+
}
50+
51+
/* Animation For JavaScript */
52+
.animateTransition {
53+
animation: animation var(--transition-speed) ease;
54+
}
55+
56+
@keyframes animation {
57+
0% {
58+
transform: translateX(5px);
59+
filter: blur(4px);
60+
}
61+
50% {
62+
transform: translateX(-5px);
63+
filter: blur(2px);
64+
}
65+
100% {
66+
transform: translateX(0);
67+
filter: blur(0);
68+
}
69+
}

0 commit comments

Comments
 (0)