Tutorial – Responsive Slider utilizando FlexSlider

En este nuevo tutoral vamos a crear un slider animado con jquery y lo vamos a hacer responsive, es decir que se adapte a cualquier disepositivo que el visitante este utilizando, para esto vamos a trabajar con un plugins que nos facilitara el trabajo, se trata de FlexSlider (http://www.woothemes.com/flexslider/) un plugins de Jquery de código abierto que nos facilitara este trabajo y lo optimiza para los dipositivos moviles.

Esto es lo que vamos a conseguir:

slider responsive design jquery

Hacerlo no sera complicado,, Vamos a comenzar !!

El HTML

Primero vamos con el contenido del head de nuestro documento Html

En anterior código tenemos el Doctype y las respectivas etiquetas metas de un documento html5, tenemos la etiqueta meta viewport está ahí para decirle al navegador que la página está optimizada para dispositivos móviles mediante el establecimiento de la anchura y altura del dispositivo.

Claro esta, podemos seguir agregando funcionalidades a nuestro slider, tales como tiempos,tipos de animaciónes, controles y dirección de animacion, seria algo como esto:

Las demás opciones para la configuración avanzada las encontramos en la web principal en el paso4.

Tenemos los archivos que harán totalmente funcional el slider, el css/flexslider y el js/jquery.flexslider-min.js que los descargamos desde la web de los creadores y el otro lo tomamos de la apis de google.
http://www.woothemes.com/flexslider/

flexslider

Luego tenemos el enlace a nuestros estilos css, el hack para l buena visualización de las etiquetas html5 en IE9 y la función js que tiene como objetivo conectar nuestro slider y hacer que su carga se antes de la inicialización del plugins.

La segunda parte de este html el contenido que esta dentro de la etiqueta body, dentro de una etiqueta <section id=”contenedor”> dentro un <h2> tenemos <div class=”flexslider”>, dentro un <ul class=”slide”> y en cada <li> tenemos la imagen y una etiqueta <p class=”flex-caption”> para mostrar el texto que nos hace de caption

LOS CSS

1° -Tenemos los css personales referente a todo nuestro documento en general.

En el anterior código css lo que hacemos es resetar los css de los navegadores y preparar las nuevas etiquetas de html5 para que se vea bien en los antiguos navegadores, luego tenemos los estilos del body del #contenedor que le damos una anchura en porcentaje (80%) y le damos un max-width de 800px que será su máximo ancho y lo centramos con margin: 0 auto; y le damos estilos al texto h2.

Los estilos generales del slider los encontramos en el archivo flexslider.css que nos descargamos anteriormente junto con el jquery.flexslider-min.js estos archivos los guardamos deacuerdo al posicionamiento que le damos en el html, junto con las imagenes.

Y esto es todo por este sencillo tutorial.

———-

———-

About the author

Johan Ricardo Niebles. Administrador y creador de este blog, Front-end (HTML + CSS + JS).con mas de 4 años de experiencia en el magico mundo web. Johan Ricardo