1

Como crear un banner rotativo para tu web con html, css y javascript

paso 1 crear el archivo index de nuestro proyecto o emplear uno existente.

la estructura sugerida es la siguiente:

❯ public_html
.
├── css
│ └── miBannerRotativo.css
├── img
│ ├── background1.jpg
│ ├── background2.jpg
│ ├── background3.jpg
│ ├── background4.jpg
│ └── background5.jpg
├── index.html
└── js
└── miBannerRotativo.js

Maquetado del Banner:

Dentro de la etiqueta body debemos definir la estructura de nuestro banner.
como puedes ver la estructura es muy simple creamos un div principal en el cual estará empaquetado todo el contenido de el banner
por este modo opte por colocar el nombre de la clase como ‘miBanner’

Cada imagen de nuestro banner se conoce como ‘slide’ cada slide se como pone de un contenedor div que tiene como hijos la imagen y el texto h2 de el titulo para poder manipular el dom desde javascript es necesario tener una etiqueta a la cual podamos apuntar para poder manipular los elementos como id es un elemento único no nos sirve ya que nuestro slide debe ser capas de tener todos los slides que nosotros queramos así que en este caso se implementa en el div contenedor la etiqueta class con el nombre slide aun que realmente puede llamarse como quieras pero para buenas practicas es recomendable poner un nombre descriptivo eso nos ayuda muchísimo al momento revisitar nuestro código después de un tiempo y no decir “De verdad yo hice eso?”.

puedes agregar tantos bloques de slides como necesites solo recuerda abrir y cerrar todas las etiquetas correctamente.
Después debes colocar las flechitas izquierda y derecha que servirán para adelantar o atrasar el slide esto se hace con dos botones en estos botones puedes emplear una etiqueta class o id como tu lo prefieras pero para mi caso yo implemente class.
Esto no es otra cosa que un icono de la biblioteca de iconos Font Awesome deberas agregar el CDN de Font Awesome en el reader de tu pagina web para poder usar los iconos. puedes encontrarlo aquí

"miBanner">
      "slide">
            "img/background1.jpg"alt="imagen-cool-2">

y listo! con esto tenemos todo lo necesario en cuanto a estructura html para nuestro Banner pero aun se vera feo para hacer que se vea bien necesitamos
implementar nuestros estilos css. en lo personal Ami me gusta colocar el css en un archivo diferente a mi index me parece una forma mas limpia y ordenada de hacerlo si mencionar que el código css se puede volver enorme y tenerlo todo junto se vuelve inmanejable. para ligar tu hoja de estilo desde un ruta externa en tu index solo requieres usar la etiqueta link no voy a explicar esto por que es facilísimo <link rel="“stylesheet”" src="#" type="“text/css”">.

El código css es el siguiente coloque comentarios en el css, que describen muy bien lo que hace cada atributo creo que ya vimos los temas que se tocan aquí así que no se requiere una explicación muy extensa de cada cosa solo comento los atributos que considero críticos para que el banner funcione hacerlo mas o menos increíble depende de cuanto tiempo quieras dedicarle a tu banner para este tutoría decidí mantenerlo simple.

css:

body {
    font-family: Arial, sans-serif; 
    padding: 0;
    display: flex; /* Aplica un layout flex al cuerpo */justify-content: center; /* Centra el contenido horizontalmente */background-color: #f0f0f0; 
}

.miBanner {
    position: relative; /* Establece la posición relativa del contenedor del banner */margin-top: 100px; 
    width: 90%; 
    max-width: 90%; /* Asegura que el ancho máximo del banner sea del 90% */height: 500px;
    overflow: hidden; /* Oculta el contenido que desborde el contenedor */border: 1px solid #333; 
    box-shadow: 04px8pxrgba(0,0,0,0.1); 
    box-sizing: border-box; /* Incluye el borde y el relleno en el ancho y alto total del elemento */
}

.slide {
    display: none; /* Oculta cada slide por defecto esto es util cuando se programe la logica del baner en javascript*/width: 100%; 
    height: auto; 
    box-sizing: border-box; /* Incluye el borde y el relleno en el ancho y alto total del slide */
}

.slideimg {
    width: 100%;
    height: auto;
}

.miBanner.slideh2 {
    position: absolute;
    z-index: 10;
    top: 40%; /* Centra verticalmente */left: 50%; /* Centra horizontalmente */transform: translate(-40%, -50%); /* Ajusta la posición para centrar correctamente */color: #fff;
    letter-spacing: 4px;
    white-space: nowrap; /* Evita que el texto se envuelva (opcional) */background-color: rgba(0, 0, 0, 0.5); /* Fondo semitransparente para mejor visibilidad (opcional) */text-align: center; /* Centra el texto dentro del h2 */font-size: 60px;
}

.slide.active {
    display: block; /* Muestra el slide activo */
}

/* Las flechas de control del banner */button.back, button.next {
    position: absolute; /* Posiciona las flechas de control de manera absoluta respecto al contenedor padre */top: 50%; /* Centra verticalmente las flechas */transform: translateY(-50%); /* Ajusta la posición verticalmente para centrar completamente */background-color: rgba(0,0,0,0.5); /* Establece un fondo semi-transparente para las flechas */color: white; /* Establece el color del texto de las flechas a blanco */border: none; /* Elimina el borde de las flechas */padding: 10px; /* Añade relleno de 10 píxeles dentro de las flechas */cursor: pointer; /* Cambia el cursor a una mano al pasar sobre las flechas */font-size: 60px;
}

