Crear un Slider con Flexslider


Flexslider es un plugin para crear sliders y carouseles responsives y muy personalizables que podemos usar en sitios web y sistemas, en este articulo les mostrare un ejemplo de slider dinamico/administrable.

Introducción

Pueden descargar Flexslider desde la pagina oficial http://flexslider.woothemes.com/index.html

Flexslider no requiere Bootstrap 3 o 4, por lo que es posible usarlo con cualquier web framework.

Jquery si es requerido.

Código

En este caso yo estoy usando bootstrap, es opcional.

Para empezar Debemos incluir en el head los archivos

  • bootstrap.min.css
  • flexslider.css

El siguiente codigo es el codigo de la estructura del slider.

[code language=”html”]

<div class="flexslider">
<ul class="slides">
<li><img src="imagen1.jpg"></li>
<li><img src="imagen2.jpg"></li>
<li><img src="imagen3.jpg"></li>
</ul>
</div>

[/code]

La estructura es fácil, un div contiene una lista, y los elementos de la lista son los elementos del slider.

Ahora al final del documento html es necesario agregar las siguientes librerías:

  • jquery.min.js
  • jquery.flexslider.js
  • bootstrap.min.js

Y al final el código para ejecutar el flexslider, debe estar dentro de las etiquetas <script></script>.

[code language=”js”]

$(‘.flexslider’).flexslider({
animation: "slide"
});

[/code]

Resultado

Este es el resultado:

Descargar

A continuación les dejo un link para descargar el ejemplo:

Link: https://drive.google.com/file/d/1LwWfUivU7EFQ99SVQwhU5ZDubxImMP5E/view?usp=sharing

La descarga incluye los archivos css, js, imagenes y html.

Finalizando

Flexslider es un plugin con muchas opciones, pueden leer su documentación en la pagina oficial que les compartí al inicio de este articulo.

Que tal les pareció este ejemplo?

No olviden dejar sus comentarios.

Leave a comment