Ciao a tutti ragazzi e ragazze,

Sono nuovo del Forum ed un neofita del linguaggio HTML/CSS, mi sono iscritto perchè seguo sempre i tutorial di HTML.

Questa volta ho provato a creare uno slideshow per una mia landing page ma ci son degli errori, non scorre le immagini e non fa vedere neanche i pulsanti per cambiare immagine.

Di seguito vi metto i codici CSS ed HTML che ho usato:

Codice style.css
codice:
.slider-container{
    width: 900px;
    height: 300px;
    background-color: white;
    margin-left: auto;
    margin-right: auto;
    margin-top: 0px;
    text-align: center;
    overflow: hidden;
}




.image-container
{
    width: 2700px;
    background-color: white;
    height: 300px;
    clear: both;
    position: relative;


    -webkit-transition: left 2s;
    -moz-transition: left 2s;
    -o-transition: left 2s;
    transition: left 2s;
}




#slider-image-1:target ~ .image-container
{
   left: 0px;


}
#slider-image-2:target ~ .image-container
{
   left: -900px;


}
#slider-image-3:target ~ .image-container
{
   left: -1800px;


}




.button-container
{
	position: relative;
	top: -20px;
        
}


.slider-change
{
	display: inline-block;
	height: 5px;
	width: 20px;
	border: 1px solid black;
	background-color: #31a50e;
}
Codice HTML del sito

codice HTML:
<head>
<title>slider-recensioni-erbemoni</title>    <link href="style.css" type="text/css" rel="stylesheet" />  </head>

<body>
<div class="slider-container"> <span id="slider-image-1"></span>                                          <span id="slider-image-2"></span> <span
                                            id="slider-image-3"></span>                                          <div class="image-container"> <img src="images/recensione-strawberry-cannabis-light-erbemoni.JPG"
                                              class="slider-image" alt="recensione-strawberry-cannabis-light-erbemoni"
                                              align="left" /> <img src="images/recensione-cannatonic-cannabis-light-erbemoni.JPG"
                                              class="slider-image" alt="recensione-cannatonic-cannabis-light-erbemoni"
                                              align="left" /> <img src="images/recensione-boston-george-cannabis-light-erbemoni.JPG"
                                              class="slider-image" alt="recensione-boston-george-cannabis-light-erbemoni"
                                              align="left" /> </div>                                          <div class="button-container"> <a href="#slider-image-1"
                                              class="slider-change"></a> <a href="#slider-image-2"
                                              class="slider-change"></a> <a href="#slider-image-3"
                                              class="slider-change"></a> </div>                                        </div>
</body>
Questi sono i codici, ho provato dieci mila tentativi ma continuo a bloccarmi, il risultato che mi esce potete vederlo qui: http://erbalegalevarese.site/

Il tutorial che ho usato è questo: https://www.html.it/articoli/creare-...-css-tutorial/

Ringrazio in anticipo chiunque riesca ad aiutarmi