Почему у меня слайдер не функционирует?

Question

[AhmedGasem]

https://jsfiddle.net/6jt6n16e/
HTML:

Трендовые ТВ-шоу




Ходячие мертвецы


Сидячие мертвецы












CSS:

.trending{
position:absolute;
width:970px;
height:55px;
background-color:black;
margin-top:-55px;
opacity: 0.5;
animation-name: trending;
animation-duration: 1.5s;
animation-delay:1s;
animation-fill-mode:forwards;
z-index:1;

}
.trending p{
font-size:20px;
font-weight:bold;
padding:15px;
color:#68685e;
}

@keyframes trending{
100%{ transform: translateY(55px);}

}
.dead{
width:970px;
}
.dead p{
position:absolute;
height: 284px;
text-transform:uppercase;
font-weight:bold;
color:#ffffff;
margin-left:700px;
margin-top:-50px;
font-size:20px;
}
.alive{
width:970px;
}
.slider{
width:200%;
overflow: hidden;
}
.slider div{
float:left;
}
.slider-1{
overflow: hidden;
}
.slider-controls{
margin-bottom: 10px;
text-align: center;
}
.slider-ikon{
margin-top:-70px;
}
.slider-ikon input[type=radio] {
display: none;
}
.slider-controls label {
display: inline-block;
width: 30px;
height: 30px;
margin: 0 3px;
border: 4px solid white;
border-radius: 50%;
background-color: #cccccc;
box-shadow: 0px 0px 2px rgba(0, 0, 0, 0.8);
cursor: pointer;
opacity: 0.5;
}
#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:black;
opacity: 0.5;
}
#btn-1:checked ~ .slider-1 .slider {
transform: translate(0);
}

#btn-2:checked ~ .slider-1 .slider {
transform: translate(-970px);
}

Answer 1

[WhiteSama]

не работает этот css

#btn-1:checked ~ .slider-1 .slider {
transform: translate(0);
}

#btn-2:checked ~ .slider-1 .slider {
transform: translate(-970px);
}