Los Sliders van perdiendo peso en los sitios web con el paso del tiempo aunque son de gran utilidad en imágenes relacionadas con productos, ciertas presentaciones, etc … En este HowTo aprenderás a crear un Slider Responsive desde cero usando JavaScript y CSS.
Durante el proceso de creación de un Slider podemos diferenciar 3 partes:
- Presentación mediante código HTML5 y que contienen cada una de las diapositivas que se van a presentar.
- Maquetación con código CSS con el que damos estilo y animamos el slider.
- Interacción usando código JavaScript con el que vamos a permitir al usuario interaccionar con el slider.
El ejemplo ya funcional se puede previsualizar desde aquí y su código se puede comprobar desde jsFiddle
1. Presentación
Nuestro slider se va a componer de los siguientes elementos para así poder hacerlo funcional:
- Un contenedor principal que va a contener la lista con las diapositivas y los botones que van a permitir a usuario interaccionar con ellas
- Las diapositivas están agrupadas dentro de un elemento lista <ul> de HTML con atributo de clase «slides».
- Dentro de cada elemento de lista incluimos un elemento <span> con la descripción de cada diapositiva.
- Los botones que nos van a permitir avanzar y retroceder las diapositivas irán en un contenedor aparte.
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 |
<div class="slider"> <ul class="slides"> <li><img src="assets/img/1.jpg" alt="imagen1" /><span>imagen1</span></li> <li><img src="assets/img/2.jpg" alt="imagen2" /><span>imagen2</span></li> <li><img src="assets/img/3.jpg" alt="imagen3" /><span>imagen3</span></li> <li><img src="assets/img/4.jpg" alt="imagen4" /><span>imagen4</span></li> <li><img src="assets/img/5.jpg" alt="imagen5" /><span>imagen5</span></li> <li><img src="assets/img/6.jpg" alt="imagen6" /><span>imagen6</span></li> </ul> <div class="buttons"> <div class="next">❯</div> <div class="prev">❮</div> </div> </div> |
2.- Maquetación
La maquetación del slider es parte importante ya que nos permite agrupar y posicionar las diapositivas en el contenedor, especificar el tamaño de este, posicionar los botones correctamente e incluir algún efecto. Las partes que tendremos que tener en cuenta dentro de la maquetación son las siguientes:
- El contenedor principal «slider» debe estar posicionado relativamente para que más adelante podamos posicionar los botones en el lugar correcto dentro de este.
- Cada elemento <li> con su diapositiva también debe estar posicionado relativamente para que estos no se muestren uno a continuación de otro.
- Cada elemento <img> de la lista ajustar la imagen respecto a su contenedor padre <li>. Para ello usamos la propiedad object-fit con valor cover.
- Cada elemento <span> con las descripciones de cada diapositiva debe estar posicionado con medidas absolutas para ajustarlo en la posición deseada dentro de cada diapositiva.
- Los botones deben tener medidas absolutas para poder posicionarlos correctamente en el lugar marcado.
- Una sencilla animación para incluir opacidad con cada cambio de diapositiva.
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59 60 61 62 63 64 65 66 67 68 69 70 71 72 73 74 75 76 |
/* slider */ .slider { border-radius: 5px; box-shadow: 5px 5px hsl(0, 0%, 76%); position: relative; } .slider ul { list-style-type: none; margin: 0; padding: 0; } .slider ul li { position: relative; display: none; height:350px; } .slider ul li img { height: 100%; width: 100%; object-fit: cover; border-radius: 5px; } .slider ul li span { position: absolute; bottom: 0; background: hsl(0, 1%, 72%, .1); left: 0; width: 100%; padding: 5px; text-align: center; color: #fff; } /* buttons */ .slider .buttons { position: absolute; top: 40%; width: 100%; } .slider .buttons .next { font-size: 2rem; right: 0; position: absolute; cursor: pointer; width: 50px; text-align: center; } .slider .buttons .prev { font-size: 2rem; left: 0; position: absolute; cursor: pointer; width: 50px; text-align: center; } .slider .buttons .next:hover { background: hsl(0, 0%, 25%); color: hsl(0, 0%, 93%); } .slider .buttons .prev:hover { background: hsl(0, 0%, 25%); color: hsl(0, 0%, 93%); } /* slider animation */ .slider ul li { animation-name: fade; animation-duration: 2.5s; } @keyframes fade { from {opacity: .2} to {opacity: 1} } |
Interacción
La interacción es una parte importante durante el proceso de creación de un slider. En este slider sencillo podemos destacar las siguientes partes:
- Una función que controlará que diapositiva se tiene que mostrar y ocultando el resto.
- 2 eventos «click» que nos van a permitir avanzar y retroceder las diapositivas.
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 |
window.addEventListener('load', () => { // initial slide let slide = 1; // total slides let slides = document.querySelectorAll(".slider ul li"); total = slides.length; // show first side showSlide(1); next = document.querySelector(".next"); prev = document.querySelector(".prev") /** * event next button */ next.addEventListener('click', (evt) => { evt.preventDefault(); slide++; if (slide > total) { slide = 1; } showSlide(slide); }) /** * event prev button */ prev.addEventListener("click", (evt) => { evt.preventDefault(); slide--; if (slide < 1) { slide = total; } showSlide(slide); }) /** * show slides * * @param {number} n * @return {null} * */ function showSlide(n) { n--; // decrement 1 for (i = 0; i < slides.length; i++) { (i == n) ? slides[n].style.display = "block" : slides[i].style.display = "none"; } } }) |
