De PSD a HTML5 – Parte 4, implementando el Slider

Después de varios meses de haber comenzado estos tutoriales donde pasamos un PSD a HTML5, seguimos con el tutorial #4 donde vamos a implementar un slider de jQuery, en la red hay cientos de estos plugins los encontramos gratuitos y de pagos, pero esta vez utilizaremos uno gratuito, utilizaremos Flexslider, un plugin jQuery de Woothemes que nos será sencillo implementar en este proyecto.

Implementación del plugin Flexslider

1º Incluya los archivos .CSS y .JS necesarios para el funcionamiento.

2º Construya la estructura html dentro del body

3º Hacer la llamada del plugin al documento

Y con esto ya tenemos todo listo para el funcionamiento de este buen plugin.

Recuerda que hay muchas opciones de configuración para este slider, las podemos encontrar aquí: http://www.woothemes.com/flexslider/

Vea también

De PSD a HTML5 – Parte 1, Photoshop
De PSD a HTML5 – Parte 2, el HTML
De PSD a HTML5 – Parte 3, el CSS

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

8 Respuestas

  1. andresRuiz dice:

    Ahh olvidé otra pregunta…
    En alguno de los videos dices que despues de implementar el slider iban a hacer un tuto para pasarlo a wordpress o algo así… van a hacer ese tuto también??
    Gracias!!

    • Johanso dice:

      Si, es cierto, ahora estoy terminando el de CSS3 y a la vez estoy preparando el de Bootstrap, el de crear themes para bootstrap esta en cola..

  2. andresRuiz dice:

    Hola Johanso!
    Muy bueno el Tuto!!! me ayudó para entender un montón de cosas.
    Pero aún varias me quedan en el tintero… esta es una de ellas….
    Implemente un slider como en el tuto, pero según el diseño que hice, el logo un poco encima del slider.. así que busqué como sobreponer divs,y ajuste el “top” del slider a “-100px” para subirlo debajo del logo….
    Ajustó perfecto, pero me quedó un espacio de 100px debajo del slider… como hago para subir todo? tendría que ponerle a todos los divs el top en -100???

    Gracias por los tutos!!!

    • Johanso dice:

      Hola Andres, Bueno Creo que el tema es de posicionamiento, puedes posicionar el elemento contenedor relativamente y el logo absolutamente, esto lo ubicará sin generar margenes ni espacios y sin tener que modificar el flujo de las demas posiciones, si quieres envíame un pantallazo y con gusto te ayudaré, la verdad trate de imaginarme la situacion pero viendola te sabré dar la respuesta mas adecuada, saludos

  3. carlos dice:

    buenas. saludos desde venezuela ! me encantan tus tutoriales.
    por favor como hago para poner el FlexSlider de ancho total de la pagina automáticamente y que no se vean los bordes blancos por favor !!
    saludos

    • Johanso dice:

      Bueno, dandole el ancho 100% tomara el ancho de la pantalla, en el caso de esta plantilla del tutorial el slider esta dentro del grid con clase container_24, y por eso se limita, pero si sacas el flexslider del div tomara el ancho de la pagina. ya lo he probado.
      Los bordes, busca en flexslider.css la clase .flexslider y borra la propiedad border y sus valores “border: 4px solid #FFF;” y listo.
      Saludes.

  4. carlos dice:

    buenas. saludos desde venezuela ! me encantan tus tutoriales. por favor como hago para poner el FlexSlider de ancho total de la pagina automáticamente y que no se vean los bordes blancos por favor !! saludos
    MI IDEA ES PROBARLO USANDO COMO EJEMPLO LA WEB QUE HICISTES EN EL TUTORIAL PSD A HTML5. ESTA BUENISIMO.
    ME GUSTARIA UN TUTORIAL SOBRE UN CATALOGO DE ROPA ALGO ASI COMO PARA UNA TIENDA !

  1. enero 16, 2014

    buenas. saludos desde venezuela ! me encantan tus tutoriales. por favor como hago para poner el FlexSlider de ancho total de la pagina automáticamente y que no se vean los bordes blancos por favor !! saludos
    MI IDEA ES PROBARLO USANDO COMO EJEMPLO LA WEB QUE HICISTES EN EL TUTORIAL PSD A HTML5. ESTA BUENISIMO.
    ME GUSTARIA UN TUTORIAL SOBRE UN CATALOGO DE ROPA ALGO ASI COMO PARA UNA TIENDA !