CSS - Carrusel de imagenes en responsive

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 clara

No me gusta: Está pregunta no esta clara o no es útil

Responder

Pos: 2

Val: 624

Carrusel de imagenes en responsive

Publicado por xve (490 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 clara

No me gusta: Está respuesta no esta clara o no es útil

Comentar

Carrusel de imagenes en responsive

Publicado por Jaimie (14 intervenciones) el 24/08/2015 20:30:27

esto fue lo que hice
en html

<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

.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

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

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

Comentar

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

Comentar

problemas con hoja de estilos

Uso de @ en css