css checkbox not applying changes when in the :checked state - html

Question

I am trying to bring some hidden text into view when a radio checkbox is checked. I cant quite work out why the :checked styling is not applying once the label is checked. I think i am being really daft but just cant work out what is going on.
Could anyone lend some advice?
.wrap__wrapper {
width: 400px;
margin: 0 auto;
}
.wrap {
position: relative;
overflow: hidden;
}
.wrap__radio--input {
display: none;
}
.wrap__inner {
width: 300%;
left: 0;
transition: all 1s;
}
.wrap__slides {
float: left;
width: 33.333%;
}
.wrap__text {
font-size: 16px;
text-align: center;
}
.wrap__button {
font-size: 1.8rem;
cursor: pointer;
text-align: center;
display: block;
}
.wrap__radio--input:checked~.wrap__inner {
transition: all 1s;
background: red;
left: -100%;
}
<div class="wrap__wrapper">
<div class="wrap">
<input type="radio" class="wrap__radio--input" id="slide--1">
<label for="slide--1" class="wrap__button">next slide</label>
<div class="wrap__inner">
<div class="wrap__slides">
<p class="wrap__text">slide1</p>
</div>
<div class="wrap__slides">
<p class="wrap__text">slide2</p>
</div>
</div>
</div>
</div>

Answer 1

Your element need to be positionned so you have to set position property to relative, absolute or fixed on .wrap__inner to be able to use left property. You cannot update position of static element.
.wrap__wrapper {
width: 400px;
margin: 0 auto;
}
.wrap {
position: relative;
overflow: hidden;
}
.wrap__radio--input {
display: none;
}
.wrap__inner {
position:relative;
width: 300%;
left: 0;
transition: all 1s;
}
.wrap__slides {
float: left;
width: 33.333%;
}
.wrap__text {
font-size: 16px;
text-align: center;
}
.wrap__button {
font-size: 1.8rem;
cursor: pointer;
text-align: center;
display: block;
}
.wrap__radio--input:checked~.wrap__inner {
transition: all 1s;
background: red;
left: -100%;
}
<div class="wrap__wrapper">
<div class="wrap">
<input type="radio" class="wrap__radio--input" id="slide--1">
<label for="slide--1" class="wrap__button">next slide</label>
<div class="wrap__inner">
<div class="wrap__slides">
<p class="wrap__text">slide1</p>
</div>
<div class="wrap__slides">
<p class="wrap__text">slide2</p>
</div>
<div class="wrap__slides">
<p class="wrap__text">slide3</p>
</div>
</div>
</div>
</div>

Answer 2

You can use the :before or :after pseudo-elements to toggle the previous and next text, apply the position property different from the default value of static to the .wrap__inner div and most importantly change the input type="radio" to input type="checkbox" to be able to toggle the checkbox state:
.wrap__wrapper {
width: 400px;
margin: 0 auto;
}
.wrap {
position: relative;
overflow: hidden;
}
.wrap__radio--input {
display: none;
}
.wrap__inner {
position: relative; /* any value other than default */
width: 300%;
left: 0;
transition: all 1s;
}
.wrap__slides {
float: left;
width: 33.333%;
}
.wrap__text {
font-size: 16px;
text-align: center;
}
.wrap__button {
font-size: 1.8rem;
cursor: pointer;
text-align: center;
display: block;
}
/* added */
.wrap__button:after {
content: "next";
}
.wrap__radio--input:checked + .wrap__button:after {
content: "previous";
}
/***/
.wrap__radio--input:checked ~ .wrap__inner {
transition: all 1s;
background: red;
left: -100%;
}
<div class="wrap__wrapper">
<div class="wrap">
<input type="checkbox" class="wrap__radio--input" id="slide--1">
<label for="slide--1" class="wrap__button"></label>
<div class="wrap__inner">
<div class="wrap__slides">
<p class="wrap__text">slide1</p>
</div>
<div class="wrap__slides">
<p class="wrap__text">slide2</p>
</div>
</div>
</div>
</div>
Note: Like I wrote in the comment, this only works for two slides.