-
Notifications
You must be signed in to change notification settings - Fork 0
/
slider.js
69 lines (59 loc) · 1.8 KB
/
slider.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
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
const right = document.querySelector(".right")
const left = document.querySelector(".left")
const slider = document.querySelector(".slider")
const images = document.querySelectorAll(".image")
const bottom = document.querySelector(".bottom");
let slideNumber = 1;
const length = images.length
for ( let i = 0; i < length; i++ ) {
const div = document.createElement("div");
div.className = "button";
bottom.appendChild(div)
}
const buttons = document.querySelectorAll(".button");
buttons[0].style.backgroundColor = "white"
const resetBg = () => {
buttons.forEach((button) => {
button.style.backgroundColor = "transparent";
});
};
buttons.forEach((button, i) => {
button.addEventListener("click", () => {
resetBg();
slider.style.transform = `translateX(-${i * 800}px)`;
slideNumber = i + 1;
button.style.backgroundColor = "white";
});
});
const nextSlide = () => {
console.log(slideNumber,"next");
slider.style.transform = `translateX(-${slideNumber * 800}px)`;
slideNumber++;
}
const prevSlide = () => {
console.log(slideNumber,"prev");
slider.style.transform = `translateX(-${(slideNumber-2) * 800}px)`;
slideNumber--;
}
const getFirstSlide = () => {
console.log(slideNumber,"getF");
slider.style.transform = `translateX(0px)`;
slideNumber = 1;
}
const getlastSlide = () => {
console.log(slideNumber,"getL");
slider.style.transform = `translateX(-${(length -1) * 800}px)`
slideNumber = length;
}
right.addEventListener('click', () => {
slideNumber < length ? nextSlide() : getFirstSlide();
changeColor()
})
left.addEventListener('click',() => {
slideNumber > 1 ? prevSlide() : getlastSlide();
changeColor()
})
const changeColor = ()=>{
resetBg()
buttons[slideNumber-1].style.backgroundColor = "white";
}