Cómo hacer el slider más sencillo y bonito del mundo con jQuery y CSS

Toda la semana pasada encontré mucha gente que preguntaba cómo hacer un slider sencillo, y creo que mucha gente está buscando la forma más simple de hacer un slider que se cambie de imagen cada cierto tiempo.

Hay miles de maneras en cómo hacerlo, unas más difíciles que otras pero al final el resultado es el mismo, por eso les voy a mostrar cómo hacer el slider más sencillo y bonito del mundo con jQuery y CSS, para que ya no se maten la vida buscando por el código más simple, porque ahora mismo se los voy a presentar.

Demo del tutorial

HTML

Nuestro HTML es tan fácil como poner en una capas todas nuestras imágenes, sin nada más, porque realmente es lo más elemental que necesitamos.

CSS

Las imágenes que ocupo tienen una altura de 400px por lo cual para evitar problemas de redimensión de la capa le pongo un estilo para fijar la altura. Con las imágenes las oculto y después sólo muestro la primera, porque debemos mostrar la imagen inicial para que funcione el slider

jQuery

El código para hacer funcionar el slider es el siguiente:

1. Declaramos nuestra variable i para tener el control de la imagen que está actualmente mostrándose.

2. Usamos la función setInterval() para que cada 3 segundos se cambie la imagen, esto gracias a la función de cambiarSlider().

3. Cuando la variable i llegue a la última imagen la reseteamos con 0 para que cargue la primera imagen. Recuerden que trabajamos con arreglos, por eso el 0 como inicial y el tamaño total – 1 como el límite.

4. Y ya, nada más mostramos la imagen que sigue mientras las demás las ocultamos, así de fácil y sencillo.