На 3 странице слайдера нужно чтобы синий блок был по середине, как это сделать?
<!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="wrapper-slider">
<input type="radio" id="btn-1" name="button1" checked>
<input type="radio" id="btn-2" name="button1">
<input type="radio" id="btn-3" name="button1">
<input type="radio" id="btn-4" name="button1">
<div class="labels-b">
<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">
<li class="slider-block-1"></li>
<li class="slider-block-2"></li>
<li class="slider-block-3">
<span class="block-buy">123</span>
</li>
<a href="https://mail.ru/"><li class="slider-block-4"></li></a>
</div>
</div>
</div>
</body>
</html>
* {
margin: 0px;
padding: 0px;
}
.clearfix::after {
content: "";
display: table;
clear: both;
}
.wrapper {
width: 1000px;
height: 2000px;
margin: 0px auto;
background: yellow;
}
.wrapper-slider {
overflow: hidden;
}
.slider {
margin: 0px;
padding: 0px;
width: 4000px;
height: 200px;
overflow: hidden;
transition: 0.3s;
font-size: 0px;
}
.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;
}
.label-b:hover {
background: #fff;
transition: 0.3s;
}
.wrapper input[type="radio"] {
display: none;
}
.slider-block-1 {
display: inline-block;
width: 1000px;
height: 200px;
background: #B25757;
}
.slider-block-2 {
display: inline-block;
width: 1000px;
height: 200px;
background: none;
background-image: url("images/1.jpg");
}
.slider-block-3 {
display: inline-block;
width: 1000px;
height: 200px;
background: #B2B257;
}
.slider-block-4 {
display: inline-block;
width: 1000px;
height: 200px;
background: #5764B2;
}
#btn-1:checked ~ .slider {
transform: translateX(0px);
}
#btn-2:checked ~ .slider {
transform: translateX(-1000px);
}
#btn-3:checked ~ .slider {
transform: translateX(-2000px);
}
#btn-4:checked ~ .slider {
transform: translateX(-3000px);
}
#btn-1:checked ~ .labels-b .label-b[for="btn-1"] {
background: red;
}
#btn-2:checked ~ .labels-b .label-b[for="btn-2"] {
background: red;
}
#btn-3:checked ~ .labels-b .label-b[for="btn-3"] {
background: red;
}
#btn-4:checked ~ .labels-b .label-b[for="btn-4"] {
background: red;
}
#btn-1:checked ~ .labels-b .label-b[for="btn-1"],
#btn-2:checked ~ .labels-b .label-b[for="btn-2"],
#btn-3:checked ~ .labels-b .label-b[for="btn-3"],
#btn-4:checked ~ .labels-b .label-b[for="btn-4"] {
transition: 0.3s;
}
.slider-block-3 .block-buy {
position: absolute;
width: 300px;
height: 150px;
background: blue;
font-size: 30px;
color: white;
margin: 25px auto;
}
