Crear un slider de imágenes sencillo en jQuery

Muchos son los que me han preguntado por el slider que tengo en la parte superior del blog, y me han dicho que haga un tutorial para hacer uno así, y pues lo prometido es deuda, porque hoy le traigo un tutorial para crear un slider de imágenes sencillo, con texto para que sea más llamativo.

Después del salto les dejo el tutorial completo.

PASO 1: HTML

Lo primero que vamos a hacer es hacer la estructura de nuestro slider, para ellos no necesitamos más que algunas capas que iremos modificando con CSS, pero quedaría así más o menos:

 

Donde cada capa que se llama content alberga una slide diferente donde podemos poner imágenes, videos, etc, pero como les digo, ya lo veremos con CSS

PASO 2: CSS

Ahora si, necesitamos crear nuestra hoja de estilos para poder utilizar y darle un buen formato a nuestras slides:

 

Lo que podemos hacer es modificar esta parte al gusto que queramos para poder tener un efecto muy diferente, pero mucho ojo, dije colores y tamaños de fuente, más allá si no saben mucho CSS no les recomiendo tocar nada más.

PASO 3: JQUERY

Necesitamos importar los archivos necesarios para que sirva nuestro plugin, para ello vinculamos el archivo de jquery y uno llamado custom.js que vamos a crear más adelante.

 

PASO 4: CUSTOM.JS

Vamos a crear un archivo en blanco y vamos a guardarlo custom.js, este es el que controlará el slider, las animaciones y que se regrese cuando termine de mostrar los slides que nosotros coloquemos:

Y si hicieron todo el procedimiento como lo mostré pueden tener ya un slider como el que muestro en el blog.

¿Te gustó el tutorial?¿Tuviste problemas al hacerlo?