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