En una entrada pasada comentaba que trabajé en un slider propio y ahora lo pongo a disposición de todos, este slider hace función de paneo con el número de imágenes que quieran, quizá no sea el efecto más grandioso del mundo pero solo se me ocurrió en un momento, quizá en el futuro agregue más funciones.
Pueden ver un ejemplo del Slider funcionando:
Como se mira es muy sencillo el efecto y aún hay que afinar algunas cosas, vamos ahora con el uso:
1.- Agregar jQuery
Como siempre primero hay que agregar la potente libreria jQuery al header (Cambiando tuPath por la carpeta donde lo tengas almacenado):
<script src="tuPath/jquery-1.7.min.js" type="text/javascript"></script>
2.- Agregar mxSlider
De la misma forma que se hizo con jQuery se agrega la libreria mxSlider
<script src="tuPath/MxSlider/MxSlider.js" type="text/javascript"></script>
3.- Añadir el css de mxSlider
Puede modificarse al gusto para darle el aspecto que desees, te puedes guiar del ejemplo para ver a que corresponde cada cosa
<link href="tuPath/MxSlider.css" rel="stylesheet" />
4.- Inicializar el Slider
Para inicializar el Slider existen 2 formas, iniciarlo por default, o pasarle parametros para modificar el comportamiento, si se desea iniciar con parámetros por default solo es necesaria una línea de código javascript:
<script type="text/javascript"> $(document).ready(function() { $(window).load(function(){ $('#divSlider').mxSlider(); }); }); </script>
Si se desea modificar el comportamiento los parametros a modificar son los siguientes:
var parametros = { autoSlide : true, // Movimiento automático según el intervalo interval : 5000, // El tiempo en que se efectúa el cambio de imagen (autoSlide en True) bullets : '', // El id de un div donde se agregarán los números de cada imagen bulletClass : 'mxBullet', // La clase que se le agregará a cada "li" de cada bullet bulletPre : '', // elemento que se agregará antes de cada número del bullet ejemplo: <span> buttetPost : '', // elemento que se agregará antes de cada número del bullet ejemplo: </span> next : '', // El id de un div que al darle click pasará a la siguiente imágen before : '', // El id de un div que al darle click pasará a la imágen anterior speed : 1000, // Velocidad a la que se cambia de una imágen a otra panels : 2, // El número de paneles a mostrar en horizontal method : 'window', // El método para acomodar las imágenes ( 'window', 'strech') stopHover : false, // Para evitar el cambio automático al pasar encima de una imagen stopHoverBullets : false, // Para evitar el cambio automático al pasar encima de un bullet titleHoverAnimation : true // Añadir efecto de mostrar el title de la imagen al pasar sobre ella. }
El método ‘strech’ (si, hay un error gramatical que luego corregiré) lo que hará es estirar la imagen para que quede del tamaño exacto del contenedor del slider, por el contrario el método window, crecerá o encogerá la imagen proporcionalmente hasta entrar en el contenedor sin perder su forma, pero a veces perdiendo una parte de la imagen, sin embargo ésta se centrará para verse bien.
Descargas:
[button link=»http://www.mediafire.com/download.php?d1x3jd5agju1m8a» size=»large»]Solo las librerías[/button]
[button link=»http://www.mediafire.com/download.php?3uwkgu7e0vpilp3″ size=»large»]Con ejemplos[/button]