Slideshow automatico

[z.cristiano]

Buonasera,
sono riuscito a fare lo slideshow automatico solo con CSS però, i pulsanti non funzionano....perchè? Cosa ho sbagliato?

#sfondo_slide_img {
    padding-top:200px;
    padding-bottom:200px;
    height: 500px;
}


.CSSgal {
    position: relative;
    overflow: hidden;
    height: 100%;
}

.slider {
    animation: 18s slides_animation infinite ease-in-out;
}

.CSSgal .slider {
    height: 100%;
    white-space: nowrap;
    font-size: 0;
    transition: 0.8s;
}

.CSSgal .slider > * {
    font-size: 1rem;
    display: inline-block;
    white-space: normal;
    vertical-align: top;
    height: 100%;
    width: 100%;
    background: none 50% no-repeat;
    background-size: cover;
}

.CSSgal .prevNext {
    position: absolute;
    z-index: 1;
    top: 50%;
    left:0;
    right:0;
    width: 1200px;
    height: 0;
    margin-left: auto;
  margin-right: auto;
    
}

.CSSgal .prevNext > div+div {
    visibility: hidden;
}

.CSSgal .prevNext a {
    background: #fff;
    position: absolute;
    width:       60px;
    height:      60px;
    line-height: 60px;
    text-align: center;
    opacity: 0.7;
    -webkit-transition: 0.3s;
    transition: 0.3s;
    -webkit-transform: translateY(-50%);
    transform: translateY(-50%);
    left: 0;
}
.CSSgal .prevNext a:hover {
    opacity: 1;
}
.CSSgal .prevNext a+a {
    left: auto;
    right: 0;
}

.CSSgal .bullets {
    position: absolute;
    z-index: 2;
    bottom: 0;
    padding: 10px 0;
    width: 100%;
    text-align: center;
}
.CSSgal .bullets > a {
    display: inline-block;
    width:       30px;
    height:      30px;
    line-height: 30px;
    text-decoration: none;
    text-align: center;
    background: rgba(255, 255, 255, 1);
    -webkit-transition: 0.3s;
    transition: 0.3s;
}
.CSSgal .bullets > a+a {
    background: rgba(255, 255, 255, 0.5);
}
.CSSgal .bullets > a:hover {
    background: rgba(255, 255, 255, 0.7) !important;
}

.CSSgal >s:target ~ .bullets >* {      background: rgba(255, 255, 255, 0.5);}

#s1:target ~ .bullets >*:nth-child(1) {background: rgba(255, 255, 255,   1);}
#s2:target ~ .bullets >*:nth-child(2) {background: rgba(255, 255, 255,   1);}
#s3:target ~ .bullets >*:nth-child(3) {background: rgba(255, 255, 255,   1);}

.CSSgal >s:target ~ .prevNext >* {      visibility: hidden;}

#s1:target ~ .prevNext >*:nth-child(1) {visibility: visible;}
#s2:target ~ .prevNext >*:nth-child(2) {visibility: visible;}
#s3:target ~ .prevNext >*:nth-child(3) {visibility: visible;}

#s1:target ~ .slider {transform: translateX(0%); -webkit-transform: translateX(0%);}
#s2:target ~ .slider {transform: translateX(-100%); -webkit-transform: translateX(-100%);}
#s3:target ~ .slider {transform: translateX(-200%); -webkit-transform: translateX(-200%);}

@keyframes slides_animation {
    0%{
        transform: translateX(0%);
    }
    25%{
        transform: translateX(0%);
    }
    30%{
        transform: translateX(-100%);
    }
    50%{
        transform: translateX(-100%);
    }
    55%{
        transform: translateX(-200%);
    }
    75%{
        transform: translateX(-200%);
    }
    80%{
        transform: translateX(0%);
    }
    100%{
        transform: translateX(0%);
    }
}

.CSSgal{
    color: #fff;   
    text-align: center;
}
.CSSgal .slider h2 {
    margin-top: 40vh;
    font-weight: 200;
    letter-spacing: -0.06em;
    word-spacing: 0.2em;
    font-size: 3em;
}
.CSSgal a {
    border-radius: 50%;
    margin: 0 3px;
    color: rgba(0,0,0,0.8);
    text-decoration: none;
}

 <div class="CSSgal">

  <!-- Don't wrap targets in parent -->
  <input type="checkbox" id="s1" style="display: none;">
  <input type="checkbox" id="s2" style="display: none;">
  <input type="checkbox" id="s3" style="display: none;">

  <div class="slider">
    
      <div style="background: #990000 url('4180270367Slider_workshop.jpg') center no-repeat; background-size: 100%;" id="sfondo_slide_img">
        </div>
      
      <div style="background: #990000 url('4180270367Slider_workshop.jpg') center no-repeat; background-size: 100%;" id="sfondo_slide_img">
        </div>
      
      <div style="background: #990000 url('4180270367Slider_workshop.jpg') center no-repeat; background-size: 100%;" id="sfondo_slide_img">
        </div>
      
  </div>
 
  <div class="prevNext">
    <div><a href="#s3"><img src="images/ps_sx_slide.png" border="0" style="width:60px;"></a><a href="#s2"><img src="images/ps_dx_slide.png" border="0" style="width:60px;"></a></div>
    <div><a href="#s1"><img src="images/ps_sx_slide.png" border="0" style="width:60px;"></a><a href="#s3"><img src="images/ps_dx_slide.png" border="0" style="width:60px;"></a></div>
    <div><a href="#s2"><img src="images/ps_sx_slide.png" border="0" style="width:60px;"></a><a href="#s1"><img src="images/ps_dx_slide.png" border="0" style="width:60px;"></a></div>

  </div>

  <div class="bullets" style="display: none;">
    <a href="#s1">1</a>
    <a href="#s2">2</a>
    <a href="#s3">3</a>
  </div>

</div>

MI aiutate?