Hack radio

Bonsoir à tous,

Voilà j'ai utilisé un hack radio pour un slider (2 images)... Si le hack fonctionne à merveille, je n'arrive toujours pas clairement à expliquer le fonctionnement.Si une bonne âme voudrait bien m'expliquer le pourquoi du comment :

ici le html:

<div class="carousel">
                  
                  <!--chevrons-->
                  <input class="carousel__activator" type="radio" name="carousel" id="F" checked="checked"/> <!--1ere image-->   
                  <input class="carousel__activator" type="radio" name="carousel" id="J" />

                  <div class="carousel__controls">
                   <label class="carousel__control carousel__control--backward" for="J"></label> <!--chaque slide a ses 2 chevrons-->
                   <label class="carousel__control carousel__control--forward" for="J"></label>
                  </div>
    
                  <div class="carousel__controls">
                   <label class="carousel__control carousel__control--backward" for="F"></label> <!--chaque slide a ses 2 chevrons-->
                   <label class="carousel__control carousel__control--forward" for="F"></label>
                  </div>

                  
                  
                  <!--Slides-->
                  <div class="carousel__track">
                   <ul>
                    <li class="carousel__slide"> </li>     <!--les 2 images-->
                    <li class="carousel__slide"></li>
                   </ul>
                  </div>

et là son CSS :

.carousel__activator:nth-of-type(1):checked ~ .carousel__controls:nth-of-type(1){  
  display: block;
}

.carousel__activator:nth-of-type(2):checked ~ .carousel__controls:nth-of-type(2) {  
  display: block;
}

.carousel__activator:nth-of-type(2):checked ~ .carousel__track {                  
  -webkit-transform: translateX(-100%);
          transform: translateX(-100%);
}

.carousel__track .carousel__slide:nth-of-type(1) {
  -webkit-transform: translateX(0%);                       
          transform: translateX(0%);
  background-image: url("images/slider/bg1.jpg");
  background-size: 100% 100%;
  background-repeat: no-repeat;  
}

.carousel__track .carousel__slide:nth-of-type(2) {
  -webkit-transform: translateX(100%);                      
          transform: translateX(100%);
  background-image: url("images/slider/bg2.jpg");
  background-size: 100% 100%;
  background-repeat: no-repeat;  
}

Bonjour. J'avais tenté de mettre le code dans un CodePen pour le tester en ligne, mais il manque une partie du code pour pouvoir répondre à cette question.

On pourra commencer par s'interroger pourquoi des <label> ont la même valeur pour l'attribut for

Olivier C a écrit :
Bonjour. J'avais tenté de mettre le code dans un CodePen pour le tester en ligne, mais il manque une partie du code pour pouvoir répondre à cette question.

Tiens essai en rajoutant les définitions des conteneur :

/*conteneur des slides*/
.carousel__track 
{
  position: absolute;
  top: 40px;
  right: 0;
  bottom: 0;
  left: 0;
  padding: 0;
  margin: 0;
  transition: -webkit-transform 0.5s ease 0s;                              /*vitesse du slide*/
  transition: transform 0.5s ease 0s;
  transition: transform 0.5s ease 0s, -webkit-transform 0.5s ease 0s;
}
  
/*images du slides*/
.carousel__slide 
{
  height: 100%;
  position: absolute;
}
/*chevrons*/
.carousel__control 
{
  height: 30px;
  width: 30px;
  margin-top: -15px;
  top: 50%;
  position: absolute;
  cursor: pointer;
  border-width: 5px 5px 0 0;  /*les fleches*/
  border-style: solid;
  border-color: #fafafa;
  opacity: 0.35;
  z-index: 3;
}
.carousel__control--backward 
{
  left: 10px;
  -webkit-transform: rotate(-135deg);    /*rotation chevrons*/
          transform: rotate(-135deg); 
}
.carousel__control--forward {
  right: 10px;
  -webkit-transform: rotate(45deg);
          transform: rotate(45deg);
}

Merci