Hola a todos/as:Estoy aprendiendo hacer un slider de imagenes sin necesida de jquery ni javacript y he hecho este codigo pero no me sale y no se cual puede ser mi error , de antemano les agradezco cualquier ayuda
HTML5<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>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%;
}Gracias de antemano por su ayuda
Tema: Carrusel de imagenes con html5 y css3 y no me sale (Leído 4441 veces)
RSS -
WAP2