-
Notifications
You must be signed in to change notification settings - Fork 0
/
challenge5_slider.html
127 lines (119 loc) · 3.5 KB
/
challenge5_slider.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
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>slider</title>
<style>
div {
display: grid;
grid-template-columns: 300px;
}
img {
width: 300px;
height: 300px;
}
p {
font-size: 20px;
}
.main {
width: 300px;
display: grid;
grid-template-columns: 1fr 1fr 1fr;
margin: auto;
transition: transform 0.5s ease;
}
.show {
display: block;
}
.hidden {
visibility: hidden;
}
.cont{
border:5px solid black;
margin:auto;
}
header{
border:5px solid black;
width:30%;
margin:auto;
}
.bt{
display:block;
margin:20px;
text-align: center;
}
.bt1,.bt2{
font-size:40px;
}
</style>
</head>
<body>
<header>
<div class="main">
<div class="content c1 hidden">
<img src="images/first.jpg" alt="" />
<p>
Lorem ipsum dolor sit amet, consectetur adipisicing elit. Nesciunt
praesentium cumque fugit mollitia, magni perferendis nostrum odit in
eveniet iste eius repellat facere cupiditate nulla omnis? Asperiores
illo sapiente sunt! Repellat, perspiciatis soluta. Voluptatum.
</p>
</div>
<div class="content c2 hidden">
<img src="images/second.jpg" alt="" />
<p>
Lorem ipsum dolor sit amet, consectetur adipisicing elit. Nesciunt
praesentium cumque fugit mollitia, magni perferendis nostrum odit in
eveniet iste eius repellat facere cupiditate nulla omnis? Asperiores
illo sapiente sunt! Repellat, perspiciatis soluta. Voluptatum.
</p>
</div>
<div class="content c3 ">
<img src="images/third.jpg" alt="" />
<p>
Lorem ipsum dolor sit amet, consectetur adipisicing elit. Nesciunt
praesentium cumque fugit mollitia, magni perferendis nostrum odit in
eveniet iste eius repellat facere cupiditate nulla omnis? Asperiores
illo sapiente sunt! Repellat, perspiciatis soluta. Voluptatum.
</p>
</div>
</div>
</header>
<div class="bt">
<button class="bt1">◀</button>
<button class="bt2">▶</button>
</div>
</body>
</html>
</html>
<script>
let left = document.querySelector(".bt1");
let right = document.querySelector(".bt2");
let container = document.querySelector(".main");
let i = 1;
left.addEventListener("click", (e) => {
container.style.transform = `translateX(-${(i % 3) * 300}px)`;
// document.querySelector(`.c1`).classList.add("hidden");
// document.querySelector(`.c2`).classList.add("hidden");
// document.querySelector(`.c3`).classList.add("hidden");
document.querySelector(`.c${i}`).classList.add("hidden");
if (i === 3) i = 0;
document.querySelector(`.c${i + 1}`).classList.remove("hidden");
i++;
// if (i == 3) i = 0;
});
let j=1;
let k=3;
right.addEventListener("click", (e) => {
container.style.transform = `translateX(+${(j % 3) * 300}px)`;
document.querySelector(`.c${k}`).classList.add("hidden");
// if(j===1) j=4;
if(k===1)k=4;
document.querySelector(`.c${k - 1}`).classList.remove("hidden");
k--;
j++;
// if (i == 3) i = 0;
});
</script>
</html>