button.back {
    left: 10px; /* Posiciona la flecha de retroceso a 10 píxeles desde la izquierda */
}

button.next {
    right: 10px; /* Posiciona la flecha de avance a 10 píxeles desde la derecha */
}

button.back:hover, button.next:hover {
    background-color: rgba(0,0,0,0.8); /* Oscurece el fondo de las flechas al pasar el cursor sobre ellas */
}

Ahora si viene mi parte favorita 😃 el javascript que le va a dar vida al banner
Para que esto funcione deberemos utilizar el escuchador de eventos de javascript que es eso? pues es una función como funciona ni yo lo se no soy tan sabiondo, pero quédate con que Básicamente, es una manera de decirle a tu código que este checando si pasa algo relacionado con un elemento de tu pagina web y si es así entonces haga algo en consecuencia es algo similar a cuando tu en un videojuego presionas un botón o mueves la cruceta cada uno de los botones es un event listener que tiene una tarea programada para cada botón de tu mando el botón de saltar sabe que cuando presiones ‘B’ Mario debe de saltar aquí es lo mismo solo que en lugar de un control es el DOM de tu web.

Bueno pues no me enrollo mas aquí esta el script la verdad esta muy simple todos los temas que se usan para construir la lógica de este banner ya los hemos visto quizás lo único que no es el manejo de eventos, pero solo es cuestión de darle una chicada a ese tema no es difícil de entender ya que es muy intuitivo que es lo que hace cada uno.

DOMContentLoaded se utiliza para ejecutar la función cuando el documento HTML ha sido cargado en el navegador, pero antes de que cosas como imágenes y hojas de estilo se carguen. Como parámetros el evento recibe una función anónima donde programaremos todo el comportamiento de nuestro banner lo primero que se hace es jalar todos los elementos que necesitamos controlar desde el front, lo primero es crear una variable donde se tenga permanentemente el index que se esta visualizando todo el tiempo este valor estará cambiado así que usamos let para el resto de variables ocupamos const ya que sus valores no cambian con el tiempo siempre son los mismos para hacer esto utilizaremos un método de document llamado querySelectorAll() este método nos retorna todos los elementos que tengan el selector que se les de como parámetros esto cuando hay mas de un elemento como lo es en el caso de los slide en mi ejemplo son 3 pueden ser 10 da lo mismo querySelectorAll los traerá todos y los almacenara en un array, querySelector a secas es lo mismo pero se usa cuando solo quieres traer un solo elemento.

document.addEventListener('DOMContentLoaded', function() {
    let currentSlide = 0; // Inicializa el índice del slide actual a 0const slides = document.querySelectorAll('.slide'); // Selecciona todos los elementos con la clase 'slide'const backButton = document.querySelector('.back'); // Selecciona el botón de retrocesoconst nextButton = document.querySelector('.next'); // Selecciona el botón de avancefunctionshowSlide(index) {
        slides.forEach((slide, i) => {
            slide.classList.toggle('active', i === index); //  toggle activa el slide correspondiente si la comparación es true y desactiva los demás si son false no se bien como funciona internamente pero esta función sirve para hacer visibles o invisibles elementos usando validaciones.
        });
    }

    functionnextSlide() {
        currentSlide = (currentSlide + 1) % slides.length;

/** Incrementa el índice del slide actual y lo ajusta al número total de slides esto lo hace de una forma ingeniosa esto yo no me lo invente jejeje lo aprendi *investigando ya que no sabia como hacer que cuando terminara el valer volviera al inicio y esta fue la solución que encontré  implementa  el modulo para *evaluar si el eslider actual ha llegado al inicio o al final*/console.log(currentSlide);
        showSlide(currentSlide); // Muestra el slide que se indique mediante el indice
    }

    functionbackSlide() {
        currentSlide = (currentSlide - 1 + slides.length) % slides.length; // Decrementa el índice del slide actual y lo ajusta al número total de slidesconsole.log(currentSlide);
        showSlide(currentSlide); // Muestra el slide correspondiente
    }

    // Muestra el primer slide
    showSlide(currentSlide);

    // Cambia el slide cada 3 segundosconst interval = setInterval(nextSlide, 3000);

    // Eventos de botones de back y next
    backButton.addEventListener('click', () => {
        backSlide(); // Muestra el slide anterior al hacer clic en el botón de retroceso
        clearInterval(interval); // Detiene el cambio automático de slides
    });

    nextButton.addEventListener('click', () => {
        nextSlide(); // Muestra el siguiente slide al hacer clic en el botón de avance
        clearInterval(interval); // Detiene el cambio automático de slides
    });
});

y taran! tienes un slide para tu web:
no tengo un server en linea para subir la imagen final del banner y me da un poco de pereza subir esto a git hub, así que lo dejaremos aquí por ahora.
El código funciona jejeje créeme!, por Dioscito que si!

Escribe tu comentario
+ 2