Muchas veces queremos matar moscas a cañonazos. Gastamos energías buscando y configurando diferentes plugins para hacer una tarea en Javascript que se puede resolver fácilmente con alguna líneas de código. En el siguiente ejemplo dejo un minimalista y sencillo Carousel (Slider) en Javascript puro (Sin JQuery), usando la moderna nomenclatura ES6.
Entre sus características:
- Controles para cambiar a la siguiente o la anterior imagen.
- Activar cambio automático.
- Parar cambio automático.
- Totalmente personalizable con CSS.
Demo
Código
El HTML es mínimo. Puede moverse independientemente cada elemento o cambiarse los textos. Solo debes mantener las ids.
<div class="carousel">
<button id="retroceder">Retroceder</button>
<div id="imagen"></div>
<button id="avanzar">Avanzar</button>
</div>
<div class="controles">
<button id="play">Play</button>
<button id="stop" disabled>Stop</button>
</div>
El CSS solo esta de ejemplo para maquetarlo mínimamente. Estiliza a tu gusto.
.carousel {
max-width: 800px;
margin: 0 auto;
display: flex;
}
#imagen {
width: 100%;
height: 400px;
background-size: cover;
}
Dentro del Javascript, solo hay 2 variables interesantes:
- IMAGENES: Donde indicarás las rutas de tus imágenes. Entre comillas, terminando con una coma al final de la línea salvo el último elemento. En el ejemplo doy por hecho que están en una carpeta llamada img y que nos has puesto un nombre adecuado (sin espacios, acentos…).
- TIEMPO_INTERVALO_MILESIMAS_SEG: Tiempo en milisegundos entre una imagen y otra.
window.onload = function () {
// Variables
const IMAGENES = [
'img/montanya.jpg',
'img/parque.jpg',
'img/palmeras.jpg'
];
const TIEMPO_INTERVALO_MILESIMAS_SEG = 1000;
let posicionActual = 0;
let $botonRetroceder = document.querySelector('#retroceder');
let $botonAvanzar = document.querySelector('#avanzar');
let $imagen = document.querySelector('#imagen');
let $botonPlay = document.querySelector('#play');
let $botonStop = document.querySelector('#stop');
let intervalo;
// Funciones
/**
* Funcion que cambia la foto en la siguiente posicion
*/
function pasarFoto() {
if(posicionActual >= IMAGENES.length - 1) {
posicionActual = 0;
} else {
posicionActual++;
}
renderizarImagen();
}
/**
* Funcion que cambia la foto en la anterior posicion
*/
function retrocederFoto() {
if(posicionActual <= 0) {
posicionActual = IMAGENES.length - 1;
} else {
posicionActual--;
}
renderizarImagen();
}
/**
* Funcion que actualiza la imagen de imagen dependiendo de posicionActual
*/
function renderizarImagen () {
$imagen.style.backgroundImage = `url(${IMAGENES[posicionActual]})`;
}
/**
* Activa el autoplay de la imagen
*/
function playIntervalo() {
intervalo = setInterval(pasarFoto, TIEMPO_INTERVALO_MILESIMAS_SEG);
// Desactivamos los botones de control
$botonAvanzar.setAttribute('disabled', true);
$botonRetroceder.setAttribute('disabled', true);
$botonPlay.setAttribute('disabled', true);
$botonStop.removeAttribute('disabled');
}
/**
* Para el autoplay de la imagen
*/
function stopIntervalo() {
clearInterval(intervalo);
// Activamos los botones de control
$botonAvanzar.removeAttribute('disabled');
$botonRetroceder.removeAttribute('disabled');
$botonPlay.removeAttribute('disabled');
$botonStop.setAttribute('disabled', true);
}
// Eventos
$botonAvanzar.addEventListener('click', pasarFoto);
$botonRetroceder.addEventListener('click', retrocederFoto);
$botonPlay.addEventListener('click', playIntervalo);
$botonStop.addEventListener('click', stopIntervalo);
// Iniciar
renderizarImagen();
}
Ejemplo completo
<!DOCTYPE html>
<html lang="es">
<head>
<meta charset="UTF-8">
<title>Ejemplo</title>
<style type="text/css" media="screen">
.carousel {
max-width: 800px;
margin: 0 auto;
display: flex;
}
#imagen {
width: 100%;
height: 400px;
background-size: cover;
}
</style>
<script>
window.onload = function () {
// Variables
const IMAGENES = [
'img/montanya.jpg',
'img/parque.jpg',
'img/palmera.jpg'
];
const TIEMPO_INTERVALO_MILESIMAS_SEG = 1000;
let posicionActual = 0;
let $botonRetroceder = document.querySelector('#retroceder');
let $botonAvanzar = document.querySelector('#avanzar');
let $imagen = document.querySelector('#imagen');
let $botonPlay = document.querySelector('#play');
let $botonStop = document.querySelector('#stop');
let intervalo;
// Funciones
/**
* Funcion que cambia la foto en la siguiente posicion
*/
function pasarFoto() {
if(posicionActual >= IMAGENES.length - 1) {
posicionActual = 0;
} else {
posicionActual++;
}
renderizarImagen();
}
/**
* Funcion que cambia la foto en la anterior posicion
*/
function retrocederFoto() {
if(posicionActual <= 0) {
posicionActual = IMAGENES.length - 1;
} else {
posicionActual--;
}
renderizarImagen();
}
/**
* Funcion que actualiza la imagen de imagen dependiendo de posicionActual
*/
function renderizarImagen () {
$imagen.style.backgroundImage = `url(${IMAGENES[posicionActual]})`;
}
/**
* Activa el autoplay de la imagen
*/
function playIntervalo() {
intervalo = setInterval(pasarFoto, TIEMPO_INTERVALO_MILESIMAS_SEG);
// Desactivamos los botones de control
$botonAvanzar.setAttribute('disabled', true);
$botonRetroceder.setAttribute('disabled', true);
$botonPlay.setAttribute('disabled', true);
$botonStop.removeAttribute('disabled');
}
/**
* Para el autoplay de la imagen
*/
function stopIntervalo() {
clearInterval(intervalo);
// Activamos los botones de control
$botonAvanzar.removeAttribute('disabled');
$botonRetroceder.removeAttribute('disabled');
$botonPlay.removeAttribute('disabled');
$botonStop.setAttribute('disabled', true);
}
// Eventos
$botonAvanzar.addEventListener('click', pasarFoto);
$botonRetroceder.addEventListener('click', retrocederFoto);
$botonPlay.addEventListener('click', playIntervalo);
$botonStop.addEventListener('click', stopIntervalo);
// Iniciar
renderizarImagen();
}
</script>
</head>
<body>
<div class="carousel">
<button id="retroceder">Retroceder</button>
<div id="imagen"></div>
<button id="avanzar">Avanzar</button>
</div>
<div class="controles">
<button id="play">Play</button>
<button id="stop" disabled>Stop</button>
</div>
</body>
</html>
Extra 1: Truco para cachear imágenes y evitar parpadeos
Tan solo deben declarar sus imágenes en el HTML con un display: none. Internamente las descargará el navegador y podrás pasar entre las imágenes de forma suave.
<img src="img/montanya.jpg" style="display: none">
<img src="img/parque.jpg" style="display: none">
<img src="img/palmeras.jpg" style="display: none">
Extra 2: Usa HTML en lugar de imágenes
Lamentablemente esta solución no permite usar bloques de HTML por cada diapositiva. Por ello te dejo otro ejemplo enfocado a ello: Carousel en CSS con Mandatory y diapositivas en bloques de HTML.
No olvides dejar un comentario positivo si te ha gustado.
{{ comments.length }} comentarios