SummArg | Cursos y recursos para webmasters

18/03/2011

Plugin jQuery para sliders elegantes jShowOff

jShowOff es un plugin jQuery que nos permite lograr sliders con un estilo muy bonito, con pocas líneas de código y con varias opciones de personalización.

Descarga | Demo

Para implementarlo en nuestro website primero debemos descargar jshowoff.css (el estilo, opcional) y jquery.jshowoff.min.js, y adjuntarlos al documento junto con jQuery 1.4 o superior.

<link rel="stylesheet" href="ruta/jshowoff.css" type="text/css" media="screen, projection" />
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.4/jquery.min.js"></script>
<script type="text/javascript" src="ruta/jquery.jshowoff.min.js"></script>

Luego debe indicarse un elemento padre para ser el slider y colocarle varios elementos hijos que corresponderán a cada slide. Acto seguido debe inicializarse el script, indicando el id del elemento padre (en este caso #slider).

<div id="slider">
	<div><p>Este es un slide!</p></div>
	<div><a href="http://google.com"><img src="http://www.google.com/intl/en_ALL/images/logo.gif" alt="Google Logo" /></a></div>
</div>
<script type="text/javascript">
	$(document).ready(function(){ $('#slider').jshowoff(); });
</script>

El slider posee opciones para añadir controles (play, pausa, etc), autoplay, tiempo de la animación, efecto, comportamiento del mouse, etc.

En la web del autor nos entregan varios ejemplos a modo de demo para poder entender con mas facilidad su funcionamiento.

Dejar un comentario