En este ejercicio vamos a crear un Responsive Slider o carrusel de imágenes de forma responsiva. Este ejercicio se caracterizará por tener tanto código HTML, CSS y Javascript. Se trata de un carrusel de imágenes sencillo, con un botón de adelante y atrás, y puede tener contenido de imagen como cualquier contenido.
Nosotros podríamos agregarle efectos de animación, un Autoplay automático. El posicionamiento que vamos a aplicar a nuestro slider va a ser relativo.
Nota: el posicionamiento por defecto es estático, y cuando cambiamos a sticky, fixed, absolute o relative, cambia el orden de profundidad z-index. El posicionamiento absoluto se posiciona respecto al primer elemento padre que encuentre del árbol del DOM que sea relativo, si no encuentra ningún elemento que tenga posicionamiento relativo, se posicionará con respecto del <body>.
Nota: Para las imágenes, utilizaremos las propiedades object-fit: cover para que se adapte al ancho y alto que tenga, y con la propiedad object-position: 50% 50%; (valor por defecto), podemos cambiar estos porcentajes para adecuar la imagen como necesitemos.
Archivos
Los archivos para este ejercicio se encuentran en el siguiente enlace.