FLEXSLIDER HTML5

 PRACTICA 020: HTML: FLEXSLIDER

Ing. Honoria Reyes Macedo 

IDE: Dreamweaver, Atom o Block de notas
Lenguaje de paginas ESTATICAS: HTML(HyperText Markup Language)

Java Script

 

ACTIVIDADES

1.- Paso 3. Agregar flexslider para el desplazamiento de las imágenes :

               1.1 Bajar los archivos (desde http://www.woothemes.com/flexslider/ )                     

En la carpeta css  copiar: el archivo flexslider.css y la carpeta fonts

En la carpeta js  copiar: los archivos jquery.flexslider.js y jquery.flexslider-min.js

 

1.2 Bajar los archivos (desde https://jquery.com/ )                     
                     Nota: Al seleccionar download les mostrara código en el navegador, con mouse derecho seleccionar “Guardar como”

En la carpeta js  copiar el archivo  jquery-3.5.1.min.js

 

Quedaria asi la  carpeta css y js:

2.- Copiar 4 imágenes referentes al producto que se ofrece en una nueva carpeta img_galeria

3.- En el archivo libros_HRM.html  agregar el link al archivo flexslider.css (línea sombreada)

4.- En el archivo libros_HRM.html agregar el script a los archivos bajados

    <script src="js/jquery-3.5.1.min.js">  // Para utilizar jquery-1.11.1.min.js en forma local  </script>

    <script> !window.jQuery && document.write("<script src='js/jquery-3.5.1.min.js'><\/script>");</script>

    <script src="js/jquery.flexslider-min.js"></script>

    <script type="text/javascript" > $(window).on("load",function() { $(".flexslider").flexslider(); });</script>

5.- En el archivo libros_HRM.html agregar la lista de imágenes a mostrar: (lineas sombreadas)

    Nota: sustituir el nombra de cada imagen por las imágenes copiadas en img_galeria

6.- En el archivo mi_estiloLibros.css agregar estilo a las etiquetas agregadas

Al ejecutar el archivo html quedaría asi:

------------------------0----0-------------------------------------------------------

---------------------000------000------------------------------------------------------