por 
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:
Vamos 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í:
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:
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í:
