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>
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"
});
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.