-
Notifications
You must be signed in to change notification settings - Fork 0
/
script.js
115 lines (99 loc) · 3 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
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
const createLinks = () => {
const projectsList = document.querySelector(".projects-list");
projectsData.forEach((project, index) => {
const createdLi = document.createElement("li");
createdLi.classList.add("projects-list__item");
const createdA = document.createElement("a");
createdA.classList.add("projects-list__link");
createdA.innerText = project.city + " " + project.style;
if (index === 0) {
createdA.classList.add("active");
}
createdLi.appendChild(createdA);
projectsList.appendChild(createdLi);
});
};
const projectsData = [
{
city: "Stockholm",
style: "LCD admiral",
area: "81 m2",
time: "3.5 months",
cost: "Upon request",
image: "./images/slider1.png",
},
{
city: "Uppsala",
style: "Thieves",
area: "105 m2",
time: "4 months",
cost: "Upon request",
image: "./images/slider2.png",
},
{
city: "Västerås",
style: "Patriotic",
area: "93 m2",
time: "3 months",
cost: "Upon request",
image: "./images/slider3.png",
},
];
createLinks();
const city = document.querySelector(".name-city");
const style = document.querySelector(".style");
const area = document.querySelector(".area");
const time = document.querySelector(".time");
const cost = document.querySelector(".cost");
const design = document.querySelector(".design-image");
const prev = document.querySelectorAll(".carousel-last, .sliderNavigation-last");
const next = document.querySelectorAll(".carousel-next, .sliderNavigation-next");
const designMobile = document.querySelector(".projects-room")
const projectLinks = document.querySelectorAll(".projects-list__link");
const projectDots = document.querySelectorAll(".carousel-dots");
const displayProject = (index) => {
const project = projectsData[index];
city.innerText = project.city;
style.innerText = project.style;
area.innerText = project.area;
time.innerText = project.time;
cost.innerText = project.cost;
design.src = project.image;
designMobile.style.backgroundImage = `url(${project.image})`;
setActiveLink(index);
setActiveDot(index);
};
let currentIndex = 0;
displayProject(currentIndex);
const setProject = (index) => {
index = (index + projectsData.length) % projectsData.length;
displayProject(index);
currentIndex = index;
};
prev.forEach((e) => {
e.addEventListener("click", () => {
setProject(currentIndex - 1);
});
});
next.forEach((e) => {
e.addEventListener("click", () => {
setProject(currentIndex + 1);
});
});
projectLinks.forEach((element, index) => {
element.addEventListener("click", () => {
setProject(index);
});
});
function setActiveLink(index) {
const currenLink = projectLinks[currentIndex];
currenLink.classList.remove("active");
const newActiveLink = projectLinks[index];
newActiveLink.classList.add("active");
}
function setActiveDot(index) {
const currenDot = projectDots[currentIndex];
currenDot.classList.remove("active");
const newActiveDot = projectDots[index];
newActiveDot.classList.add("active");
}