✅Cómo Crear un Carrusel de Miembros del Equipo con HTML, CSS y JavaScript en Gutenberg

📌 Pinear Artículo

Buscar ❌

En Pluginsweb.es llevamos unos días explorando cómo crear funcionalidades súper útiles directamente dentro de un bloque de HTML de Gutenberg, sin plugins de por medio. Más fácil y ligero, imposible.

Ya hemos aprendido a crear:

• Sliders de imágenes.
• Tabs o pestañas.
• Tablas de precios.
• Acordeones tipo FAQ.

Y hoy vamos un paso más allá con algo que se ve en casi cualquier web corporativa o landing page: un carrusel de miembros del equipo con autoplay infinito y pausa al pasar el ratón.

¿Qué lleva este carrusel?

• Imagen de perfil.
• Nombre y cargo.
• Descripción breve.
• Redes sociales (LinkedIn, Facebook, Instagram, Twitter).
• Diseño responsive: 4 columnas en escritorio, 3 en tablet y 2 en móvil.
• Loop infinito que se reinicia suavemente.
• Autoplay que se detiene cuando el usuario pasa el ratón por encima.

Código completo

Aquí tienes el código listo para pegar en un bloque HTML de Gutenberg. Todo está marcado y es súper intuitivo de modificar:

<style>
  .team-carousel-container {
    overflow: hidden;
    max-width: 1200px;
    margin: 0 auto;
  }
  .team-carousel-track {
    display: flex;
    transition: transform 0.6s ease;
  }
  .team-member {
    flex: 0 0 25%;
    box-sizing: border-box;
    padding: 20px;
    text-align: center;
  }
  .team-member img {
    width: 100px;
    height: 100px;
    object-fit: cover;
    border-radius: 50%;
    margin-bottom: 15px;
  }
  .team-member h4 {
    margin: 0 0 5px;
    font-size: 1.1rem;
  }
  .team-member p {
    font-size: 0.85rem;
    margin: 0 0 10px;
    color: #555;
  }
  .team-member .role {
    font-weight: bold;
    margin-bottom: 10px;
    color: #13b0a0;
  }
  .social-icons {
    display: flex;
    justify-content: center;
    gap: 8px;
  }
  .social-icons a {
    color: #111;
    font-size: 1rem;
    transition: color 0.3s;
  }
  .social-icons a:hover {
    color: #13b0a0;
  }

  /* Responsive */
  @media (max-width: 1024px) {
    .team-member {
      flex: 0 0 33.33%;
    }
  }
  @media (max-width: 600px) {
    .team-member {
      flex: 0 0 50%;
    }
  }
</style>

