-
Notifications
You must be signed in to change notification settings - Fork 1
/
script.js
50 lines (44 loc) · 1.4 KB
/
script.js
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
const next = document.querySelector(".next")
const prev = document.querySelector(".previous")
let images = document.querySelectorAll(".img-container")
let dots = document.querySelectorAll(".dot")
let index = 0;
function showSlide(index) {
// Loop through all images in the "images" array
for (let j = 0; j < images.length; j++) {
// If the current index (j) is equal to the parameter "index", display the image and change the dot color
if (j === index) {
images[j].style.display = "block";
dots[j].style.backgroundColor = "#777";
}
// If the current index (j) is not equal to the parameter "i", hide the image and reset the dot color
else {
images[j].style.display = "none";
dots[j].style.backgroundColor = "";
}
}
}
next.addEventListener("click", function() {
index++;
if (index >= images.length) {
// Set "index" to 0
index = 0;
}
showSlide(index);
});
prev.addEventListener("click", function() {
index--;
if (index < 0) {
// Set "index" to the last index of the "images" array
index = images.length - 1;
}
showSlide(index);
});
dots.forEach(function(dot, img_index) {
dot.addEventListener("click", function() {
// Set the variable "index" to the index of the dot that was clicked
index = img_index;
showSlide(index);
});
});
showSlide(index);