sábado, 10 de noviembre de 2012

SwipePlanes v1.2 - jQuery Plugin

Que tal amigos, les traigo mi primera versión estable de este plugin el cual me encuentro desarrollando, espero les sirva de ayuda a aquellos que andan buscando poner en sus sitios un Slider para cualquier tipo de contenido, tamaño y entorno; es totalmente adaptable, fácil de usar, no requiere CSSs externos ni nada parecido, simplemente pongan en las cabecera de su sitio junto a la ultima versión de jQuery, agregamos una linea de código y listo!, un Slider maravilloso 100% compatible con los Eventos Touch de los moviles y a su ves con equipos de escritorio.



Para hacérselos mas sencillo veamos como usarlo:

Primero que todo necesitamos incluir jQuery, luego nuestro SwipePlanes - jQuery Plugin:

<script src="jquery-1.8.2.min.js"></script>
<script src="jquery.swipeplanes-1.2.js"></script>

Una vez hecho eso, usamos un selector jQuery para asignarlo y activarlo:

<script>
       $('.mislider').swipePlanes();
</script>

Y solo resta la estructura html necesaria para que funcione:

<div class="mislider" style="height: 100px; width: 400px;">
       <div>
             <div>Item 1</div>
             <div>Item 2</div>
             <div>Item 3</div>
             <div>Item 4</div> 
       </div>

</div>

Solo deben tomar encuenta algunos aspectos:

1. Deben poner un tamaño fijo para el DIV principal (en el ejemplo observamos que es el que tiene la clase "mislider").
2. Si no especifican un tamaño fijo para los Slide estos se comportaran como lo haria un DIV con un display: inline-block.
3. Pueden usar clases para los Slide, evitando sobre escribir las reglas CSSs display, position y float
4. Tomen encuenta que el plugin crea las paginas necesarias para mostrar todo el contenido, en caso de que el contenido no sobrepase 1 slide, solo les creara 1 slide.

Descarga el ejemplo:
https://docs.google.com/open?id=0BwftIQcYrJOWTjl2VEZYWlJpUEU

Descarga SwipePlanes v1.2:
Normal (13 KB): https://docs.google.com/open?id=0BwftIQcYrJOWTHFvQk8yQlVSY0E
Minima (7 KB): https://docs.google.com/open?id=0BwftIQcYrJOWSk9aWU9sTWFvbUU

Cualquier consulta hacerla, espero les sea de ayuda, pronto estare subiendo mejoras y nuevas funciones.

Hasta la proxima!.