Pure CSS Slideshow with animation delay fadein fadeout effects

Question

I have this pure CSS slideshow working in "auto-play": jsfiddle. I would like to make the transition of this slideshow to work with buttons, only with CSS, with this HTML:

   <label for="button-4" class="button-label-4"></label>
   <label for="button-1" class="sp-arrow sp-a1"></label>
   <label for="button-2" class="sp-arrow sp-a2"></label>
   <label for="button-3" class="sp-arrow sp-a3"></label>
   <label for="button-4" class="sp-arrow sp-a4"></label>

   <ul class="cb-slideshow">
      <li>
         <span>Image 01</span>
         <div>
            <p class="text_products">Some Text</p>
         </div>
      </li>
      <li>
         <span>Image 02</span>
         <div>
            <p class="text_products">Some Text</p>
         </div>
      </li>
      <li>
         <span>Image 03</span>
         <div>
            <p class="text_products">Some Text</p>
         </div>
      </li>
      <li>
         <span>Image 04</span>
         <div>
            <p class="text_products">Some Text</p>
         </div>
      </li>
   </ul>

do you know how I could do? I've tried but is doesn't work.

See jsfiddle for css.

Answer 1

I've updated the code and now slideshow works with buttons: jsfiddle

I've removed call for animation: imageAnimation 24s linear infinite 0s; on <span> elements(slide show background images) and on .cb-slideshow li div where some text is shown with different timing respect his background. Now I have the slide show with auto play(who doesn't work correctly) and manual transition by the buttons, who works fine like I would've in my question.