Hoy te voy a enseñar cómo crear un slider de ancho completo para la página de inicio de tu web en WordPress, utilizando solo HTML, CSS y JavaScript, directamente dentro de un bloque de HTML de Gutenberg. Este slider permite añadir tantas diapositivas como necesites, cada una con su propio título, subtítulo, texto y botón, y todo sin necesidad de recurrir a plugins adicionales.
¿Por qué sin plugin?
Si solo vas a utilizar un slider sencillo en la home (que es el caso más común), no tiene sentido sobrecargar tu WordPress con un plugin de slider que probablemente añada scripts y estilos innecesarios en todo el sitio.
Además, este método es ligero, personalizable y te da total control sobre el diseño y comportamiento del slider.
¿Qué hace este slider?
- Es full-width (100% del ancho de la pantalla) y full-height (100% de la altura del viewport).
- Tiene autoplay con pausa al hacer hover.
- Incluye bolitas de navegación manuales para cambiar de slide.
- Cada diapositiva tiene un h3 (título principal), h4 (subtítulo), un párrafo y un botón.
- Se adapta bien tanto a escritorio como a dispositivos móviles.
Código completo del slider
Aquí tienes el código listo para copiar directamente en un bloque HTML de Gutenberg:
<style>
/* Contenedor Full-width */
.hero-slider-container {
position: relative;
width: 100%;
overflow: hidden;
}
/* Pista del slider */
.hero-slider-track {
display: flex;
transition: transform 0.8s ease;
}
/* Cada slide ocupa el 100% de la pantalla */
.hero-slide {
min-width: 100%;
position: relative;
}
/* Imagen full-width y full-height */
.hero-slide img {
width: 100%;
height: 100vh;
object-fit: cover;
display: block;
}
/* Contenido centrado */
.hero-slide-content {
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
background: rgba(0, 0, 0, 0.4);
padding: 30px 40px;
text-align: center;
border-radius: 8px;
max-width: 600px;
color: #fff;
}
.hero-slide-content h3,
.hero-slide-content h4,
.hero-slide-content p,
.hero-slide-content a {
color: #fff;
}
.hero-slide-content h3 {
margin-bottom: 10px;
font-size: 3rem;
}
.hero-slide-content h4 {
margin-bottom: 10px;
font-weight: normal;
font-size: 1.5rem;
}
.hero-slide-content p {
margin-bottom: 20px;
font-size: 1.1rem;
}
.hero-slide-content a {
display: inline-block;
padding: 12px 25px;
background: #13b0a0;
text-decoration: none;
border-radius: 4px;
font-weight: bold;
transition: background 0.3s;
}
.hero-slide-content a:hover {
background: #009975;
}
/* Bolitas */
.hero-slider-dots {
position: absolute;
bottom: 30px;
left: 50%;
transform: translateX(-50%);
display: flex;
gap: 12px;
}
.dot {
width: 14px;
height: 14px;
background: rgba(255, 255, 255, 0.6);
border-radius: 50%;
cursor: pointer;
transition: background 0.3s;
}
.dot.active {
background: #13b0a0;
}
</style>
<div class="hero-slider-container" id="hero-slider">
<div class="hero-slider-track">
<div class="hero-slide">
<img src="https://codigos.fransalas-proyectos.com/wp-content/uploads/2025/01/8f490a7d-7b71-3749-8ce5-e9fd616772b1.jpg" alt="Slide 1">
<div class="hero-slide-content">
<h3>Título Principal 1</h3>
<h4>Subtítulo de la imagen 1</h4>
<p>Este es un párrafo descriptivo para la primera imagen del slider.</p>
<a href="#">Ver más</a>
</div>
</div>
<div class="hero-slide">
<img src="https://codigos.fransalas-proyectos.com/wp-content/uploads/2025/01/36bfb0cb-b4ea-365e-8c30-58149b3e7ead.jpg" alt="Slide 2">
<div class="hero-slide-content">
<h3>Título Principal 2</h3>
<h4>Subtítulo de la imagen 2</h4>
<p>Este es un párrafo descriptivo para la segunda imagen del slider.</p>
<a href="#">Ver más</a>
</div>
</div>
<div class="hero-slide">
<img src="https://codigos.fransalas-proyectos.com/wp-content/uploads/2025/01/cfa86f19-7f56-39b4-87db-9f52f58b2f33.jpg" alt="Slide 3">
<div class="hero-slide-content">
<h3>Título Principal 3</h3>
<h4>Subtítulo de la imagen 3</h4>
<p>Este es un párrafo descriptivo para la tercera imagen del slider.</p>
<a href="#">Ver más</a>
</div>
</div>
<div class="hero-slide">
<img src="https://codigos.fransalas-proyectos.com/wp-content/uploads/2025/01/305ebd6d-ecd4-35e9-9254-cf81c19c148a.jpg" alt="Slide 4">
<div class="hero-slide-content">
<h3>Título Principal 4</h3>
<h4>Subtítulo de la imagen 4</h4>
<p>Este es un párrafo descriptivo para la cuarta imagen del slider.</p>
<a href="#">Ver más</a>
</div>
</div>
</div>
<div class="hero-slider-dots">
<div class="dot active" data-slide="0"></div>
<div class="dot" data-slide="1"></div>
<div class="dot" data-slide="2"></div>
<div class="dot" data-slide="3"></div>
</div>
</div>
<script>
const track = document.querySelector('.hero-slider-track');
const slider = document.getElementById('hero-slider');
const dots = document.querySelectorAll('.dot');
const totalSlides = document.querySelectorAll('.hero-slide').length;
let currentSlide = 0;
let autoplay;
function moveSlide(index) {
currentSlide = index;
track.style.transform = `translateX(-${currentSlide * 100}%)`;
dots.forEach(dot => dot.classList.remove('active'));
dots[currentSlide].classList.add('active');
}
function startAutoplay() {
autoplay = setInterval(() => {
currentSlide = (currentSlide + 1) % totalSlides;
moveSlide(currentSlide);
}, 4000);
}
function stopAutoplay() {
clearInterval(autoplay);
}
dots.forEach(dot => {
dot.addEventListener('click', () => {
moveSlide(parseInt(dot.dataset.slide));
stopAutoplay();
startAutoplay();
});
});
startAutoplay();
slider.addEventListener('mouseenter', stopAutoplay);
slider.addEventListener('mouseleave', startAutoplay);
</script>
Lenguaje del código: HTML, XML (xml)¿Cómo personalizarlo a tu gusto?
1. Agregar o eliminar diapositivas
Cada diapositiva es un bloque con la clase .hero-slide. Para añadir una nueva, simplemente duplica una de las existentes:
<div class="hero-slide">
<img src="URL-DE-LA-IMAGEN" alt="Slide 5">
<div class="hero-slide-content">
<h3>Título Principal 5</h3>
<h4>Subtítulo de la imagen 5</h4>
<p>Texto descriptivo de la diapositiva 5.</p>
<a href="#">Ver más</a>
</div>
</div>
Sustituye URL-DE-LA-IMAGEN por la url que puedes copiar en cada imagen de la biblioteca de medios.
Y recuerda agregar también la bolita correspondiente dentro de:
<div class="dot" data-slide="4"></div>
Consejo: el atributo
data-slidedebe ir en orden:0, 1, 2, 3...
2. Editar los contenidos de cada slide
Cada bloque .hero-slide-content incluye:
- h3 para el título principal.
- h4 para el subtítulo.
- p para el párrafo descriptivo.
- a para el botón (puedes poner el enlace que necesites en el
href).
Puedes eliminar o añadir más elementos dentro de cada slide según tu diseño, por ejemplo, imágenes adicionales, iconos, etc.
3. Cambiar las imágenes
Cambia el src de cada <img> por la URL de la imagen que desees cargar:
<img src="https://misitio.com/mi-imagen.jpg" alt="Slide X">
Es recomendable que todas las imágenes tengan las mismas dimensiones para evitar saltos o desajustes entre slides.
4. Modificar colores y estilos
En la sección <style> puedes personalizar:
- Colores del botón (
background: #13b0a0;). - Color de las bolitas activas e inactivas.
- Fondo semitransparente de los textos (
rgba(0, 0, 0, 0.4)). - Tamaños de los textos (modificando
font-sizede los h3, h4 y p). - Altura del slider (
height: 100vh;en la imagen).
5. Cambiar la transición por un efecto «fade»
El slider funciona actualmente con un efecto de deslizamiento lateral (translateX), pero si quieres un efecto fade (desvanecido), necesitarías modificar el CSS y JS:
Cambios básicos para un fade:
- Cambiar
.hero-slider-trackaposition: relative;ydisplay: block; - Cada
.hero-slidedebe tenerposition: absolute; opacity: 0; transition: opacity 0.8s; - En JS, en vez de
transform: translateX(), aplicaropacity: 1solo al slide activo yopacity: 0al resto.
Esto requiere un pequeño ajuste en el código base que puedo prepararte si lo quieres ya listo.
6. ¿Qué tipos de transiciones hay disponibles en sliders «manuales»?
Con HTML, CSS y JS puro puedes implementar:
- Deslizamiento lateral (como este ejemplo)
- Fade (desvanecido)
- Slide vertical (desplazamiento arriba-abajo)
- Zoom in/out en la imagen
- Crossfade entre imágenes
Lo mejor es que puedes combinarlas con un poco de CSS avanzado y modificaciones en el JavaScript.
7. ¿Y la parte responsive?
El slider ya es responsive de base, pero si quieres mejorar la visualización en móviles, puedes:
- Cambiar la altura en pantallas pequeñas:
@media (max-width: 768px) {
.hero-slide img {
height: 70vh;
}
.hero-slide-content h3 {
font-size: 2rem;
}
.hero-slide-content h4 {
font-size: 1rem;
}
}
¿Es suficiente para la mayoría de webs?
Sí. Para una portada típica que solo necesita un slider con imágenes, textos y botones, este sistema es rápido, eficiente y totalmente personalizable.
Y lo mejor es que no impacta en la velocidad de carga tanto como un plugin, porque solo cargas lo que realmente necesitas en esa página específica.
Agregar Comentario