![[Tutorial] Como hacer carousel con JavaScript nativo (Sin jQuery)](http://youngcoder.cubava.cu/wp-content/plugins/lazy-load/images/1x1.trans.gif)
¡Hey coders! Bien como sabemos existe un framework de JavaScript llamado jQuery que en su tiempo fue muy útil pero al día de hoy ha quedado casi en desuso por parte de los programadores y es que por las características de los navegadores actuales se hace innecesario utilizarlo. Pues este framework tenía incluido una forma para hacer slideshows (imágenes que cambian) y a pesar de que se supone que debía ser fácil hacerlos, no, no lo era, era muy pero que muy extenso el código. Pero al fin y al cabo todos alguna vez lo usamos y nos acostumbramos a la facilidad de hacer cualquier cosa con jQuery hasta al punto de casi olvidarnos de lo que era un JavaScript puro, que en mi opinión es muchísimo mejor. Ahí les va:
Primeramente vamos a crear nuestro espacio de trabajo y en la raiz de nuestro servidor o disco local vamos a crear una carpeta donde guardaremos las imágenes, por ejemplo le pondremos de nombre “imgs”. Acto seguido crearemos (fuera de esa carpeta) nuestro índice, “index.html”; nuestros scripts: “script.js” y nuestros estilos, “style.css”.
Una vez que tengamos todo comencemos a escribir código. Primero vamos a nuestro archivo HTML:
<!DOCTYPE html>
<html>
<head>
<title>Slideshow con HTML, JS y CSS</title>
</head>
<body>
<div class="slider-container">
<img name='sliderImg' src='' class='slider-img'>
</div>
</body>
<script src="script.js"></script> <!-- lo de type="text/javascript" es opcional, en HTML 5 no es necesario -->
</html>Luego vamos a nuestro archivo CSS para aplicar algunos estilos básicos:
.slider-container{
width: 100%;
height: 500px;
}
.slider-img{
width: 100%;
height: 100%;
}Luego vamos a ubicar en nuestra carpeta “imgs” las imágenes que queremos en el slideshow y tener en cuenta cuantas son, en el ejemplo usaré 5. Luego escribiremos el JS.
var index = 0;
var source = [];
source[0] = "imgs/imagen1.jpg";
source[1] = "imgs/imagen2.jpg";
source[2] = "imgs/imagen3.jpg";
source[3] = "imgs/imagen4.jpg";
source[4] = "imgs/imagen5.jpg";
function iterate(){
if(index < 5){
index++;
} else {
index = 0;
}
document.sliderImg.src = source[index];
}
setInterval(iterate, 1000);Y bueno, esto está listo amigos, vamos a explicar un poco que hicimos aquí:
En el script primero definimos dos variables que son index y source. La variable index inicialmente tine un valor de 0 y acto seguido decimos que “source = []”, esta es la forma que tenemos de definir que source es un array, y como sabemos a los arrays podemos acceder mediante indices, estos los declaramos luego, por ejemplo source[0] tiene la dirección “imgs/imagen1.jpg” y así va aumentando a medida que aumenta el índice que es el número entre los corchetes o brackets. Para el slideshow necesitamos que cada cierto tiempo la imagen cambie, asi que creamos la función iterate(). Esta función lo que hace es comprobar mediante una sentencia “if” si index es menor que 5 (que es la cantidad de imágenes que copiamos en la carpeta), bien, si index es menor que 5 entonces procedemos a aplicar el operador “++” a index, este operador lo que hace es aumentar 1 al valor actual de la variable, es decir, si en el momento de leer esa línea la variable index es 2 la función valida que es menor que 5 porque 2 < 5 y al ser así le suma 1 por lo que ahora index = 3 y así cada vez que se ejecute. Pero que pasa, en la sentencia “else” (else quiere decir lo contrario de la sentencia if, o sea, si if comprueba cuando index < 5, else comprueba cuando index es cualquier cosa excepto menor que 5), por lo que si la variable index es por ejemplo 5 else actúa y hace su trabajo el cual es igualar index a 0.
En resumen, cada vez que ejecutemos la funcion vamos a comprobar si index es menor que 5, si lo es, le sumamos uno y si es mayor la igualamos a 0, por lo tanto el valor de index va a iterar de esta forma: 0, 1, 2, 3, 4, 0, 1, 2, 3, 4. Pero hay otra cosa, y es que hemos declarado la función pero, ¿cuándo es llamada?, muy fácil, vemos que tenemos la funcion setInterval() y si sabes inglés intuirás que lo que hace es establecer un intervalo, esta función recibe dos parámetros, uno es el nombre de la función a ejecutar, en este caso: iterate(), y el otro parámetro es el tiempo en milisegundos entre cada ejecución, en este caso 1000 que viene siento 1 segundo.
Pero aún falta algo y es que hacer con el valor de source, el valor de index y todo lo que hemos escrito anteriormente, pues fácil. Recordemos el DOM HTML, las etiquetas pueden ser nombradas con el atributo name y en específico <img> tiene el atributo src el cual indica la ubicación de la imagen en el servidor o donde se encuentre, en este caso las imágenes están en “imgs/”. Si se fijan, dentro de la función iterate(), en la última línea hacemos lo siguiente:
document.sliderImg.src = source[index];Con esto lo que estamos haciendo es acceder a nuestro DOM (Document Object Model), en el documento encontramos el elemento con el nombre sliderImg que si miran el código HTML es la etiqueta <img>. Luego de haberlo encontrado accedemos a su atributo src y lo igualamos a source[index], y por que a esto?, pues porque son los valores que necesitamos, véanlo así:
La función se ejecuta la primera vez:
index = 0 y 0 < 5 por lo que se le añade 1 a index y ahora index = 1, entonces:
document.sliderImg.src = "imgs/imagen2.jpg";// y se imprime imagen2.jpg Vamos de nuevo, pasa un segundo y la función se ejecuta otra vez:
index = 1 y 1 < 5 por lo que añadimos 1 a index y ahora index = 2, entonces:
document.sliderImg.src = "imgs/imagen3.jpg"; // y se imprime imagen3.jpgY así pasa hasta que llegue a 5 y vuelva a ser 0, en ese caso se repetiría de nuevo todo el proceso. Espero que les haya sido útil el tutorial, si tienen dudas no duden en preguntar, estamos para compartir conocimientos.
Me hubiese gustado ver tambien usando jquery, si dices q es complicado ya entiendo el porq esta en desuso, es que en js es bastante sencillo
La sencillez de jQuery en este tema radica en las animaciones. Este está bastante simple pero estoy seguro que el código se complicaría muchísimo si intentásemos animarlo con simple JS, o quizás no, habría que probarlo. ¡Un saludo!
Saludos, muy interesante el tema de javascript y todo lo relacionado con la programación,
Solo una sugerencia, cambia el diseño de la página a uno que pese menos, pues con el móvil en la WiFi se echa casi 5 minutos cargando.
Si, me he dado cuenta y pretendo cambiar el theme pero solo que no he encontrado el que se ajuste a mis necesidades y a la vez al contexto del blog. ¡Saludos!