-
Notifications
You must be signed in to change notification settings - Fork 0
/
test.html
205 lines (182 loc) · 6.89 KB
/
test.html
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
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
141
142
143
144
145
146
147
148
149
150
151
152
153
154
155
156
157
158
159
160
161
162
163
164
165
166
167
168
169
170
171
172
173
174
175
176
177
178
179
180
181
182
183
184
185
186
187
188
189
190
191
192
193
194
195
196
197
198
199
200
201
202
203
204
205
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<link rel="stylesheet" href="./reset.css">
<style>
.container {
width: 100vw;
}
.silder-wrapper {
width: 100%;
overflow: hidden;
height: 500px;
}
.slider-box {
display: flex;
}
.inner-container img {
width: 10vw;
height: 250px;
}
.inner-container.active img {
width: 80vw;
height: 500px;
}
.btn-part {
position: absolute;
left: 10vw;
width: 80%;
top: 250px;
}
.btn-part button.right-btn {
position: absolute;
right: 0;
}
</style>
</head>
<body>
<div class="container">
<div class="silder-wrapper">
<div class="slider-box">
<div class="inner-container">
1
<img src="https://picsum.photos/300">
</div>
<div class="inner-container">
2
<img src="https://picsum.photos/400">
</div>
<div class="inner-container">
3
<img src="https://picsum.photos/500">
</div>
<div class="inner-container">
4
<img src="https://picsum.photos/600">
</div>
<div class="inner-container">
5
<img src="https://picsum.photos/700">
</div>
</div>
</div>
<div class="btn-part">
<button class="left-btn">LEFT</button>
<button class="right-btn">RIGHT</button>
</div>
</div>
<script>
// select buttons
const leftBtn = document.querySelector(".left-btn");
const rightBtn = document.querySelector(".right-btn");
// select containers
const container = document.querySelector(".container");
const sliderWrapper = document.querySelector(".silder-wrapper");
const sliderBox = document.querySelector(".slider-box");
const innerContainer = document.querySelectorAll(".inner-container");
// constant variable setting
const sliderNum = innerContainer.length; // total number of "original" images
const sliderWidth = 10; // basic slider width (10vw)
const activeSliderWidth = 80; // active slider width (80vw)
const sliderSpeed = 300; // slider chaning speed
// set slider-box total width = (basicslider number - 1) * 10vw + active slider number(which is 1) * 80vw
sliderBox.style.width = (sliderWidth * (sliderNum - 1)) + activeSliderWidth + "vw";
// copy children that need to be attached both sides
// 1. select
const firstChild = innerContainer[0];
const secondChild = innerContainer[1];
const secondLastChild = innerContainer[sliderNum - 2];
const lastChild = innerContainer[sliderNum - 1];
// 2. copy
const clonedFirst = firstChild.cloneNode(true);
const clonedSecond = secondChild.cloneNode(true);
const clonedSecondLast = secondLastChild.cloneNode(true);
const clonedLast = lastChild.cloneNode(true);
// 3. attach
sliderBox.appendChild(clonedFirst);
sliderBox.appendChild(clonedSecond);
sliderBox.insertBefore(clonedLast, sliderBox.firstElementChild);
sliderBox.insertBefore(clonedSecondLast, sliderBox.firstElementChild);
// constant variable setting 2
const startIdx = 2; // start image index (in total array)
const innerContainerFinal = document.querySelectorAll(".inner-container"); // total array of image container DOM
const innerContainerFinalNum = innerContainerFinal.length; // final number of image container
// set initial position of slider-box
sliderBox.style.transform = "translate3d(-" + sliderWidth * (startIdx - 1) + "vw, 0px, 0px)";
// sets variables that are gonna be changed by click event
let sliderIdx = startIdx; // index which represents what slider is selected now
let currentSlider = innerContainerFinal[sliderIdx]; // get initial current slider
currentSlider.classList.add("active"); // set active class to main image to give specific style
const rightBtnCb = () => {
const temp = sliderIdx; // just for debugging
sliderIdx++; // slider index changed
if (sliderIdx <= innerContainerFinalNum - 2) {
// slider-box animation
sliderBox.style.transition = sliderSpeed + "ms";
sliderBox.style.transform = "translate3d(-" + (sliderWidth * (sliderIdx - 1)) + "vw, 0px, 0px)";
// selected image style
currentSlider.classList.remove("active");
currentSlider = innerContainerFinal[sliderIdx];
currentSlider.classList.add("active");
// block button event
rightBtn.removeEventListener("click", rightBtnCb);
setTimeout(() => {
rightBtn.addEventListener("click", rightBtnCb);
}, sliderSpeed);
}
if (sliderIdx === innerContainerFinalNum - 2) {
setTimeout( () => {
// change selected image behind users' back
sliderBox.style.transition = "0ms";
sliderBox.style.transform = "translate3d(-" + (sliderWidth * (startIdx - 1)) + "vw, 0px, 0px)";
// change slider index behind users' back
sliderIdx = 2;
// selected image style
currentSlider.classList.remove("active");
currentSlider = innerContainerFinal[sliderIdx];
currentSlider.classList.add("active");
}, sliderSpeed);
}
console.log(temp, sliderIdx); // just for debugging
}
const leftBtnCb = () => {
const temp = sliderIdx; // just for debugging
sliderIdx--; // slider index changed
if (sliderIdx >= 1) {
// slider-box animation
sliderBox.style.transition = sliderSpeed + "ms";
sliderBox.style.transform = "translate3d(-" + (sliderWidth * (sliderIdx - 1)) + "vw, 0px, 0px)";
// selected image style
currentSlider.classList.remove("active");
currentSlider = innerContainerFinal[sliderIdx];
currentSlider.classList.add("active");
// block button event
leftBtn.removeEventListener("click", leftBtnCb);
setTimeout(() => {
leftBtn.addEventListener("click", leftBtnCb);
}, sliderSpeed);
}
if (sliderIdx === 1) {
setTimeout( () => {
// change selected image behind users' back
sliderBox.style.transition = "0ms";
sliderBox.style.transform = "translate3d(-" + (sliderWidth * (innerContainerFinalNum - 4)) + "vw, 0px, 0px)";
// change slider index behind users' back
sliderIdx = innerContainerFinalNum - 3;
// selected image style
currentSlider.classList.remove("active");
currentSlider = innerContainerFinal[sliderIdx];
currentSlider.classList.add("active");
}, sliderSpeed);
}
console.log(temp, sliderIdx); // just for debugging
}
// add event-listener
rightBtn.addEventListener("click", rightBtnCb);
leftBtn.addEventListener("click", leftBtnCb);
</script>
</body>
</html>