Ejemplos e implementación de sliders jQuery Responsive, que se adaptan a las dimensiones de la ventana del navegador y a todos los dispositivos.
Los componentes de interfaz gráfica enriquecida no son una excepción y deben realizarse también atendiendo a su correcta visualización en todo tipo de dispositivos. En el caso de los "sliders", existen varios plugins de jQuery para facilitarnos la tarea de hacerlos adaptables a distintos formatos de pantalla, básicamente, lo que sería un "slider responsive".
Para quien no lo sepa, los sliders son pequeñas transiciones de imágenes, las cuales pueden ser utilizadas para mostrar de forma ilustrativa los posts más importantes de nuestra web: una publicidad, una presentación de productos, etc. Mediante estos plugins, siempre que se hayan construido con la filosofía "responsive", podremos incorporarlos en nuestras webs y se adaptarán a las dimensiones de nuestro navegador.
Plugins jQuery para sliders responsive
Empezaremos por mostrar algunos ejemplos de plugins jQuery para la creación de presentaciones o sliders responsive.
Responsive Thumbnail Gallery:
Este plugin te permitirá crear una pequeña galería de fotos en la cual tendrás las imágenes en miniatura en la parte inferior y un contenedor mayor en la parte de arriba, donde veras la imagen seleccionada en mayor tamaño.
Elastic Image Slideshow With Thumbnail Preview:
Permite crear una presentación sencilla y elástica con una vista previa en miniatura. La presentación se ajustará automáticamente al contenedor que rodea y podemos navegar por las diapositivas utilizando la vista previa en miniatura o la opción de pase de diapositivas automático.
PhotoSwipe
Este slider tiene la particularidad de presentar la opcion touch, con lo cual cualquier dispositivo con dicha característica podrá utilizarla para interactuar con este slider.
Incorporar un slider a nuestra web
Ya presentamos algunos plugins para incorporar un slider a nuestra web, así que ahora vamos a entretenernos con un ejemplo concreto de creación de una presentación. Para nuestro ejemplo utilizaremos el plugin FlexSlider.Empecemos por crear una carpeta para nuestro sitio web y alojar las imágenes de nuestro slider en dicha carpeta. Debemos asegurarnos que estas imágenes tengan en mismo tamaño.
Descargaremos los archivos para nuestro slider de la pagina del mismo. El archivo .zip contiene la estructura que se puede ver en la imagen de este artículo, con los archivos que forman parte de la descarga.
Aquí, los archivos mas importantes para nuestros fines son el flexslider.css, jquery.flexslider.js, theme/bg_control_nav.png, theme/bg_direction_nav.png. Por ello tomamos estos archivos y los copiamos en nuestra carpeta de nuestro ejemplo.
Luego pasaremos a definir nuestro archivo .html en donde estará nuestro slider. Creamos un archivo index.html con el siguiente contenido:
<!DOCTYPE HTML>
<html lang="en-US">
<head>
<meta charset="UTF-8">
<title>Ejemplo FlexSlider</title>
<link rel="stylesheet" href="flexslider.css" />
<link rel="stylesheet" href="style.css" />
<script type="text/javascript" href="https://ajax.googleapis.com/ajax/libs/jquery/1/jquery.min.js"></script>
<script type="text/javascript" src="jquery.flexslider.js"></script>
<script type="text/javascript" src="scripts.js"></script>
</head>
<body>
<div class="flex-container">
<div class="flexslider">
<ul class="slides">
<li>
<img src="paisaje1.jpg" />
<p class="flex-caption">Primer lindo paisaje.</p>
</li>
<li>
<img src="paisaje2.jpg" />
<p class="flex-caption">Segundo lindo paisaje.</p>
</li>
<li>
<img src="paisaje3.jpg" />
<p class="flex-caption">Tercer lindo paisaje.</p>
</li>
</ul>
</div>
</div>
</body>
</html>
Para nuestro ejemplo utilizaremos el framework de jQuery que se encuentra en el CDN de Google. Esta URL permite obtener la última versión de jQuery que se encuentra en el repositorio.
Por otro lado, veremos un DIV con la clase “flex-container”, dentro de este otro con la clase "flexslider" y por ultimo una lista ( UL ) con la clase “slides”. Éstos son necesarios para aplicar los estilos del slider y detectar dónde queremos aplicar el plugin.
Cada elemento de la lista contiene una de las imágenes elegidas y un párrafo para colocar una breve descripción de imagen.
Como se observa, también incorporamos nuestra propia hoja de estilo llamada "style.css". Aquí definiremos nuestros estilos, ya sea para nuestro proyecto web o también para modificar algún estilo del CSS del plugin.
Importamos también nuestro archivo llamado "scripts.js". Aquí pondremos todo nuestro código Javascript, con lo cual creamos este archivo dentro de nuestra carpeta de nuestro proyecto e insertamos el siguiente código:
$(window).load(function() {
$('.flexslider').flexslider();
});
Si abrimos en nuestro navegador la pagina index.html, veremos que el bloque de descripción sobrepasa a nuestro slider. Para solucionarlo debemos modificar nuestro contenedor. En nuestra hoja de estilo agregamos el siguiente código:
.flex-container{
width: 100%;
max-width: 960px;
}
Como veréis, usé medida relativa como ancho y tan solo ancho fijo en el delimitador max-width. Ésto es muy importante, ya que no se olviden de que estamos diseñando una web responsive, y esta es una de las bases del mismo.
En nuestro ejemplo, otra cosa que no vemos todavía son los controles del slider. Si nos ubicamos el archivo "flexslider.css" en la línea 56 y 65, veremos los siguientes estilos:
56: .flex-direction-nav a {width: 52px; height: 52px; margin: -13px 0 0; display: block; background: url(theme/bg_direction_nav.png) no-repeat; position: absolute; top: 50%; cursor: pointer; text-indent: -999em;}
65: .flex-control-nav a {width: 13px; height: 13px; display: block; background: url(theme/bg_control_nav.png) no-repeat; cursor: pointer; text-indent: -999em;}
Comprobaremos que los archivos (imágenes) donde están esos controles no se encuentran en el mismo lugar donde lo alojamos en nuestro ejemplo. Para solucionarlo vamos a ir a nuestra hoja de estilo y añadimos las siguientes líneas:
.flex-direction-nav a {background: url(bg_direction_nav.png);}
.flex-control-nav a {background: url(bg_control_nav.png);}
Las rutas se pueden personalizar a tu gusto, pero al hacer esto nos aseguramos de que ubique esos archivos en el lugar correcto.
Así hemos implementado, con pocas líneas de código nuestro slider básico, pueden personalizarlo mas aun, para obtener el resultado deseado.
Configuracion del plugin…
Bien, hasta ahora hemos implementado nuestro slider es su forma básica, pero este plugin nos permite personalizar la presentación aún más. Veamos algunos atributos para darle mas funcionalidad:
La animación:
Este plugin contiene dos tipos de animaciones, el “fade” y el “slide”. Por defecto utiliza el “fade” (como en nuestro ejemplo), pero ahora veremos el “slide”. Modifiquemos el archivo scripts.js:
$(window).load(function() {
$('.flexslider').flexslider();
});
Por...
$(window).load(function() {
$('.flexslider').flexslider({
animation: "slide",
controlsContainer: ".flex-container"
});
});
De esta manera cambiamos la animación a slide. Vemos también el atributo “controlsContainer”, esto se debe a que la animación slide une todas las imágenes en una sola fila y oculta las imágenes que no se deben ver, y para ello requiere un contenedor adicional, que englobe un nivel más a nuestro slider. En nuestro caso es el DIV con la clase "flex-container".
También podemos cambiar el sentido de la animación agregando el siguiente atributo:
direction: "vertical"
Tiempos de animación:
Muchas veces queremos que los tiempos de nuestros sliders varíen, ya sea por decisión del cliente, por nuestro diseño, etc. Para ello podremos personalizarlo con los siguientes atributos:
slideshowSpeed: 7000,
animationSpeed: 600,
El "slideshowSpeed" es el tiempo en el cual permanecerá el slide visible medido en milisegundos, y el "animationSpeed" es el tiempo de la animación de una diapositiva a otra, también en milisegundos.
Podemos ver un ejemplo de implementación de esta presentación en una página aparte.
Estas son algunas de sus propiedades, pero hay muchas más. Os invito a experimentar cada uno de ellas y ver cuáles son las disponibles en la página oficial de este plugin.
Esto ha sido todo, espero que os haya gustado y para cualquier consulta no dudéis en contactarme.
Leonardo D'Antoni
Desarrollador (diversas tecnologias, .Net, PHP, JavaScript, Java)