Buonasera,
sono riuscito a fare uno slideshow automatico ma non funzionano i pulsanti, perché? Cosa ho sbagliato?

Ecco il codice

codice HTML:
<style>

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

.CSSgal {	position: relative;	overflow: hidden;	height: 100%; /* Or set a fixed height */}
.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; /* If you want to place numbers */	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); /* Dim all but first */}.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;}
</style>

<div class="CSSgal">
<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('1136658375151400x1400 x300 ris.jpg') center no-repeat; background-size: 100%;" id="sfondo_slide_img">

		</div>

<div style="background: #990000 url('5377393078finanziamento.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>
HELP ME....