<div class="team-carousel-container" id="team-carousel">
  <div class="team-carousel-track">
    <!-- Miembros anteriores + 3 nuevos -->
    <!-- Miembro 1 -->
    <div class="team-member">
      <img src="https://codigos.fransalas-proyectos.com/wp-content/uploads/2022/05/about-us-team-scaled-1.webp" alt="Miembro 1">
      <h4>Ana López</h4>
      <p>Especialista en Marketing</p>
      <div class="role">Marketing Manager</div>
      <div class="social-icons">
        <a href="#"><i class="fab fa-linkedin"></i></a>
        <a href="#"><i class="fab fa-facebook"></i></a>
        <a href="#"><i class="fab fa-instagram"></i></a>
        <a href="#"><i class="fab fa-twitter"></i></a>
      </div>
    </div>
    <!-- Miembro 2 -->
    <div class="team-member">
      <img src="https://codigos.fransalas-proyectos.com/wp-content/uploads/2022/04/article-image-1.webp" alt="Miembro 2">
      <h4>Mario Sánchez</h4>
      <p>Diseñador Gráfico Senior</p>
      <div class="role">Graphic Designer</div>
      <div class="social-icons">
        <a href="#"><i class="fab fa-linkedin"></i></a>
        <a href="#"><i class="fab fa-facebook"></i></a>
        <a href="#"><i class="fab fa-instagram"></i></a>
        <a href="#"><i class="fab fa-twitter"></i></a>
      </div>
    </div>
    <!-- Miembro 3 -->
    <div class="team-member">
      <img src="https://codigos.fransalas-proyectos.com/wp-content/uploads/2022/05/testimonial-user-4.webp" alt="Miembro 3">
      <h4>Carlos Ruiz</h4>
      <p>Responsable de Producto</p>
      <div class="role">Product Manager</div>
      <div class="social-icons">
        <a href="#"><i class="fab fa-linkedin"></i></a>
        <a href="#"><i class="fab fa-facebook"></i></a>
        <a href="#"><i class="fab fa-instagram"></i></a>
        <a href="#"><i class="fab fa-twitter"></i></a>
      </div>
    </div>
    <!-- Miembro 4 -->
    <div class="team-member">
      <img src="https://codigos.fransalas-proyectos.com/wp-content/uploads/2022/05/testimonial-user-3.webp" alt="Miembro 4">
      <h4>Laura Jiménez</h4>
      <p>Especialista en RRHH</p>
      <div class="role">HR Specialist</div>
      <div class="social-icons">
        <a href="#"><i class="fab fa-linkedin"></i></a>
        <a href="#"><i class="fab fa-facebook"></i></a>
        <a href="#"><i class="fab fa-instagram"></i></a>
        <a href="#"><i class="fab fa-twitter"></i></a>
      </div>
    </div>
    <!-- Miembro 5 -->
    <div class="team-member">
      <img src="https://codigos.fransalas-proyectos.com/wp-content/uploads/2022/05/testimonial-user-2.webp" alt="Miembro 5">
      <h4>Diego Fernández</h4>
      <p>Desarrollador Full Stack</p>
      <div class="role">Full Stack Developer</div>
      <div class="social-icons">
        <a href="#"><i class="fab fa-linkedin"></i></a>
        <a href="#"><i class="fab fa-facebook"></i></a>
        <a href="#"><i class="fab fa-instagram"></i></a>
        <a href="#"><i class="fab fa-twitter"></i></a>
      </div>
    </div>
    <!-- Miembro 6 -->
    <div class="team-member">
      <img src="https://codigos.fransalas-proyectos.com/wp-content/uploads/2022/05/testimonial-user-1.webp" alt="Miembro 6">
      <h4>Elena Morales</h4>
      <p>Gestora de Proyectos</p>
      <div class="role">Project Manager</div>
      <div class="social-icons">
        <a href="#"><i class="fab fa-linkedin"></i></a>
        <a href="#"><i class="fab fa-facebook"></i></a>
        <a href="#"><i class="fab fa-instagram"></i></a>
        <a href="#"><i class="fab fa-twitter"></i></a>
      </div>
    </div>
    <!-- Miembro 7 -->
    <div class="team-member">
      <img src="https://codigos.fransalas-proyectos.com/wp-content/uploads/2025/01/6c4a9ecc-4a02-3e89-acf2-c228485ccab2.jpg" alt="Miembro 7">
      <h4>Isabel Torres</h4>
      <p>Content Manager</p>
      <div class="role">SEO & Content</div>
      <div class="social-icons">
        <a href="#"><i class="fab fa-linkedin"></i></a>
        <a href="#"><i class="fab fa-facebook"></i></a>
        <a href="#"><i class="fab fa-instagram"></i></a>
        <a href="#"><i class="fab fa-twitter"></i></a>
      </div>
    </div>
    <!-- Miembro 8 -->
    <div class="team-member">
      <img src="https://codigos.fransalas-proyectos.com/wp-content/uploads/2022/05/article-image-5.webp" alt="Miembro 8">
      <h4>Victor Salas</h4>
      <p>UX/UI Designer</p>
      <div class="role">UX Lead</div>
      <div class="social-icons">
        <a href="#"><i class="fab fa-linkedin"></i></a>
        <a href="#"><i class="fab fa-facebook"></i></a>
        <a href="#"><i class="fab fa-instagram"></i></a>
        <a href="#"><i class="fab fa-twitter"></i></a>
      </div>
    </div>
    <!-- Miembro 9 -->
    <div class="team-member">
      <img src="https://codigos.fransalas-proyectos.com/wp-content/uploads/2022/05/article-image-6.webp" alt="Miembro 9">
      <h4>Paula Gómez</h4>
      <p>Especialista en Data</p>
      <div class="role">Data Analyst</div>
      <div class="social-icons">
        <a href="#"><i class="fab fa-linkedin"></i></a>
        <a href="#"><i class="fab fa-facebook"></i></a>
        <a href="#"><i class="fab fa-instagram"></i></a>
        <a href="#"><i class="fab fa-twitter"></i></a>
      </div>
    </div>
  </div>
</div>

<script>
  const track = document.querySelector('.team-carousel-track');
  const container = document.getElementById('team-carousel');
  const items = document.querySelectorAll('.team-member');
  const total = items.length;
  let current = 0;
  let autoplay;

  function getVisibleItems() {
    if (window.innerWidth <= 600) {
      return 2;
    } else if (window.innerWidth <= 1024) {
      return 3;
    } else {
      return 4;
    }
  }

  let visible = getVisibleItems();
  for (let i = 0; i < visible; i++) {
    const clone = items[i].cloneNode(true);
    track.appendChild(clone);
  }

  function moveCarousel() {
    current++;
    track.style.transition = 'transform 0.6s ease';
    track.style.transform = `translateX(-${(current * 100) / visible}%)`;
    if (current >= total) {
      setTimeout(() => {
        track.style.transition = 'none';
        current = 0;
        track.style.transform = `translateX(0)`;
      }, 600);
    }
  }

  function startAutoplay() {
    autoplay = setInterval(moveCarousel, 3000);
  }

  function stopAutoplay() {
    clearInterval(autoplay);
  }

  startAutoplay();
  container.addEventListener('mouseenter', stopAutoplay);
  container.addEventListener('mouseleave', startAutoplay);
  window.addEventListener('resize', () => location.reload());
</script>

