<div class="slider">
<input id="btn-1" type="radio" name="toggle">
<input id="btn-2" type="radio" name="toggle" checked>
<input id="btn-3" type="radio" name="toggle">
<div class="slider-controls">
<label for="btn-1"></label>
<label for="btn-2"></label>
<label for="btn-3"></label>
<span>featured article</span>
</div>
<div class="slider-inner">
<div class="slider-slides">
<img src="img/second-slide.jpg" width="1530" height="580" alt="abs">
<img src="img/main-slide.jpg" width="1530" height="580" alt="bodybuilder">
<img src="img/third-slide.jpg" width="1530" height="580" alt="girl">
</div>
<div class="hm-promo">
<p>Latest news</p>
<h1>BodyBuilding best<br>for you health</h1>
</div>
</div>
</div>.slider {
position: relative;
}
.slider input {
display: none;
}
.slider span {
position: absolute;
top: 53%;
right: -200px;
transform-origin: 0 0;
transform: rotate(-90deg);
white-space: nowrap;
text-indent: -50px;
font-size: 14px;
}
.slider-inner {
overflow: hidden;
}
.slider-controls {
position: absolute;
top: 55%;
right: 110px;
vertical-align: center;
}
#btn-1:checked ~ .slider-controls label[for="btn-1"],
#btn-2:checked ~ .slider-controls label[for="btn-2"],
#btn-3:checked ~ .slider-controls label[for="btn-3"] {
background-color: #fff;
}
#btn-1:checked ~.slider-inner .slider-slides {
transform: translateY(0px);
}
#btn-2:checked ~.slider-inner .slider-slides {
transform: translateY(-580px);
}
#btn-3:checked ~.slider-inner .slider-slides {
transform: translateY(-1160px) ;
}
.slider-slides {
display: flex;
flex-direction: column;
height: 300%;
transition: transform ease;
}
.slider-controls label {
position: relative;
display: block;
top: -50px;
left: 35px;
margin-top: 10px;
width: 6px;
height: 6px;
border: 1px solid #fff;
}
.slider img {
width: 100%;
padding: 0;
margin: 0;
object-fit: cover;
}