Skip to content

Commit ec7a0bc

Browse files
Rachit-PalRachit-Pal
committed
first commit
0 parents  commit ec7a0bc

File tree

9 files changed

+174
-0
lines changed

9 files changed

+174
-0
lines changed

‎app.js‎

Lines changed: 40 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,40 @@
1+
let currentSlide = 0;
2+
const slides = document.querySelectorAll(".slide");
3+
const dots = document.querySelectorAll(".dot");
4+
5+
const init = (n) => {
6+
slides.forEach((slide, index) => {
7+
slide.style.display = "none";
8+
dots.forEach((dot, index) => {
9+
dot.classList.remove("active");
10+
});
11+
});
12+
slides[n].style.display = "block";
13+
dots[n].classList.add("active");
14+
};
15+
document.addEventListener("DOMContentLoaded", init(currentSlide));
16+
const next = () => {
17+
currentSlide >= slides.length - 1 ? (currentSlide = 0) : currentSlide++;
18+
init(currentSlide);
19+
};
20+
21+
const prev = () => {
22+
currentSlide <= 0 ? (currentSlide = slides.length - 1) : currentSlide--;
23+
init(currentSlide);
24+
};
25+
26+
document.querySelector(".next").addEventListener("click", next);
27+
28+
document.querySelector(".prev").addEventListener("click", prev);
29+
30+
setInterval(() => {
31+
next();
32+
}, 5000);
33+
34+
dots.forEach((dot, i) => {
35+
dot.addEventListener("click", () => {
36+
console.log(currentSlide);
37+
init(i);
38+
currentSlide = i;
39+
});
40+
});

‎index.html‎

Lines changed: 40 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,40 @@
1+
<!DOCTYPE html>
2+
<html lang="en">
3+
<head>
4+
<meta charset="UTF-8" />
5+
<meta http-equiv="X-UA-Compatible" content="IE=edge" />
6+
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
7+
<title>Image slider</title>
8+
<link rel="stylesheet" href="style.css">
9+
</head>
10+
<body>
11+
<h1>Image Slider</h1>
12+
<div class="slide-container">
13+
<div class="slide fade">
14+
<img src="resources/Pic-01.jpg" alt=''>
15+
</div>
16+
<div class="slide fade">
17+
<img src="resources/Pic-02.jpg" alt=''>
18+
</div>
19+
<div class="slide fade">
20+
<img src="resources/Pic-03.png" alt=''>
21+
</div>
22+
<div class="slide fade">
23+
<img src="resources/Pic-04.jpg" alt=''>
24+
</div>
25+
<div class="slide fade">
26+
<img src="resources/Pic-05.jpg" alt=''>
27+
</div>
28+
29+
<a href="#" class="prev" title="Previous">&#10094</a>
30+
<a href="#" class="next" title="Next">&#10095</a>
31+
</div>
32+
<div class="dots-container">
33+
<span class="dot"></span>
34+
<span class="dot"></span>
35+
<span class="dot"></span>
36+
<span class="dot"></span>
37+
</div>
38+
<script src="app.js"></script>
39+
</body>
40+
</html>

‎resources/Background.jpg‎

111 KB
Loading

‎resources/Pic-01.jpg‎

332 KB
Loading

‎resources/Pic-02.jpg‎

699 KB
Loading

‎resources/Pic-03.png‎

3.65 MB
Loading

‎resources/Pic-04.jpg‎

850 KB
Loading

‎resources/Pic-05.jpg‎

837 KB
Loading

‎style.css‎

Lines changed: 94 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,94 @@
1+
@import url('https://fonts.googleapis.com/css2?family=Open+Sans:wght@400;500;600;700&display=swap');
2+
3+
.slide-container .prev,
4+
.slide-container .next {
5+
cursor: pointer;
6+
position: absolute;
7+
top: 50%;
8+
width: auto;
9+
margin-top: -22px;
10+
padding: 16px;
11+
color: white;
12+
font-weight: bold;
13+
font-size: 20px;
14+
transition: all 0.6s ease;
15+
border-radius: 0 3px 3px 0;
16+
user-select: none;
17+
}
18+
19+
.slide-container .prev:hover,
20+
.slide-container .next:hover {
21+
background-color: rgba(255, 255, 255, 0.25);
22+
color: white;
23+
}
24+
25+
.slide-container .prev {
26+
left: 2px;
27+
}
28+
29+
.slide-container .next {
30+
right: 2px;
31+
}
32+
33+
.dots-container {
34+
display: flex;
35+
justify-content: center;
36+
align-items: center;
37+
padding: 10px;
38+
}
39+
40+
.dots-container .dot {
41+
cursor: pointer;
42+
margin: 5px;
43+
width: 20px;
44+
height: 20px;
45+
color: #333;
46+
border-radius: 50%;
47+
background-color: #dfd6ce;
48+
}
49+
50+
.dots-container .dot.active {
51+
border: 2px solid rgb(46, 166, 206);
52+
}
53+
54+
* {
55+
padding: 0;
56+
border: 0;
57+
box-sizing: border-box;
58+
}
59+
60+
body {
61+
height: 100%;
62+
background-image: url("./resources/Background.jpg");
63+
}
64+
65+
body h1 {
66+
text-align: center;
67+
}
68+
69+
.slide-container {
70+
display: flex;
71+
justify-content: center;
72+
align-items: center;
73+
max-width: 1000px;
74+
margin: auto;
75+
position: relative;
76+
}
77+
78+
.slide-container .slide {
79+
display: none;
80+
width: 100%;
81+
}
82+
83+
.slide-container .slide.fade {
84+
animation: fade 0.5s cubic-bezier(0.55, 0.085, 0.68, 0.53) both;
85+
}
86+
87+
.slide-container .slide img {
88+
width: 100%;
89+
}
90+
91+
h1{
92+
font-family: 'Open Sans', sans-serif;
93+
color: #333;
94+
}

0 commit comments

Comments
 (0)