Menú de navegación con efecto slide jQuery

Pablo

Desde hace un tiempo están de moda los sitios que muestran todo su contenido en una sola pagina sin la necesidad de recargar cada una de las secciones. Para lograr esto y darle un toque animado es que existen plugins como Ferro Slider.

Ferro Slider es un plugin jQuery gratuito, que nos permite incorporar la funcionalidad de navegación por sliders, de forma muy sencilla, logrando un muy lindo efecto de transición entre las distintas opciones disponibles.

navegación slider jquery

Este plugin a su vez agrega funcionalidades de detección de teclas, permitiendo la navegación entre secciones simplemente usando las flechas del teclado. Además de obviamente la típica navegación por el menú de opciones, o bien, generando un pequeño mapa del sitio por medio de puntos.

En la web oficial del plugin se pueden ver distintos ejemplos de uso, utilizando solo las flechas, o bien el pequeño mapa de puntos, hasta un completo mixto de opciones.

La estructura necesaria para utilizar este plugin es de lo más simple, basta con indicar una clase en particular a las distintas divs que serán las secciones y listo. Luego agregaremos contenido a cada div utilizada como sección e inicializamos el plugin con apenas una linea de código.

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

Si van a utilizar este plugin les recomiendo leer muy bien la documentación oficial, desde ahí pueden aprender a configurar distintos parámetros que modifican la forma de animar el contenido.

Una alternativa similar: animar contenido con Ascensor.

Web: Ferro Slider

Pablo

Programador desde hace más de 11 años, adicto a internet, cafeinómano, fanático de la información, intento de emprendedor, trabaja de forma compulsiva solo en lo que ama. Sueña con tener una aplicación con más de 1 millón de usuarios.

Comentarios

  1. Clara Responder

    Me interesa saber donde proviene esa imagen, de que pagina es. Solo quiero conocer la página o ¿es una imagen de ejemplo?

  2. Clara Responder

    No, espera, creo que ya lo tengo :) XD no me publiques!! gracias :D

Realizar un comentario