Skip to content

Commit 8d96872

Browse files
DenTheProgrammerDenTheProgrammer
committed
preview click slide change added
1 parent e62e8ac commit 8d96872

3 files changed

Lines changed: 86 additions & 50 deletions

File tree

‎Dz-6/Slider/css/style.css‎

Lines changed: 45 additions & 32 deletions
Original file line numberDiff line numberDiff line change
@@ -1,43 +1,56 @@
1-
*, *:after, *:before {
2-
margin: 0;
3-
padding: 0;
4-
box-sizing: border-box;
5-
transition: 2s;
1+
*,
2+
*:after,
3+
*:before {
4+
margin: 0;
5+
padding: 0;
6+
box-sizing: border-box;
67
}
78

89

910
.slider-container {
10-
display: flex;
11-
flex-direction: column;
12-
align-items: center;
13-
margin-top: 50px;
11+
display: flex;
12+
flex-direction: column;
13+
align-items: center;
14+
margin-top: 50px;
1415
}
16+
1517
.buttons {
16-
display: flex;
17-
justify-content: space-around;
18-
}
19-
button{
20-
height: 30px;
21-
padding: 5px;
22-
margin: 20px 150px;
23-
background: green;
24-
border: none;
25-
color: white;
26-
cursor: pointer;
18+
width: 500px;
19+
display: flex;
20+
justify-content: space-between;
21+
align-items: center;
22+
margin-top: 30px;
23+
}
24+
25+
.buttons img {
26+
width: 100px;
27+
height: 60px;
28+
}
29+
30+
button {
31+
height: 30px;
32+
padding: 5px;
33+
background: green;
34+
border: none;
35+
color: white;
36+
cursor: pointer;
2737
}
38+
2839
.slider {
29-
border: solid 2px blue;
30-
width: 500px;
31-
height: 300px;
32-
overflow: hidden;
33-
position: relative;
34-
background: lightblue;
40+
width: 500px;
41+
height: 300px;
42+
overflow: hidden;
43+
position: relative;
44+
background: lightblue;
45+
}
46+
47+
.slider img {
48+
position: absolute;
49+
opacity: 0;
50+
transition: 1s;
3551
}
3652

37-
.slider img{
38-
position: absolute;
39-
opacity: 0;
53+
.slider-container .active {
54+
opacity: 1;
55+
outline: solid 2px blue;
4056
}
41-
.slider .active{
42-
opacity: 1;
43-
}

‎Dz-6/Slider/index.html‎

Lines changed: 18 additions & 15 deletions
Original file line numberDiff line numberDiff line change
@@ -2,25 +2,28 @@
22
<html>
33

44
<head>
5-
<meta charset="UTF-8">
6-
<meta name="viewport" content="width=device-width, initial-scale=1.0">
7-
<title>Slider</title>
8-
<link rel="stylesheet" href="css/style.css">
5+
<meta charset="UTF-8">
6+
<meta name="viewport" content="width=device-width, initial-scale=1.0">
7+
<title>Slider</title>
8+
<link rel="stylesheet" href="css/style.css">
99

1010
</head>
1111

1212
<body>
13-
<div class="slider-container">
14-
<div class="slider">
15-
<img id="img1" class="active" src="img/1.jpg" alt="">
16-
<img id="img2" src="img/2.jpg" alt="">
17-
<img id="img3" src="img/3.jpg" alt="">
18-
</div>
19-
<div class="buttons">
20-
<button class="prev">&larr;Prev</button>
21-
<button class="next">Next&rarr;</button>
22-
</div>
23-
</div>
13+
<div class="slider-container">
14+
<div class="slider">
15+
<img class="img1 active" src="img/1.jpg" alt="">
16+
<img class="img2" src="img/2.jpg" alt="">
17+
<img class="img3" src="img/3.jpg" alt="">
18+
</div>
19+
<div class="buttons">
20+
<button class="prev">&larr;Prev</button>
21+
<img class="img1 active" src="img/1.jpg" alt="">
22+
<img class="img2" src="img/2.jpg" alt="">
23+
<img class="img3" src="img/3.jpg" alt="">
24+
<button class="next">Next&rarr;</button>
25+
</div>
26+
</div>
2427
</body>
2528
<script src="js/main.js"></script>
2629

‎Dz-6/Slider/js/main.js‎

Lines changed: 23 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -21,8 +21,28 @@ document.querySelector(".slider-container").onclick = function (e) {
2121
active = imgNumber;
2222
}
2323
}
24-
document.querySelector(".active").classList.toggle("active");
25-
document.querySelector("#img" + active).classList.toggle("active");
24+
//переключение слайдов
25+
document.querySelectorAll(".active")[0].classList.toggle("active");
26+
document.querySelectorAll(".img" + active)[0].classList.toggle("active");
27+
//переключение превьюшек
28+
document.querySelectorAll(".active")[1].classList.toggle("active");
29+
document.querySelectorAll(".img" + active)[1].classList.toggle("active");
2630
clearInterval(timer); //сброс таймера при клике пользователя
27-
autoSwitch();
31+
autoSwitch();
2832
}
33+
34+
35+
36+
//переключение по нажатию превью
37+
document.querySelector(".buttons").addEventListener("click", function (e) {
38+
if (e.target.tagName === "IMG") {
39+
active = e.target.classList[0][3];
40+
41+
//переключение слайдов
42+
document.querySelectorAll(".active")[0].classList.toggle("active");
43+
document.querySelectorAll(".img" + active)[0].classList.toggle("active");
44+
//переключение превьюшек
45+
document.querySelectorAll(".active")[1].classList.toggle("active");
46+
document.querySelectorAll(".img" + active)[1].classList.toggle("active");
47+
}
48+
})

0 commit comments

Comments
 (0)