<!-- Font Awesome -->
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.0.0-beta3/css/all.min.css" />

Lenguaje del código: HTML, XML (xml)

Si acabas de empezar en este mundillo de WordPress y código personalizado échale un vistazo antes a estas 2 guías de introducción al HTML y CSS.

¿Cómo personalizar el carrusel?

1. Cambiar imágenes, nombres y cargos

Busca la parte donde están los <div class="team-member">:

<img src="URL-DE-TU-IMAGEN" alt="Miembro 1">
<h4>Nombre Apellido</h4>
<p>Descripción corta</p>
<div class="role">Cargo o posición</div>

Solo tienes que:

• Sustituir URL-DE-TU-IMAGEN por la URL de tu imagen (desde la biblioteca de medios).
• Cambiar el <h4> por el nombre real.
• Ajustar la descripción y el cargo a tu gusto.

2. Agregar o eliminar miembros del equipo

Cada bloque de miembro es un <div class="team-member"> independiente. Para añadir uno más solo copia y pega otro bloque dentro de la pista .team-carousel-track:

<div class="team-member">
  <img src="...">
  <h4>Nuevo Miembro</h4>
  <p>Descripción...</p>
  <div class="role">Puesto</div>
  <div class="social-icons">...</div>
</div>

Si quieres eliminar uno, simplemente borra uno de estos bloques completos.

3. Personalizar las redes sociales de cada miembro

Dentro de cada miembro verás este fragmento:

<div class="social-icons">
  <a href="#"><i class="fab fa-linkedin"></i></a>
  <a href="#"><i class="fab fa-facebook"></i></a>
  <a href="#"><i class="fab fa-instagram"></i></a>
  <a href="#"><i class="fab fa-twitter"></i></a>
</div>

• Sustituye cada href="#" por el enlace real a las redes sociales del miembro.
• Puedes quitar o agregar iconos según lo necesites.

4. Cambiar la velocidad del carrusel

En la parte de JavaScript, verás esta línea:

autoplay = setInterval(moveCarousel, 3000);

Ese 3000 son 3 segundos (3000 milisegundos). Si quieres que vaya más rápido o más lento:

• Pon 2000 para 2 segundos.
• Pon 5000 para 5 segundos.
• Lo que necesites.

5. Modificar la cantidad visible en cada dispositivo

En este fragmento controlas las columnas según el tamaño de pantalla:

function getVisibleItems() {
  if (window.innerWidth <= 600) {
    return 2; // Móviles
  } else if (window.innerWidth <= 1024) {
    return 3; // Tablets
  } else {
    return 4; // Escritorio
  }
}

• Puedes cambiar los valores según el diseño que prefieras. Por ejemplo, podrías hacer que en móvil solo se vea 1 miembro si quieres.

6. Personalizar el estilo: colores, tamaño de imágenes y más

Todo el diseño visual del carrusel se controla desde el bloque de <style>. Aquí puedes modificar lo que necesites para adaptarlo a tu identidad de marca.

Cambiar el color base y los hovers

Por defecto, el color base es este:

color: #13b0a0;

Es el que se usa, por ejemplo, en el cargo del equipo y en el hover de los iconos de redes sociales.

Si quieres cambiarlo por tu color corporativo, edita estas líneas:

.team-member .role {
    color: #13b0a0;
}
.social-icons a:hover {
    color: #13b0a0;
}

Por ejemplo, si tu color es #e63946 (rojo oscuro), sustitúyelo así:

color: #e63946;

Cambiar tamaño de las imágenes de perfil

.team-member img {
    width: 100px;
    height: 100px;
    object-fit: cover;
    border-radius: 50%;
}

• width y height controlan el tamaño del avatar. Puedes subirlo a 150px o lo que necesites.
• El border-radius: 50% es lo que le da la forma circular. Si lo quitas, quedarán cuadradas.

Ajustar espaciados y márgenes

.team-member {
    padding: 20px;
}
.team-member h4 {
    margin: 0 0 5px;
}
.team-member p {
    margin: 0 0 10px;
}

• Puedes aumentar el padding para dar más aire entre las tarjetas.
• Modifica los margin-bottom para ajustar la separación entre nombre, cargo y redes sociales.

Personalizar el tamaño y estilo de los iconos

.social-icons a {
    font-size: 1rem;
}

• Cambia 1rem a 1.3rem si quieres iconos un poco más grandes.
• Si quieres un diseño más llamativo, también puedes agregarles un background o un borde con CSS.

De esta forma puedes adaptar el carrusel a cualquier estilo visual, desde algo minimalista hasta un diseño más colorido según la marca que estés trabajando.

¿Por qué hacerlo sin plugins?

Porque este tipo de bloques son ligeros y funcionan perfectamente con solo HTML, CSS y un poco de JavaScript, sin necesidad de cargar un plugin pesado solo para mostrar un carrusel.

Además, tienes el control total sobre el diseño y puedes integrarlo fácilmente con la estética de tu web.

Nos vemos en el siguiente tutorial. Un saludo.