mxSlider un plugin de slider más para jQuery

m

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:

Ejemplo 1
Ejemplo 2

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]

 

Acerca del autor

Mxrck

Ingeniero en Sistemas Computacionales, amante de la tecnología, los videojuegos, la programación.

Siempre aprendiendo algo nuevo.

"Always Thinking"

Por Mxrck

Categorías

Etiquetas