SummArg | Cursos y recursos para webmasters

26/10/2011

Slider de navegación horizontal y vertical a pantalla completa, FerroSlider

FerroSlider nos permite montar un slider a pantalla completa y de navegación en múltiples direcciones de forma muy sencilla. Sus características principales son:

  • Muestra contenidos por línea, por columna o siguiendo un mapa personalizado (también llamado “The Matrix”)
  • Permite la navegación con el teclado
  • El slider permite animar la navegación horizontal, vertical, diagonal o una combinación de las mismas
  • Posibilidad de colocar el slider a pantalla completa preservando la proporción de las imágenes
  • Carga de contenidos utilizando scripts personalizados vía AJAX
  • Posibilidad de crear un mapa clickeable con la posición de los contenidos (un menú de navegación)

Los contenidos se cargan dentro de divs con una única clase para luego manejarla desde javascript.

<div id="div1" class="slidingSpaces" title="Page 1">
first page
</div>
<div id="div2" class="slidingSpaces" title="Page 2">
second page
</div>
<div id="div3" class="slidingSpaces" title="Page 3">
third page
</div>
<div id="div4" class="slidingSpaces" title="Page 4">
fourth page
</div>
<div id="div5" class="slidingSpaces" title="Page 5">
fifth page
</div>

Luego debemos vincular jQuery, el plugin Easing, el plugin FerroSlider y su plantilla de estilo. Entre etiquetas <head> colocaremos:

<link rel="stylesheet" href="http://www.alessandroferrini.it/lab/jQueryPlugins/ferroSlider/jquery.ferro.ferroSlider.css" type="text/css">

<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.6.1/jquery.js" type="text/javascript"></script>
<script src="http://gsgd.co.uk/sandbox/jquery/easing/jquery.easing.1.3.js" type="text/javascript"></script>
<script src="http://www.alessandroferrini.it/lab/jQueryPlugins/ferroSlider/v/1.1/jquery.ferro.ferroSlider-1.1.min.js" type="text/javascript"></script>

Y finalmente indicamos a que clase debe aplicarse el script:

$(document).ready(function() {
$('.slidingSpaces').ferroSlider();
});

Soporta una amplia variedad de parámetros, por lo que les recomendamos leer la documentación en el sitio oficial para poder personalizar a fondo este genial plugin.

Descargar | Demos

Dejar un comentario