Hice una carrusel de imágenes html5 y css3 .
A todos/as:No me sale y no se cual seria mi error,
HTML
<body> <div class="slider"> <input type="radio" class="boton" name="boton" checked="checked"> <label></label> <input type="radio" class="boton" name="boton"> <label></label> <input type="radio" class="boton" name="boton"> <label></label> <input type="radio" class="boton" name="boton"> <label></label> <div class="contenedor-img four-images"> <img src="C:\Users\vegaimagen\Desktop\dangelo-fotos\dangelo.jpg" height="540" width="960"> <img src="C:\Users\vegaimagen\Desktop\dangelo-fotos\dangelo1.JPG"height="540" width="960"> <img src="C:\Users\vegaimagen\Desktop\dangelo-fotos\dangelo2.JPG"height="540" width="960"> <img src="C:\Users\vegaimagen\Desktop\dangelo-fotos\dangelo3.JPG"height="540" width="960"> </div> </div>
En CSS3
.slider{
display: block;
margin: auto;
max-height: 540px;
max-width: 960px;
position: relative;
width: 100%;
}
.boton{
bottom: 30px;
cursor: pointer;
display: block;
margin: 0;
padding: 0;
position: absolute;
opacity: 0;
z-index: 999;
}
.boton:nth-child(1){
left: 30px;
}
.boton:nth-child(3){
left: 60px;
}
.boton:nth-child(5){
left: 90px;
}
.boton:nth-child(7){
left: 120px;
}
.slider label{
background: rgba(50,50,50,.5);
border: 1px solid #777;
border-radius: 7px;
bottom: 30px;
height: 12px;
position: absolute;
width: 12px;
z-index: 100;
}
.slider label:nth-child(2){
left: 30px;
}
.slider label:nth-child(4){
left: 60px;
}
.slider label:nth-child(6){
left: 90px;
}
.slider label:nth-child(8){
left: 120px;
}
.boton:checked + label{
background: rgba(0,0,0,.6);
border-color: #eee;
}
.contenedor-img img{
display: block;
float: left;
}
.four-images{
width: 400%;
}
.four-images img{
width: 25%;
}
.contenedor-img{
left: 0;
position: relative;
-webkit-transition:left .3s ease in;
-ms-transition:left .3s ease in;
-o-transition:left .3s ease in;
-moz-transition:left .3s ease in;
}
.boton:nth-child(1) :checked-contenedor-img{
left: 0;
}
.boton:nth-child(3) :checked-contenedor-img{
left: 100%;
}
.boton:nth-child(5) :checked-contenedor-img{
left: 200%;
}
.boton:nth-child(7) :checked-contenedor-img{
left: 300%;
}
1 Respuesta
Respuesta de Ever Escoto
1
El problema es en el SRC, en la ruta de las imágenes. Copia las imágenes en una carpeta con el nombre imágenes o con el nombre que tu quieras, luego cambia en el código la ruta de las imágenes por:
<img src="imagenes/dangelo.jpg" height="540" width="960">
<img src="C:\Users\vegaimagen\Desktop\dangelo-fotos\dangelo.jpg" height="540" width="960">
