Carrusel con progressbar : JQuery (Ejemplo)

closeHola! hace 5 years 5 months 25 days que escribí esta entrada, puede que esta información ya no sea valida en la actualidad, por favor se comprensivo conmigo cuando comentes 🙂

Hace unos días me encontré un tutorial donde explican como hacer un carrusel al estilo apple, lo he modificado un poco para que sea mucho  mas “bonito” y con algunos efectos nuevos, entre las mejoras que le agregue podemos encontrar:

  • Barra de progreso de la animación
  • Stop animación cuando el cursor esta sobre el carrusel
  • Start animación cuando el cursor esta por fuera de el carrusel
  • Se agrega texto en el carrusel
  • Efectos de desvanecimiento, para simular velocidad entre las transiciones.
  • Auto-reiniciar la animación cuando se llega al final.

Pueden ver el ejemplo del carrusel ya modificado aqui.

¡Lo Siento! Este link no esta disponible en el momento

Espero que les sea de mucha utilidad.

Actualización 23 Oct 2012

Si no te funciona el ejemplo, cambia todo el contenido de la etiqueta header del archivo demo.html por:

<head>
	<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
	<title>Ejemplo Carrusel - Nexxuz.com</title>
	<link rel="stylesheet" type="text/css" href="demo.css" />
	<link rel="stylesheet" href="http://code.jquery.com/ui/1.9.0/themes/base/jquery-ui.css">
	<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.4/jquery.min.js"></script>
	<script src="http://code.jquery.com/ui/1.7.0/jquery-ui.js"></script>
	<script type="text/javascript" src="script.js"></script>
 
</head>

You may also like...

5 Responses

  1. Está bastante bien, conocía cosas similares en Flash, en JQuery no lo había visto.
    Saludos

  2. EDGAR dice:

    Hola, interesante tu articulo, soy de blogger, y quisiera poner un carrusel de videos, puede ser horizontal o vertical en el sidebar, y que sean tomados de las etiquetas y ademas que puedan ser no solo de you tube si no de cualquier procedencia; la curiosidad, es que salgan los videos en si no una imagen que nos lleve al video, y por supuesto que estos no se activen si no manualmente, si no meterian mucha bulla

    Agradecere tu comentario

  3. Ruben dice:

    Hola, como hago para cambiar el texto que va dentro, es decir debajo donde dice titulo y como se hace para cambiar las imagenes que trae el carousel por defecto.

  4. Hola, cuando cargo mi página me muestra una ventana de emergencia con el sig. mensaje: Please, fill in width & height for all your images ! he visto que ese mensaje viene del script.js ya modifique el tamaño de la imágenes, pero no encuentro resultados. Si me orientaras un poco te lo agradecería. Gracias, buena tarde !

Deja un comentario

Tu dirección de correo electrónico no será publicada. Los campos obligatorios están marcados con *