CSS - Carrusel de imagenes en responsive

   
Vista:
Imágen de perfil de Jaimie

Carrusel de imagenes en responsive

Publicado por Jaimie (14 intervenciones) el 24/08/2015 17:52:02
Hola a Todos:
Hice un carrusel de imagenes con css3 y le puse su animation, y use los keyframes .Mi pregunta es que medidas deberian tener las imagenes para que sea responsive.
Gracias por su ayuda de antemano
Valora esta pregunta
Me gusta: Está pregunta es útil y esta claraNo me gusta: Está pregunta no esta clara o no es útil
0
Responder
Imágen de perfil de xve

Carrusel de imagenes en responsive

Publicado por xve (349 intervenciones) el 24/08/2015 18:00:23
Dependerá mucho de donde se encuentren, pero en principio, si no están en ninguna capa, con el min-width:100% y width:100% se te tendría que visualizar correctamente....
Valora esta respuesta
Me gusta: Está respuesta es útil y esta claraNo me gusta: Está respuesta no esta clara o no es útil
1
Comentar
Imágen de perfil de Jaimie

Carrusel de imagenes en responsive

Publicado por Jaimie (14 intervenciones) el 24/08/2015 20:30:27
esto fue lo que hice
en html
1
2
3
4
5
6
7
8
9
10
<div class="slider">
			   <ul>
			   	<li><img src="C:\Users\vegaimagen\Desktop\FOTOSMETAL\rejas.jpg"    alt=""></li>
			   	<li><img src="C:\Users\vegaimagen\Desktop\FOTOSMETAL\rejas1.jpg"   alt=""></li>
			   	<li><img src="C:\Users\vegaimagen\Desktop\FOTOSMETAL\rejas2.jpg"   alt=""></li>
			   	<li><img src="C:\Users\vegaimagen\Desktop\FOTOSMETAL\rejas3.jpg"   alt=""></li>
			   </ul>
			   </div>
		</body>
		</html>
logicamente todo esta metido, solamente hice un copy paste del trozo de codigo

en CSS3 lo hice asi
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
.slider{
	margin: auto;
	overflow: hidden;
 
	width: 95%;
}
.slider ul{
	display: flex;
	padding: 0;
	width: 400%;
 
	animation:cambio 20s infinite;
	animation-direction:alternate;
}
.slider li{
	list-style: none;
	width: 100%;
}
.slider img{
	width: 100%;
}
@keyframes cambio{
	0%{margin-left: 0;}
	20%(margin-left: 0;)
 
	25%{margin-left: -100%;}
	45%{margin-left: -100%;}
 
	50%{margin-left: -200%;}
	70%{margin-left: -200%;}
 
	75%{margin-left: -300%;}
	100%{margin-left: -300%;}

Yo se que las imagenes estan grandes pero si le coloco un widt o un height en el html me siguen saliendo demasiados grandes.
No se si tenga que reducirlas con algun programa etc.
Gracias de antemano
Valora esta respuesta
Me gusta: Está respuesta es útil y esta claraNo me gusta: Está respuesta no esta clara o no es útil
0
Comentar

Carrusel de imagenes en responsive

Publicado por Rubenqs (1 intervención) el 25/08/2015 00:33:42
Revisa los ejemplos en boostrap a mi me funciona el responsive sin problema.
Valora esta respuesta
Me gusta: Está respuesta es útil y esta claraNo me gusta: Está respuesta no esta clara o no es útil
1
Comentar

Carrusel de imagenes en responsive

Publicado por walter (47 intervenciones) el 31/08/2015 17:40:23
fijate este ejemplo que hice hace unos meses:
http://sonidosdistantes.com.ar/2015/
Valora esta respuesta
Me gusta: Está respuesta es útil y esta claraNo me gusta: Está respuesta no esta clara o no es útil
0
Comentar
Imágen de perfil de Jaimie

Carrusel de imagenes en responsive

Publicado por Jaimie (14 intervenciones) el 01/09/2015 19:28:53
Excelente me gusto mucho...soy un poco novato en esto...lo hiciste con boostrap?...yo quiero aprender bien codigo html5 y css3, pero gracias por compartir tu proyecto
Valora esta respuesta
Me gusta: Está respuesta es útil y esta claraNo me gusta: Está respuesta no esta clara o no es útil
0
Comentar