Пытаюсь добиться того, чтобы при нажатии на input сменялся блок
<!DOCTYPE html>
<html>
<head>
<link rel="stylesheet" type="text/css" href="style.css">
<script type="text/javascript" src="javascript.js"></script>
<title>Страница</title>
</head>
<body>
<div class="wrapper">
<div class="labels-b">
<input type="radio" id="btn-1" name="button1">
<input type="radio" id="btn-2" name="button1">
<input type="radio" id="btn-3" name="button1">
<input type="radio" id="btn-4" name="button1">
<label class="label-b" for="btn-1"></label>
<label class="label-b" for="btn-2"></label>
<label class="label-b" for="btn-3"></label>
<label class="label-b" for="btn-4"></label>
</div>
<div class="slider">
<div class="slider-block-1"></div>
<div class="slider-block-2"></div>
<div class="slider-block-3"></div>
<div class="slider-block-4"></div>
</div>
</body>
</html>
* {
margin: 0px;
padding: 0px;
}
.wrapper {
width: 1000px;
height: 2000px;
margin: 0px auto;
background: yellow;
}
.slider {
width: 3000px;
height: 200px;
overflow: hidden;
}
.labels-b {
display: block;
text-align: center;
background: none;
}
.label-b {
width: 15px;
height: 15px;
border-radius: 35%;
background: gray;
display: inline-block;
margin: 50px 15px 10px 15px;
border: 4px solid green;
}
.labels-b :hover {
background: #fff;
transition: 0.3s;
}
.wrapper input[type="radio"] {
display: none;
}
.slider-block-1 {
width: 1000px;
height: 200px;
background: #B25757;
}
.slider-block-2 {
width: 1000px;
height: 200px;
background: #70B257;
}
.slider-block-3 {
width: 1000px;
height: 200px;
background: #B2B257;
}
.slider-block-4 {
width: 1000px;
height: 200px;
background: #5764B2;
}
#bnt-1:checked ~ .slider-block-1 {
transform: translateX(0px);
}
#bnt-2:checked ~ .slider-block-2 {
transform: translateX(-1000px);
}
