JQuery Cycle: Plugin para realizar slideshow de imagenes o Divs

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

JQuery Cycle es un excelente plugin para JQuery, que nos permite realizar slideshow de nuestras fotografias y divs fácilmente, es muy util para hacer carrusel de contenidos e imagenes, soporta muchos efectos y diferentes tipos de transiciones entre imágenes.

En el siguiente ejemplo veremos como hacer un slideshow de unas imagenes usando este plugin.

Agregamos en nuestro head el JQuery y el Plugin

<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.4.1/jquery.min.js"></script>
<script type="text/javascript" src="http://cloud.github.com/downloads/malsup/cycle/jquery.cycle.all.2.74.js"></script>

Agregamos el CSS para darle algo de estilo

<style type="text/css">
.slideshow { 
	height: 272px; width: 332px; margin: auto ;
 
	}
.slideshow img { 
	padding: 15px; border: 1px solid #ccc; 
	background-color: #FFFFFF;
}
</style>

Ahora Ejecutamos el plugin cuando todo el DOM este cargado

<script type="text/javascript">
$(document).ready(function() {
    $('.slideshow').cycle({
		fx:    'shuffle', 
		delay: -4000 
	});
});
</script>

En nuestro BODY agregamos las imágenes que queremos mostrar

	<div class="slideshow">
		<img src="img/1.jpg" width="300" height="200"  />
		<img src="img/2.jpg" width="300" height="200" />
		<img src="img/3.jpg" width="300" height="200" />
		<img src="img/4.jpg" width="300" height="200" />
		<img src="img/5.jpg" width="300" height="200" />
		<img src="img/6.jpg" width="300" height="200" />
		<img src="img/7.jpg" width="300" height="200" />
		<img src="img/8.jpg" width="300" height="200" />
		<img src="img/9.jpg" width="300" height="200" />
 
	</div>

Y listo tenemos nuestro efecto terminado, para ver el ejemplo funcionando podemos ir al siguiente link

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

Pagina Oficial Del Plugin

You may also like...

3 Responses

  1. He usado este plugin en un proyecto y muy bien. Facil de implementar y en la web de los desarrolladores hay bastantes ejemplos e infinidad de variantes.

  2. Joaquin dice:

    Como puedo hacer para que al darle clic a una imagen me redireccione a otra página

  3. Nextor dice:

    Estimados, no funciona en mi site, quedan las imagenes estaticas, sin slide se debe a que no esta online?

Deja un comentario

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