Jquery – como crear un slider o rotador de noticias con jquery.cycle

Un SLIDER es un elemento de las interfaces graficas que permiten seleccionar o visualizar un contenido desplazándose generalmente de un lado hacia otro, aunque puede haber diferentes efectos para que el contenido cambie.

Para realizar un efecto SLIDER fácilmente vamos a utilizar la librería JQUERY de la cual podemos obtener información en el siguiente enlace: Qué es Jquery?

A continuación descargaremos los archivos *.js, (archivo de texto plano que contiene scripts de Javascript, y que puede, por tanto, ser modificado con cualquier editor de textos)

Primeramente crearemos una carpeta donde colocaremos todos los archivos .js (Javascript) en nuestro proyecto, llamaremos a la carpeta que crearemos “Plugins

Descargamos el archivo JQUERY y lo colamos en la carpeta “Plugins

Ahora necesitamos el archivo js que realizara el efecto, para ello descargamos el plugin jquery.cycle en la siguiente dirección: Cycle y lo colocamos en la carpeta “Plugins”.

A continuación arrastramos ambos archivos hacia nuestro proyecto, estos deben ir entre las etiquetas HEAD de la página quedando de la siguiente forma:

1
2
<script src=" plugins/jquery-1.11.0.min.js"></script>
<script src="plugins/jquery.cycle.all.js"></script>

Es importante que el archive jquery-1.11.0.min.js quede siempre de primero.

A continuación debemos convocar las funciones que realizaran el efecto de transición.

3
4
5
6
7
8
9
10
11
<script type="text/javascript">
	$(document).ready(function(){
		$('#rotar').cycle({
			fx:     'scrollUp',
			timeout: 6000,
			delay:  -2000
		});
	});    
</script>

Del código anterior debemos hacer énfasis en:

$('#rotar').cycle

Donde #rotar vendría siendo el ID del elemento DIV padre que contiene cada elemento HTML que queremos hacer rotar.

Por ejemplo, coloquemos el siguiente código HTML:

        <div id="rotar" class="cycle-content"> 
			<div>Noticia I</div>
			<div>Noticia II</div>
			<div>Noticia III</div>
        </div>

En el código anterior cada DIV dentro del DIV padre #rotar estaría rotando en nuestra animación.

Para finalizar podemos agregar el siguiente estilo entre las etiquetas head del documento HTML.

<style>
	*{margin:0px; padding:0px; font-family:Calibri;}
 
	.cycle-main{border:solid 1px #333; width:600px; margin:10px auto 0px;}
	
	.cycle-main div{width:580px; padding:5px 10px;}
 
	.cycle-title{background-color:#099;}
	
	.cycle-title label{color:#FFF; margin-left:5px; font-weight:bold;}
	
	.cycle-content{height:150px; text-align:justify; }
 
	.cycle-pie{border-top:solid 1px #333;}
	
	.cycle-pie a{display:inline-block; padding:5px 10px; background-color:#000; color:#FFF; text-decoration:none;}
	
	.cycle-pie a:hover{color:#900;}
</style>

Si quisiéramos darle un poco más de estilo al rotador podemos modificar el código HTML y dejarlo de la siguiente forma:

    <div class="cycle-main" onmouseover="$('#rotar').cycle('pause');" onmouseout="$('#rotar').cycle('resume');">
    	<div class="cycle-title">
        	<label>Noticias</label>
        </div>
        <div id="rotar" class="cycle-content"> 
			<div>Noticia I</div>
			<div>Noticia II</div>
			<div>Noticia III</div>
        </div> 
    </div>

Si se aprecia en el código anterior, el DIV #rotar se mantiene igual lo único que se ha hecho fue agregar otras etiquetas para darle sensación que el retador se encuentra dentro de un panel.

DESARGA EL EJEMPLO COMPLETO AQUI!

Suscribir
Notificar a
guest
5 Comentarios
Comentarios en línea
Ver todos los comentarios
Nghai

Excelente articulo me acabas de salvar la vida, éxito y mis mejores deseos para ti

Rodrigo Ocampos

Amigo una consulta, mi slider aparece bien en mi diseño, pero las imagenes no rotan, a que se debe eso? en donde estaria la falla?

Rodrigo Ocampos

amigo las imagenes de mi slider no rotan, en donde estaria la falla