Scrollerota, es un slideshow interesante con un efecto muy atractivo para mostrar el texto descriptivo o informativo, como todos los buenos plugins tiene una serie de opciones comunes, por ejemplo: el Ancho, Alto, Tiempo de pausa, velocidad de la transición, y tipo de Transición.

Para su uso en el html es básicamente asi:

<div id="scrollerota">
    <ul class="images">
    	<li><img src="images/image1.jpg" /></li>
    	<li><img src="images/image2.jpg" /></li>
    	<li><img src="images/image3.jpg" /></li>
    </ul>
	<ul class="text">
    	<li>Nullam rutrum, nibh sit amet sodales luctus, mauris est placerat justo, molestie gravida lorem enim eu sapien.<a href="#" class="readmore">Leer más..</a></li>
        <li>Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Etiam et eros nisl. Etiam vehicula lobortis pharetra. Integer ut ipsum risus.<a href="#" class="readmore">Leer más..</a> </li>
        <li>Nulla facilisis felis vitae leo condimentum quis adipiscing turpis rhoncus. Sed id lacus libero, ut accumsan lacus. Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas.<a href="#" class="readmore">Leer más..</a> </li>
    </ul>
</div>

Obviamente antes a esto se tiene que agregar las librerias:

<script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jquery/1.4.4/jquery.min.js"></script>
<script type="text/javascript" src="js/jquery.scrollerota.min.js"></script>

Luego inicializar el plugin indicando las configuraciones:

<script type="text/javascript">
	$("#scrollerota").scrollerota({
			width: 500,
			height: 333,
			padding: 10,
			speed: 2000,
			timer: 5000,
			slideshow: true,
			easing: 'easeInOutQuart'
		});
</script>

Y por ultimo Agregar el CSS.

No es mucha documentación como ven, es un plugin sencillo de usar e implementar en nuevos proyectos.

Demo, y Descarga | Scrollerota jQuery Plugin

No hay comentarios en
“Scrollerota, un Slideshow con jQuery”





Subir ↑↑