CSS image slider without "for" tag

I successfully implemented this CSS image slider.

Now, however I want to insert it in a modal window of a reveal.js presentation.

I am assuming from this other thread, that the multimodal plugin for reveal.js does not remove the hidden div contents but instead it appends to the modal div. This creates 2 instances for the same radio buttons and therefore the labels containing for tags do not work for changing the images. Only by making the radio buttons visible am I able to change the images. But I would rather use a label that I can tune, enlarge and prettify with CSS.

Since I am not capable of modifying the plugin, I consider the best option to find an alternative to the for tag. I tried wrapping the radio button within the label tag as follows, but with no luck. Once the radio button is inside the label tag, the images do not change.

<label class="bullets">
  <input type="radio" checked="checked" name="images" id="i1">
  <span class="checkmark"></span>
</label>
<div class="slide_img" id="one">            
  <img src="https://picsum.photos/id/237/300/200">
</div>

The CSS part that is in charge of changing the images is the following:

.slide_img{z-index: -1;}

    #i1:checked ~ #one  ,
    #i2:checked ~ #two  ,
    #i3:checked ~ #three,
    #i4:checked ~ #four 
    {z-index: 9; animation: scroll 1s ease-in-out;}

/* The container */
.bullets {
  display: inline;
  position: relative;
  padding-left: 35px;
  margin-bottom: 12px;
  cursor: pointer;
  font-size: 22px;
  -webkit-user-select: none;
  -moz-user-select: none;
  -ms-user-select: none;
  user-select: none;
}

/* Hide the browser's default radio button */
.bullets input {
  position: absolute;
  opacity: 0;
  cursor: pointer;
}

/* Create a custom radio button */
.checkmark {
  position: absolute;
  top: 0;
  left: 0;
  height: 15px;
  width: 15px;
  background-color: #eee;
  border-radius: 50%;
}

/* On mouse-over, add a grey background color */
.bullets:hover input ~ .checkmark {
  background-color: #ccc;
}

/* When the radio button is checked, add a blue background */
.bullets input:checked ~ .checkmark {
  background-color: #2196F3;
}
.container{
        margin: 0 auto;
        margin-top: 20px;
        position: relative;
        width: 70%;
        height: 0;
        padding-bottom: 38%;
      user-select: none;
        background-color: #1c1c1c;
        border: solid 10px #616161;
        border-radius:10px ; 
    }

    .container .slide_img{
        position: absolute;
        width: 100%;;
        height: 100%;
    }
    .container .slide_img img{
        width: inherit;
        height: inherit;
    }


.slide_img{z-index: -1;}

    #i1:checked ~ #one  ,
    #i2:checked ~ #two  ,
    #i3:checked ~ #three,
    #i4:checked ~ #four 
    {z-index: 9; animation: scroll 1s ease-in-out;}

@keyframes scroll{
    0%{ opacity:.4;}
    100%{opacity:1;}
}

<div class="container">
  <label class="bullets">
    <input type="radio" checked="checked" name="images" id="i1" />
    <span class="checkmark"></span>
  </label>
  <label class="bullets">
    <input type="radio" name="images" id="i2" />
    <span class="checkmark"></span>
  </label>
  <label class="bullets">
    <input type="radio" name="images" id="i3" />
    <span class="checkmark"></span>
  </label>
  <label class="bullets">
    <input type="radio" name="images" id="i4" />
    <span class="text checkmark"></span>
  </label>

  <div class="slide_img" id="one">
    <img src="https://picsum.photos/id/237/300/200" />
  </div>

  <div class="slide_img" id="two">
    <img src="https://picsum.photos/id/21/200/300" />
  </div>

  <div class="slide_img" id="three">
    <img src="https://picsum.photos/id/456/200/300" />
  </div>

  <div class="slide_img" id="four">
    <img src="https://picsum.photos/id/536/200/300" />
  </div>
</div>

You can check it our in this jsFiddle. Could anyone point out a CSS solution for this issue? I would prefer not to use js so as not to mesh with the reveal.js stuff and its plugins.

Solution

As commented, the selector :has() can help you here : https://developer.mozilla.org/en-US/docs/Web/CSS/:has

example from your codes

/* The container */

.bullets {
  display: inline;
  position: relative;
  padding-left: 35px;
  margin-bottom: 12px;
  cursor: pointer;
  font-size: 22px;
  -webkit-user-select: none;
  -moz-user-select: none;
  -ms-user-select: none;
  user-select: none; 
  z-index:10;
}


/* Hide the browser's default radio button */

.bullets input {
  position: absolute;
  opacity: 0;
  cursor: pointer;
}


/* Create a custom radio button */

.checkmark {
  position: absolute; 
  top: 0;
  left: 0;
  height: 15px;
  width: 15px;
  background-color: #eee;
  border-radius: 50%;
}


/* On mouse-over, add a grey background color */

.bullets:hover input~.checkmark {
  background-color: #ccc;
}


/* When the radio button is checked, add a blue background */

.bullets input:checked~.checkmark {
  background-color: #2196f3;
}

.container {
  margin: 0 auto;
  margin-top: 20px;
  position: relative;
  width: 70%;
  height: 0;
  padding-bottom: 38%;
  user-select: none;
  background-color: #1c1c1c;
  border: solid 10px #616161;
  border-radius: 10px;
}

.container .slide_img {
  position: absolute;
  width: 100%;
  height: 100%;
  top:0;
}

.container .slide_img img {
  width: inherit;
  height: inherit;
}

.slide_img {

}

label:has(#i1:checked)~#one,
label:has(#i2:checked)~#two,
label:has(#i3:checked)~#three,
label:has(#i4:checked)~#four {
  z-index: 9;
  animation: scroll 1s ease-in-out;
}

@keyframes scroll {
  0% {
    opacity: 0.4;
  }
  100% {
    opacity: 1;
  }
}

<div class="container">
  <label class="bullets">
    <input type="radio" checked="checked" name="images" id="i1" />
    <span class="checkmark"></span>
  </label>
  <label class="bullets">
    <input type="radio" name="images" id="i2" />
    <span class="checkmark"></span>
  </label>
  <label class="bullets">
    <input type="radio" name="images" id="i3" />
    <span class="checkmark"></span>
  </label>
  <label class="bullets">
    <input type="radio" name="images" id="i4" />
    <span class="text checkmark"></span>
  </label>

  <div class="slide_img" id="one">
    <img src="https://picsum.photos/id/237/300/200" />
  </div>

  <div class="slide_img" id="two">
    <img src="https://picsum.photos/id/21/200/300" />
  </div>

  <div class="slide_img" id="three">
    <img src="https://picsum.photos/id/456/200/300" />
  </div>

  <div class="slide_img" id="four">
    <img src="https://picsum.photos/id/536/200/300" />
  </div>
</div>