easySlider es un plug-in para jQuery, creado por Alen Grkalic, que permite que imágenes o cualquier otro tipo de contenido se deslice tanto horizontal como verticalmente.
Este plug-in es completamente configurable mediante uso CSS, lo que permite una integración realmente simple a nuestro sitio.
Podéis ver la demostración del script, descargarlo o seguir leyendo el artículo para conocerlo un poco más a fondo.
1. El script
Lo primero que haremos será añadir la última versión de jQuery y el código del script entre las etiquetas head de nuestra plantilla o página web, de la siguiente forma:
Código JavaScript
<script type="text/javascript" src="js/jquery.js"></script> <script type="text/javascript" src="js/easySlider.packed.js"></script> <script type="text/javascript"> $(document).ready(function(){ $("#slider").easySlider({ orientation:'vertical' }); }); </script>
2. Las hoja de estilos
La hoja de estilos viene por defecto para que la configuremos a nuestro gusto. Tan solo tenemos que partir de la base que nos proponen, de la forma siguiente:
Código CSS
/* Easy Slider */ #slider ul, #slider li{ margin:0; padding:0; list-style:none; } #slider, #slider li{ /* define width and height of container element and list item (slide) list items must be the same size as the slider area */ width:696px; height:241px; overflow:hidden; } span#prevBtn{} span#nextBtn{} /* // Easy Slider */
3. Implementándolo en nuestra plantilla
Tan solo deberemos crear una lista e insertar tantos elementos como queramos mediante el atributo li e indicar en cada uno de ellos la dirección de la imágen mediante un enlace.
Código HTML
<div id="slider">
<ul>
<li><a href="#"><img src="images/01.jpg" alt="Descripcion" /></a></li>
<li><a href="#"><img src="images/02.jpg" alt="Descripcion" /></a></li>
<li><a href="#"><img src="images/03.jpg" alt="Descripcion" /></a></li>
<li><a href="#"><img src="images/04.jpg" alt="Descripcion" /></a></li>
<<li><a href="#"><img src="images/05.jpg" alt="Descripcion" /></a></li>
</ul>
</div>El plug-in de forma automática agrega las opciones siguiente y anterior, pero el autor le a asignado un ID que podemos utilizar:
Código HTML
<span id="prevId"><a href="javascript:void(0);">Previous</a></span> <span id="nextBtn"><a href="javascript:void(0);">Next</a></span>