(Решил сделать слайдер на html i css, но не работает :checked.В чем проблема?)
<>
<!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="style.css">
</head>
<body>
<div class="slider ">
<div class="slides">
<div class="input">
<input type="radio" name="r" id="r1" checked>
<input type="radio" name="r" id="r2">
<input type="radio" name="r" id="r3">
<input type="radio" name="r" id="r4">
</div>
<div class="label">
<label for="r1" class="bar"></label>
<label for="r2" class="bar"></label>
<label for="r3" class="bar"></label>
<label for="r4" class="bar"></label>
</div>
<div class="img">
<div class="slid n1"><img src="img/1-1.jpg" alt=""></div>
<div class="slid "><img src="img/unnamed (1).jpg" alt=""></div>
<div class="slid "><img src="img/images.jpg" alt=""></div>
<div class="slid "><img src="img/3dr-19.jpg" alt=""></div>
</div>
</div>
</div>
</body>
</html>
{{CSS}}
*{
padding: 0;
margin: 0;
}
body{
background-color: #0a1b2b;
}
.slider{
box-shadow: 0 0 19px 0 white;
border-radius: 10px;
width: 1100px;
height: 600px;
overflow: hidden;
border: 10px solid white;
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
}
.label{
position: absolute;
bottom: 15px;
left: 50%;
transform: translateX(-50%);
display: flex;
}
.bar{
border-radius: 50%;
margin-left: 10px;
background-color: #ddd;
opacity: 0.5;
width: 15px;
height: 15px;
transition: all 0.4s;
cursor: pointer;
}
.bar:hover{
transform: scale(1.3);
opacity: 1;
box-shadow: 0 0 7px 3px white
}
input[type="radio"]{
display: none;
position: absolute;
}
.img{
width: 500%;
height: 100%;
display: flex;
}
.slid img{
width: 100%;
height: 87%;
}
.slid{
width: 20%;
}
#r1:checked ~ .n1{
margin-left: 0;
}
#r2:checked ~ .n2{
margin-left: -20%;
}
#r3:checked ~ .n3{
margin-left: -40%;
}
#r4:checked ~ .n4{
margin-left: -60%;
}
Простой
Простой