Cómo hacer un carrusel con Slick

Slick

http://kenwheeler.github.io/slick/img/slick.gif

Slick es un plugin de JQuery para crear un carrusel en nuestra web a partir de un conjunto de imágenes. Si buscas un poco, verás que existen infinidad de plugins para crear carruseles, pero si he escogido Slick es porque es muy completo, se actualiza regularmente y está apoyado por Foundation, un framework de maquetación del que ya hablaré más adelante.

La web oficial, con toda la documentación y descarga del plugin está aquí:

http://kenwheeler.github.io/slick/

 

Lo primero que vamos a hacer es crear un directorio de trabajo. Por ejemplo, «C:/Desarrollo/html/PruebaSlick/«. Dentro de él, crearemos la estructura del proyecto, esto es, una carpeta llamada css, otra js, otra plugins, otra images y un documento html5 limpio en el que insertar la galería, al que llamaremos «index.html«. Para ello, abrimos un editor de texto cualquiera (recomiendo usar Notepad++ o Sublime para estas cosas), creamos un archivo nuevo y escribimos lo siguiente:

<!DOCTYPE html>
<html>
 <head>
 <meta charset="UTF-8">
 <title>Mi carrusel</title>
 </head>

 <body>
 <h1>Mi carrusel de imágenes:</h1>
 </body>

</html>

Ésta es la estructura básica de un documento html5 bien formado. En esta entrada no voy a entrar en detalles, si tenéis interés en ello, podéis encontrar mucha información buscando un poco.

El directorio de trabajo tiene que tener este aspecto:

directorio_slickVamos a buscar un conjunto de imágenes sobre las que trabajar, por ejemplo, cinco. Las guardamos en el directorio «images» y las renombramos, desde imagen-1.jpg a imagen-5.jpg. Nos quedará así:

images_slick

Imágenes sacadas de mi web InnovaIA, de robots hechos por mí.

A continuación, necesitamos descargar el plugin Slick, desde aquí:

http://kenwheeler.github.io/slick/

Una vez descargado, vamos a descomprimirlo. Dentro del directorio descomprimido, nos interesa el que se llama slick. Lo movemos dentro de la carpeta de plugins:

plugin_slick

Ahora, siguiendo las indicaciones que vienen en la web oficial y ajustando las rutas y el código, vamos a completar nuestro index.html, para que quede así:

<!DOCTYPE html>
<html>
 <head>
 <meta charset="UTF-8">
 <link rel="stylesheet" type="text/css" href="plugins/slick/slick.css"/>
 <title>Mi carrusel</title>
 </head>

 <body style="background: #1e73be;">
 <h1>Mi carrusel de imágenes:</h1>
 <div class="carrusel-robots" style="width: 400px; margin: 0 auto;">
 <div><img src="images/imagen-1.jpg" width="400" alt="Robot 1"/></div>
 <div><img src="images/imagen-2.jpg" width="400" alt="Robot 2"/></div>
 <div><img src="images/imagen-3.jpg" width="400" alt="Robot 3"/></div>
 <div><img src="images/imagen-4.jpg" width="400" alt="Robot 4"/></div>
 <div><img src="images/imagen-5.jpg" width="400" alt="Robot 5"/></div>
 </div>
 
 <script type="text/javascript" src="//code.jquery.com/jquery-1.11.0.min.js"></script>
 <script type="text/javascript" src="//code.jquery.com/jquery-migrate-1.2.1.min.js"></script>
 <script type="text/javascript" src="plugins/slick/slick.min.js"></script>
 
 <script type="text/javascript">
 $(document).ready(function(){
 $('.carrusel-robots').slick();
 });
 </script>
 </body>

</html>

Nota: Sí, he metido estilos en línea que deberían ir en un css aparte, pero para no complicar el tutorial con otros temas, lo voy a dejar así.

Si ahora hacéis doble clic en index.html, deberíais ver el carrusel de imágenes. El mío, con las imágenes de mis robots, lo podéis ver aquí:

http://ejemplos.diegorys.es/plugins/slick

diegorys

Ingeniero en Informática, apasionado de la robótica, con alma de investigador en nuevas tecnologías, analista programador y profesional del desarrollo ágil en entornos web y smartphones, con amplios conocimientos y experiencia desde antes de 2008 en entornos WAMP/LAMP, experimentando con Arduino desde 2012 y con Raspberry Pi desde 2014.

Share

Deja un comentario

Tu dirección de correo electrónico no será publicada. Los campos obligatorios están marcados con *

Este sitio usa Akismet para reducir el spam. Aprende cómo se procesan los datos de tus comentarios.