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
