Logotipo de Bitdoze

Slider de Testimonios en Carrd: Cómo Añadir Uno (Código para Copiar)

Aprende a añadir un slider de testimonios en Carrd con tres diseños gratuitos para copiar y pegar: reproducción automática, puntos de navegación y flechas. Incluye requisitos del plan Pro y solución de problemas.

Dragos

Actualizado Publicado 64 min de lectura

Slider de Testimonios en Carrd: Cómo Añadir Uno (Código para Copiar)

La prueba social vende. Cuando los clientes potenciales ven que otros avalan tu trabajo, es más probable que confíen en ti. Pero apiñar varios testimonios en un sitio de una sola página de Carrd ocupa un espacio valioso.

En esta guía añadirás un slider de testimonios en Carrd con tres diseños gratuitos para copiar y pegar: un carrusel minimalista con puntos y autoplay, un slider de tarjetas con flechas y una cuadrícula de testimonios que lo muestra todo a la vez. Cada uno es un único Embed de Carrd con HTML, CSS y JavaScript puro. Nada que compilar y ningún script de terceros que cargar.

Lo que necesitas antes de empezar:

  • Una cuenta de Carrd en Pro Standard (19 $/año) o superior. El elemento Embed no está disponible en Free ni Pro Lite (fuente: documentación de planes de Carrd, comprobado el 2026-09-24).
  • Un sitio de Carrd con una sección lista para alojar el slider. Una sección a todo lo ancho es la opción segura; los snippets asumen un ancho máximo de 700 a 800 px.
  • Textos de testimonios con nombres y cargos. Las fotos de avatar son opcionales, y los avatares de prueba solo sirven para testear.
  • Nada más. No necesitas un servidor, npm ni un plugin aparte.

Coste. La escalera de precios de Carrd es Free (3 sitios en una dirección *.carrd.co, con marca de agua, sin embeds), Pro Lite a 9 $/año (3 sitios, sin marca de agua, aún sin embeds), Pro Standard a 19 $/año (10 sitios, dominios personalizados, Embeds, Widgets, Forms, Analytics) y Pro Plus a 49 $/año (25 sitios, formularios personalizados, descarga del código fuente del sitio). Este tutorial necesita Pro Standard. Precios verificados el 2026-09-24 en la página oficial de planes; vuelve a comprobarlos en tu panel antes de pagar. Si los 19 $ te hacen dudar, lee primero si Carrd Pro Standard merece los 19 $/año.

Los embeds requieren Carrd Pro Standard

Los tres diseños usan el elemento Embed, que está limitado a Pro Standard o superior. En Free o Pro Lite no puedes pegar código personalizado en absoluto. La aproximación nativa más cercana: dos o tres Columns en paralelo, cada una con un elemento Text estilizado con una cita, o capturas de testimonios colocadas como elementos Image. No es un slider, pero puedes tenerlo publicado esta misma noche con un plan gratuito.

Carrd.co

Algunos tutoriales de Carrd:

Puedes encontrar la lista completa de plugins, temas y tutoriales de Carrd en mi sitio web carrdme.com.

Por qué usar un slider de testimonios en Carrd

Un carrusel de testimonios en Carrd supera a un muro de citas estáticas:

  1. Ahorra espacio. Muestra de 5 a 10 testimonios en el espacio de uno.

  2. Mantiene el contenido fresco. Los visitantes que permanecen en la página ven citas distintas sin hacer scroll.

  3. Atrae la atención. El movimiento capta la mirada y dirige el foco hacia tu prueba social.

  4. Se ve profesional. Es un patrón habitual en sitios bien diseñados.

  5. Funciona en móvil. Diseño con deslizamiento pensado para dispositivos táctiles.

Cómo añadir un slider de testimonios a Carrd

Así se añaden testimonios a Carrd en tres estilos: inserta un elemento Embed, pega uno de los snippets de abajo, publica y verifica en la URL en vivo. El flujo de trabajo es corto, pero la parte de publicar y verificar no es opcional.

Cómo un slider de testimonios en Carrd pasa del embed a la página en vivo: añadir elemento en el builder, código del embed en línea, publicar cambios, el sitio en vivo muestra el slider, con un aviso de que el builder no renderiza nada hasta que publicas

Paso 1: Añade un elemento Embed en Carrd

Haz clic en el signo + y añade un elemento Embed:

  • Type: Code
  • Style: Inline (importante: esto muestra el slider en tu página)
Panel de ajustes del elemento Embed de Carrd con Type en Code y el desplegable de Style

La captura viene del tutorial del botón de volver arriba, así que sus desplegables de Style muestran Hidden y Head. Para el slider, abre el mismo desplegable de Style y elige Inline.

En una página larga, usa el Elements Panel (More Actions, luego Elements, añadido al builder el 2026-08-07) para saltar directamente al embed que acabas de añadir en lugar de hacer scroll.

Este es el mismo flujo de embeds que usan todos los widgets de Carrd en este sitio. Si quieres un segundo ejemplo resuelto antes de tocar los testimonios, añade primero un botón de volver arriba con un embed.

No verás el slider en el editor

Carrd no renderiza el código de los embeds en el editor. Tras pegar, haz clic en Publish Changes, abre la URL en vivo y fuerza la recarga. El slider aparece donde queda el embed en el orden de la sección. Un hueco en blanco en el editor no significa que algo esté roto.

Consejo pro: separa el código del marcado

Mantén el embed visible puramente presentacional. Pon el HTML y el CSS en el embed Inline, y luego coloca la mitad del <script> en un segundo Embed con Style Hidden y ubicación Body End. Carrd documenta ambos estilos, además de las ubicaciones Head, Body Top y Body End para embeds Hidden, en la documentación oficial de embeds.

Verifica: Publish Changes, abre la URL en vivo y fuerza la recarga. Resultado esperado: el slider se renderiza bajo la posición del embed con el primer testimonio visible. Si está roto se ve así: un hueco vacío en la página en vivo (falta código o Style está en Hidden) o texto de código en bruto en la página (Type puesto en algo distinto de Code).

Paso 2: Elige tu estilo de slider

Tres diseños a continuación. Elige uno y pega todo el bloque en el embed.

Opción 1: Puntos + autoplay

La opción compacta por defecto. Una cita a la vez, rota automáticamente cada 5 segundos, se pausa al pasar el ratón, deslizamiento en móvil y puntos de navegación debajo. Ideal cuando el espacio vertical escasea y quieres que las citas se muevan solas.

Ir a Opción 1: Slider minimalista limpio.

Opción 2: Flechas

Un aspecto de tarjeta con flechas izquierda/derecha, valoración por estrellas y un contador 1 / N. Control manual primero, autoplay después. Ideal para citas más largas y cuando quieres que los visitantes naveguen a su ritmo.

Ir a Opción 2: Slider de tarjetas con flechas.

Opción 3: Cuadrícula

No es un slider en absoluto. Muestra todos los testimonios a la vez en escritorio y los apila en móvil. Ideal si tienes 4 citas o menos y quieres que todas sean visibles para visitantes y buscadores sin JavaScript.

Ir a Opción 3: Cuadrícula de varios testimonios.

Revertir es trivial con los tres: borra el elemento Embed y pulsa Publish Changes otra vez.

Opción 1: Slider minimalista limpio (puntos + autoplay)

El diseño minimalista de abajo es lo más parecido a un carrusel de testimonios clásico en Carrd. Es un diseño sencillo que funciona con cualquier esquema de colores.

html
<style>
  :root {
    --testimonial-bg: #ffffff;
    --testimonial-text: #1f2937;
    --testimonial-secondary: #6b7280;
    --testimonial-accent: #4f46e5;
    --testimonial-quote: #e5e7eb;
    --testimonial-radius: 16px;
    --testimonial-max-width: 700px;
  }

  .testimonial-slider {
    max-width: var(--testimonial-max-width);
    margin: 40px auto;
    position: relative;
    font-family: inherit;
  }

  .testimonial-container {
    overflow: hidden;
    border-radius: var(--testimonial-radius);
    background: var(--testimonial-bg);
    box-shadow: 0 10px 40px rgba(0,0,0,0.1);
  }

  .testimonial-track {
    display: flex;
    transition: transform 0.5s ease;
  }

  .testimonial-slide {
    min-width: 100%;
    padding: 50px 40px;
    box-sizing: border-box;
    text-align: center;
  }

  .testimonial-quote-mark {
    font-size: 80px;
    color: var(--testimonial-quote);
    line-height: 1;
    margin-bottom: -20px;
    font-family: Georgia, serif;
  }

  .testimonial-text {
    font-size: 20px;
    line-height: 1.7;
    color: var(--testimonial-text);
    margin: 0 0 30px 0;
    font-style: italic;
  }

  .testimonial-author {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 15px;
  }

  .testimonial-avatar {
    width: 60px;
    height: 60px;
    border-radius: 50%;
    object-fit: cover;
    background: var(--testimonial-quote);
  }

  .testimonial-info {
    text-align: left;
  }

  .testimonial-name {
    font-size: 18px;
    font-weight: 600;
    color: var(--testimonial-text);
    margin: 0;
  }

  .testimonial-role {
    font-size: 14px;
    color: var(--testimonial-secondary);
    margin: 4px 0 0 0;
  }

  .testimonial-dots {
    display: flex;
    justify-content: center;
    gap: 10px;
    margin-top: 25px;
  }

  .testimonial-dot {
    width: 12px;
    height: 12px;
    border-radius: 50%;
    background: var(--testimonial-quote);
    border: none;
    cursor: pointer;
    transition: all 0.3s;
    padding: 0;
  }

  .testimonial-dot.active {
    background: var(--testimonial-accent);
    transform: scale(1.2);
  }

  .testimonial-dot:hover {
    background: var(--testimonial-accent);
    opacity: 0.7;
  }

  @media (max-width: 600px) {
    .testimonial-slide {
      padding: 35px 25px;
    }
    .testimonial-text {
      font-size: 17px;
    }
    .testimonial-quote-mark {
      font-size: 60px;
    }
  }
</style>

<div class="testimonial-slider">
  <div class="testimonial-container">
    <div class="testimonial-track" id="testimonialTrack">
      
      <div class="testimonial-slide">
        <div class="testimonial-quote-mark">"</div>
        <p class="testimonial-text">Working with them changed how our business runs. They delivered exactly what we needed, on time and within budget. Highly recommend!</p>
        <div class="testimonial-author">
          <img src="https://i.pravatar.cc/120?img=1" alt="Sarah Johnson" class="testimonial-avatar">
          <div class="testimonial-info">
            <p class="testimonial-name">Sarah Johnson</p>
            <p class="testimonial-role">CEO, TechStart Inc.</p>
          </div>
        </div>
      </div>

      <div class="testimonial-slide">
        <div class="testimonial-quote-mark">"</div>
        <p class="testimonial-text">The attention to detail was impressive. They took the time to understand our needs and created something that exceeded expectations.</p>
        <div class="testimonial-author">
          <img src="https://i.pravatar.cc/120?img=3" alt="Michael Chen" class="testimonial-avatar">
          <div class="testimonial-info">
            <p class="testimonial-name">Michael Chen</p>
            <p class="testimonial-role">Marketing Director, GrowthCo</p>
          </div>
        </div>
      </div>

      <div class="testimonial-slide">
        <div class="testimonial-quote-mark">"</div>
        <p class="testimonial-text">Fast, professional, and great communication throughout the project. This is how freelancing should work. Will definitely hire again.</p>
        <div class="testimonial-author">
          <img src="https://i.pravatar.cc/120?img=5" alt="Emily Rodriguez" class="testimonial-avatar">
          <div class="testimonial-info">
            <p class="testimonial-name">Emily Rodriguez</p>
            <p class="testimonial-role">Founder, DesignLab</p>
          </div>
        </div>
      </div>

    </div>
  </div>
  
  <div class="testimonial-dots">
    <button class="testimonial-dot active" onclick="goToSlide(0)" aria-label="Go to testimonial 1"></button>
    <button class="testimonial-dot" onclick="goToSlide(1)" aria-label="Go to testimonial 2"></button>
    <button class="testimonial-dot" onclick="goToSlide(2)" aria-label="Go to testimonial 3"></button>
  </div>
</div>

<script>
var testimonialTrack = document.getElementById('testimonialTrack');
var testimonialDots = document.querySelectorAll('.testimonial-dot');
var testimonialSlides = document.querySelectorAll('.testimonial-slide');
var currentSlide = 0;
var slideInterval;

function goToSlide(index) {
  currentSlide = index;
  testimonialTrack.style.transform = 'translateX(-' + (index * 100) + '%)';
  for (var i = 0; i < testimonialDots.length; i++) {
    testimonialDots[i].classList.remove('active');
  }
  testimonialDots[index].classList.add('active');
}

function nextSlide() {
  currentSlide = (currentSlide + 1) % testimonialSlides.length;
  goToSlide(currentSlide);
}

slideInterval = setInterval(nextSlide, 5000);

testimonialTrack.onmouseenter = function() { clearInterval(slideInterval); };
testimonialTrack.onmouseleave = function() { clearInterval(slideInterval); slideInterval = setInterval(nextSlide, 5000); };

var touchStartX = 0;
testimonialTrack.ontouchstart = function(e) {
  touchStartX = e.changedTouches[0].screenX;
  clearInterval(slideInterval);
};
testimonialTrack.ontouchend = function(e) {
  var diff = touchStartX - e.changedTouches[0].screenX;
  if (diff > 50) { currentSlide = (currentSlide + 1) % testimonialSlides.length; goToSlide(currentSlide); }
  else if (diff < -50) { currentSlide = (currentSlide - 1 + testimonialSlides.length) % testimonialSlides.length; goToSlide(currentSlide); }
  clearInterval(slideInterval);
  slideInterval = setInterval(nextSlide, 5000);
};
</script>

Cuatro pequeñas mejoras que vale la pena pegar encima del bloque anterior. Ninguna cambia la estructura del marcado, así que el copiar y pegar sigue funcionando.

Acota las variables del tema. El snippet declara sus colores en :root, que es global a la página. Vale para un embed; mal para dos. Mueve las variables a .testimonial-slider (consulta Personalizar los colores en la sección de personalización).

Dos atributos ARIA hacen que el contenedor se anuncie como carrusel a los lectores de pantalla. Edita las etiquetas de apertura existentes en su sitio y mantén el div .testimonial-container entre ellas. Explicación completa en la sección de accesibilidad más abajo.

html
<div class="testimonial-slider" aria-roledescription="carousel" aria-label="Customer testimonials">
  <div class="testimonial-container">
    <div class="testimonial-track" id="testimonialTrack" aria-live="off">

Un cuarto slide necesita un cuarto punto. El track, el autoplay y la lógica de deslizamiento cuentan los slides en tiempo de ejecución. Los puntos están fijados en el código. Cuando añadas un slide, añade su botón:

html
<!-- Add inside .testimonial-dots when you add a 4th slide -->
<button class="testimonial-dot" onclick="goToSlide(3)" aria-label="Go to testimonial 4"></button>

Para un autoplay accesible con pausa fuera de pantalla, pega estas líneas al final del mismo bloque de script. Cambian el intervalo por funciones de inicio/parada protegidas, omiten el autoplay por completo para usuarios con reduced-motion, solo rotan mientras el slider está en pantalla y pausan cuando entra el foco del teclado. Solo APIs estándar del navegador (IntersectionObserver y matchMedia). Prueba en tu sitio publicado; la vista previa del builder no ejecuta los scripts de los embeds.

js
// Accessibility + offscreen pause. Paste at the end of the existing <script> block.
var reduceMotion = window.matchMedia('(prefers-reduced-motion: reduce)').matches;
var rotationStopped = false; // set to true to turn autoplay off completely

function startAuto() {
  if (reduceMotion || rotationStopped || slideInterval) return;
  slideInterval = setInterval(nextSlide, 5000);
}

function stopAuto() {
  clearInterval(slideInterval);
  slideInterval = null;
}

// Replaces the plain setInterval start and the mouse and touch handlers above
stopAuto();
startAuto();

testimonialTrack.onmouseenter = stopAuto;
testimonialTrack.onmouseleave = startAuto;

var swipeStart = testimonialTrack.ontouchstart;
var swipeEnd = testimonialTrack.ontouchend;
testimonialTrack.ontouchstart = function (e) { swipeStart(e); stopAuto(); };
testimonialTrack.ontouchend = function (e) { swipeEnd(e); stopAuto(); startAuto(); };

document.querySelector('.testimonial-slider').addEventListener('focusin', stopAuto);
document.querySelector('.testimonial-slider').addEventListener('focusout', startAuto);

if (!reduceMotion) {
  var testimonialObserver = new IntersectionObserver(function (entries) {
    entries.forEach(function (entry) {
      if (entry.isIntersecting) { startAuto(); } else { stopAuto(); }
    });
  }, { threshold: 0.3 });
  testimonialObserver.observe(document.getElementById('testimonialTrack'));
}

document.addEventListener('visibilitychange', function () {
  if (document.hidden) { stopAuto(); } else { startAuto(); }
});

Como startAuto() es idempotente (se niega a apilar un segundo intervalo) y el bloque reasigna los manejadores de ratón y toque, pegar esto después del script original es seguro. Si omites este bloque, el slider sigue funcionando; simplemente continúa rotando fuera de pantalla.

Opción 2: Slider de tarjetas con flechas

Un carrusel de testimonios en Carrd más interactivo, con flechas de navegación para control manual. Este es el slider de testimonios con flechas si eso es lo que buscabas. Además no necesita marcado de navegación por slide al añadir slides: el contador 1 / N se calcula a partir del número de slides.

html
<style>
  :root {
    --card-bg: #f8fafc;
    --card-text: #0f172a;
    --card-secondary: #64748b;
    --card-accent: #0ea5e9;
    --card-border: #e2e8f0;
    --card-shadow: rgba(0, 0, 0, 0.08);
  }

  .card-slider {
    max-width: 800px;
    margin: 40px auto;
    position: relative;
    padding: 0 50px;
  }

  .card-slider-container {
    overflow: hidden;
  }

  .card-slider-track {
    display: flex;
    transition: transform 0.4s ease;
  }

  .card-slide {
    min-width: 100%;
    padding: 20px;
    box-sizing: border-box;
  }

  .card-content {
    background: white;
    border-radius: 20px;
    padding: 40px;
    border: 1px solid var(--card-border);
    box-shadow: 0 4px 20px var(--card-shadow);
    text-align: left;
  }

  .card-stars {
    color: #fbbf24;
    font-size: 20px;
    margin-bottom: 20px;
  }

  .card-text {
    font-size: 18px;
    line-height: 1.8;
    color: var(--card-text);
    margin: 0 0 25px 0;
  }

  .card-divider {
    height: 1px;
    background: var(--card-border);
    margin: 25px 0;
  }

  .card-author {
    display: flex;
    align-items: center;
    gap: 15px;
  }

  .card-avatar {
    width: 55px;
    height: 55px;
    border-radius: 50%;
    object-fit: cover;
  }

  .card-name {
    font-size: 17px;
    font-weight: 600;
    color: var(--card-text);
    margin: 0;
  }

  .card-role {
    font-size: 14px;
    color: var(--card-secondary);
    margin: 3px 0 0 0;
  }

  .card-arrow {
    position: absolute;
    top: 50%;
    transform: translateY(-50%);
    width: 45px;
    height: 45px;
    background: white;
    border: 2px solid var(--card-border);
    border-radius: 50%;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 20px;
    color: var(--card-text);
    transition: all 0.2s;
    z-index: 10;
  }

  .card-arrow:hover {
    background: var(--card-accent);
    border-color: var(--card-accent);
    color: white;
  }

  .card-arrow-left {
    left: 0;
  }

  .card-arrow-right {
    right: 0;
  }

  .card-counter {
    text-align: center;
    margin-top: 20px;
    font-size: 14px;
    color: var(--card-secondary);
  }

  @media (max-width: 600px) {
    .card-slider {
      padding: 0 15px;
    }
    .card-arrow {
      width: 36px;
      height: 36px;
      font-size: 16px;
    }
    .card-arrow-left {
      left: -5px;
    }
    .card-arrow-right {
      right: -5px;
    }
    .card-content {
      padding: 30px 25px;
    }
    .card-text {
      font-size: 16px;
    }
  }
</style>

<div class="card-slider">
  <button class="card-arrow card-arrow-left" id="cardPrev" aria-label="Previous testimonial">←</button>
  <button class="card-arrow card-arrow-right" id="cardNext" aria-label="Next testimonial">→</button>
  
  <div class="card-slider-container">
    <div class="card-slider-track" id="cardTrack">
      
      <div class="card-slide">
        <div class="card-content">
          <div class="card-stars">★★★★★</div>
          <p class="card-text">"Absolutely fantastic experience from start to finish. The communication was excellent, the work was top-notch, and everything was delivered ahead of schedule. I couldn't be happier with the results."</p>
          <div class="card-divider"></div>
          <div class="card-author">
            <img src="https://i.pravatar.cc/120?img=11" alt="David Park" class="card-avatar">
            <div>
              <p class="card-name">David Park</p>
              <p class="card-role">Product Manager, Innovate Labs</p>
            </div>
          </div>
        </div>
      </div>

      <div class="card-slide">
        <div class="card-content">
          <div class="card-stars">★★★★★</div>
          <p class="card-text">"They transformed our outdated website into something modern and user-friendly. Our conversion rate increased by 40% within the first month. Worth every penny!"</p>
          <div class="card-divider"></div>
          <div class="card-author">
            <img src="https://i.pravatar.cc/120?img=9" alt="Lisa Thompson" class="card-avatar">
            <div>
              <p class="card-name">Lisa Thompson</p>
              <p class="card-role">Owner, Bloom Boutique</p>
            </div>
          </div>
        </div>
      </div>

      <div class="card-slide">
        <div class="card-content">
          <div class="card-stars">★★★★★</div>
          <p class="card-text">"Professional, creative, and incredibly easy to work with. They took our vague ideas and turned them into exactly what we needed. Already planning our next project together."</p>
          <div class="card-divider"></div>
          <div class="card-author">
            <img src="https://i.pravatar.cc/120?img=7" alt="James Wilson" class="card-avatar">
            <div>
              <p class="card-name">James Wilson</p>
              <p class="card-role">Founder, Wilson Consulting</p>
            </div>
          </div>
        </div>
      </div>

    </div>
  </div>
  
  <div class="card-counter" id="cardCounter">1 / 3</div>
</div>

<script>
  const cardTrack = document.getElementById('cardTrack');
  const cardPrev = document.getElementById('cardPrev');
  const cardNext = document.getElementById('cardNext');
  const cardCounter = document.getElementById('cardCounter');
  const cardSlides = cardTrack.querySelectorAll('.card-slide');
  let cardIndex = 0;

  function updateCardSlider() {
    cardTrack.style.transform = `translateX(-${cardIndex * 100}%)`;
    cardCounter.textContent = `${cardIndex + 1} / ${cardSlides.length}`;
  }

  cardPrev.addEventListener('click', () => {
    cardIndex = (cardIndex - 1 + cardSlides.length) % cardSlides.length;
    updateCardSlider();
  });

  cardNext.addEventListener('click', () => {
    cardIndex = (cardIndex + 1) % cardSlides.length;
    updateCardSlider();
  });

  // Auto-rotate every 6 seconds
  setInterval(() => {
    cardIndex = (cardIndex + 1) % cardSlides.length;
    updateCardSlider();
  }, 6000);
</script>

La velocidad del autoplay aquí es 6000 ms al final del script. Desactivar el autoplay funciona igual que en la Opción 1: borra o comenta ese bloque setInterval.

Opción 3: Cuadrícula de varios testimonios (sin slider)

Si prefieres mostrar todos los testimonios a la vez en escritorio (y en columna en móvil), esta cuadrícula de testimonios es la respuesta. Sin autoplay, sin JavaScript, cada cita presente en el DOM para visitantes y buscadores. También es la opción más accesible y el objetivo visual de lo que Columns más elementos Text aproximan en un plan gratuito.

html
<style>
  :root {
    --grid-bg: #fefce8;
    --grid-card-bg: #ffffff;
    --grid-text: #1c1917;
    --grid-secondary: #78716c;
    --grid-accent: #f59e0b;
  }

  .testimonial-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
    gap: 25px;
    max-width: 1000px;
    margin: 40px auto;
    padding: 0 20px;
  }

  .grid-card {
    background: var(--grid-card-bg);
    border-radius: 16px;
    padding: 30px;
    box-shadow: 0 4px 15px rgba(0,0,0,0.05);
    transition: transform 0.2s, box-shadow 0.2s;
    text-align: left;
  }

  .grid-card:hover {
    transform: translateY(-5px);
    box-shadow: 0 8px 25px rgba(0,0,0,0.1);
  }

  .grid-rating {
    display: flex;
    gap: 3px;
    margin-bottom: 15px;
  }

  .grid-star {
    width: 20px;
    height: 20px;
    fill: var(--grid-accent);
  }

  .grid-text {
    font-size: 15px;
    line-height: 1.7;
    color: var(--grid-text);
    margin: 0 0 20px 0;
  }

  .grid-author {
    display: flex;
    align-items: center;
    gap: 12px;
    padding-top: 15px;
    border-top: 1px solid #f3f4f6;
  }

  .grid-avatar {
    width: 45px;
    height: 45px;
    border-radius: 50%;
    object-fit: cover;
  }

  .grid-name {
    font-size: 15px;
    font-weight: 600;
    color: var(--grid-text);
    margin: 0;
  }

  .grid-role {
    font-size: 13px;
    color: var(--grid-secondary);
    margin: 2px 0 0 0;
  }

  @media (max-width: 600px) {
    .testimonial-grid {
      grid-template-columns: 1fr;
    }
  }
</style>

<div class="testimonial-grid">
  
  <div class="grid-card">
    <div class="grid-rating">
      <svg class="grid-star" viewBox="0 0 20 20"><path d="M10 15l-5.878 3.09 1.123-6.545L.489 6.91l6.572-.955L10 0l2.939 5.955 6.572.955-4.756 4.635 1.123 6.545z"/></svg>
      <svg class="grid-star" viewBox="0 0 20 20"><path d="M10 15l-5.878 3.09 1.123-6.545L.489 6.91l6.572-.955L10 0l2.939 5.955 6.572.955-4.756 4.635 1.123 6.545z"/></svg>
      <svg class="grid-star" viewBox="0 0 20 20"><path d="M10 15l-5.878 3.09 1.123-6.545L.489 6.91l6.572-.955L10 0l2.939 5.955 6.572.955-4.756 4.635 1.123 6.545z"/></svg>
      <svg class="grid-star" viewBox="0 0 20 20"><path d="M10 15l-5.878 3.09 1.123-6.545L.489 6.91l6.572-.955L10 0l2.939 5.955 6.572.955-4.756 4.635 1.123 6.545z"/></svg>
      <svg class="grid-star" viewBox="0 0 20 20"><path d="M10 15l-5.878 3.09 1.123-6.545L.489 6.91l6.572-.955L10 0l2.939 5.955 6.572.955-4.756 4.635 1.123 6.545z"/></svg>
    </div>
    <p class="grid-text">"Quick turnaround and excellent quality. Exactly what I was looking for. Will definitely work together again!"</p>
    <div class="grid-author">
      <img src="https://i.pravatar.cc/120?img=12" alt="Anna Lee" class="grid-avatar">
      <div>
        <p class="grid-name">Anna Lee</p>
        <p class="grid-role">Freelance Designer</p>
      </div>
    </div>
  </div>

  <div class="grid-card">
    <div class="grid-rating">
      <svg class="grid-star" viewBox="0 0 20 20"><path d="M10 15l-5.878 3.09 1.123-6.545L.489 6.91l6.572-.955L10 0l2.939 5.955 6.572.955-4.756 4.635 1.123 6.545z"/></svg>
      <svg class="grid-star" viewBox="0 0 20 20"><path d="M10 15l-5.878 3.09 1.123-6.545L.489 6.91l6.572-.955L10 0l2.939 5.955 6.572.955-4.756 4.635 1.123 6.545z"/></svg>
      <svg class="grid-star" viewBox="0 0 20 20"><path d="M10 15l-5.878 3.09 1.123-6.545L.489 6.91l6.572-.955L10 0l2.939 5.955 6.572.955-4.756 4.635 1.123 6.545z"/></svg>
      <svg class="grid-star" viewBox="0 0 20 20"><path d="M10 15l-5.878 3.09 1.123-6.545L.489 6.91l6.572-.955L10 0l2.939 5.955 6.572.955-4.756 4.635 1.123 6.545z"/></svg>
      <svg class="grid-star" viewBox="0 0 20 20"><path d="M10 15l-5.878 3.09 1.123-6.545L.489 6.91l6.572-.955L10 0l2.939 5.955 6.572.955-4.756 4.635 1.123 6.545z"/></svg>
    </div>
    <p class="grid-text">"They went above and beyond to make sure everything was perfect. Communication was smooth the entire time."</p>
    <div class="grid-author">
      <img src="https://i.pravatar.cc/120?img=15" alt="Tom Harris" class="grid-avatar">
      <div>
        <p class="grid-name">Tom Harris</p>
        <p class="grid-role">Startup Founder</p>
      </div>
    </div>
  </div>

  <div class="grid-card">
    <div class="grid-rating">
      <svg class="grid-star" viewBox="0 0 20 20"><path d="M10 15l-5.878 3.09 1.123-6.545L.489 6.91l6.572-.955L10 0l2.939 5.955 6.572.955-4.756 4.635 1.123 6.545z"/></svg>
      <svg class="grid-star" viewBox="0 0 20 20"><path d="M10 15l-5.878 3.09 1.123-6.545L.489 6.91l6.572-.955L10 0l2.939 5.955 6.572.955-4.756 4.635 1.123 6.545z"/></svg>
      <svg class="grid-star" viewBox="0 0 20 20"><path d="M10 15l-5.878 3.09 1.123-6.545L.489 6.91l6.572-.955L10 0l2.939 5.955 6.572.955-4.756 4.635 1.123 6.545z"/></svg>
      <svg class="grid-star" viewBox="0 0 20 20"><path d="M10 15l-5.878 3.09 1.123-6.545L.489 6.91l6.572-.955L10 0l2.939 5.955 6.572.955-4.756 4.635 1.123 6.545z"/></svg>
      <svg class="grid-star" viewBox="0 0 20 20"><path d="M10 15l-5.878 3.09 1.123-6.545L.489 6.91l6.572-.955L10 0l2.939 5.955 6.572.955-4.756 4.635 1.123 6.545z"/></svg>
    </div>
    <p class="grid-text">"Responsive and creative. They captured our brand voice perfectly. Our customers love the new design!"</p>
    <div class="grid-author">
      <img src="https://i.pravatar.cc/120?img=20" alt="Rachel Green" class="grid-avatar">
      <div>
        <p class="grid-name">Rachel Green</p>
        <p class="grid-role">Marketing Manager</p>
      </div>
    </div>
  </div>

</div>

Personalizar tu slider de testimonios

Añadir tus propios testimonios

Sustituye el contenido de ejemplo en cada slide:

  1. Cambia el contenido del párrafo por tu testimonio real.
  2. Actualiza el nombre por el de tu cliente.
  3. Cambia el cargo y la empresa.
  4. Sustituye la URL de la imagen por la foto de tu cliente (los servicios de marcador como pravatar.cc son solo para pruebas).

Mantén el atributo alt descriptivo. El nombre del cliente funciona bien. Los alt genéricos o vacíos fallan con los usuarios de lectores de pantalla y desperdician una victoria fácil de accesibilidad.

Añadir más slides

Copia un bloque de slide completo y pégalo tras el último slide. El slider se adapta a cualquier número de slides porque el track, el autoplay y la lógica de deslizamiento cuentan los elementos slide en tiempo de ejecución. Pero en la Opción 1 también debes añadir un botón de punto correspondiente por cada slide nuevo. Los puntos están fijados en el código, así que un cuarto slide sin un cuarto botón no se puede alcanzar haciendo clic (el deslizamiento y el autoplay sí lo mostrarán). La Opción 2 no necesita nada extra: su contador 1 / N se calcula a partir del número de slides.

html
<!-- Add inside .testimonial-dots when you add a 4th slide -->
<button class="testimonial-dot" onclick="goToSlide(3)" aria-label="Go to testimonial 4"></button>

Anatomía del slider de testimonios para copiar y pegar: el contenedor envuelve el track con un bloque de slide por testimonio, más una fila de puntos con un botón por slide, con indicaciones sobre dónde añadir slides y puntos

Cambiar la velocidad del autoplay

Busca las llamadas a setInterval y cambia el número (en milisegundos):

  • 5000 = 5 segundos
  • 7000 = 7 segundos
  • 3000 = 3 segundos

La Opción 1 repite 5000 en cada lugar que reinicia el temporizador (el inicio inicial, al salir el ratón, al terminar el deslizamiento y los bloques opcionales de accesibilidad y del botón). Cámbialos todos al mismo valor. La Opción 2 usa 6000 al final de su script. El mismo cambio.

Desactivar el autoplay

Elimina o comenta el bloque setInterval si quieres navegación solo manual. En la Opción 1 los manejadores de salida del ratón y de deslizamiento también llaman a setInterval, así que quita esas líneas también. Si pegaste la mejora de accesibilidad en la Opción 1, cambia var rotationStopped = false; por var rotationStopped = true; en su lugar. Eso bloquea todas las vías de reinicio.

Personalizar los colores

Cada snippet trae sus colores en :root. Eso funciona con un embed. Con dos embeds en una página, las custom properties de :root son globales, así que dos widgets que redefinen --testimonial-accent se pisan entre sí. En su lugar, acota las variables al contenedor del widget:

css
.testimonial-slider {
  --testimonial-bg: #ffffff;
  --testimonial-text: #1f2937;
  --testimonial-secondary: #6b7280;
  --testimonial-accent: #4f46e5;
  --testimonial-quote: #e5e7eb;
  --testimonial-radius: 16px;
  --testimonial-max-width: 700px;
}

La misma idea para los otros dos snippets: mueve las variables a .card-slider o .testimonial-grid. Mantén los nombres de las variables y el resto del CSS sin cambios.

Solución de problemas de tu slider de testimonios en Carrd

Problema más común: no se renderiza nada en el editor

Los embeds no producen nada en el editor de Carrd. Empieza por el primer punto de abajo antes de depurar cualquier otra cosa.

El slider no aparece en el editor ni en el sitio en vivo

Síntoma. Pegaste el código y ves un hueco en blanco.

Causa. El builder nunca renderiza el código de los embeds. Si la página en vivo también está en blanco, aún no has publicado, o el Style del embed está en Hidden sin contenido de ubicación.

Solución. Haz clic en Publish Changes, abre la URL en vivo y fuerza la recarga. Confirma que Type es Code y Style es Inline. Resultado esperado: el slider aparece en la posición del embed dentro del orden de la sección. Texto de código en bruto en la página significa que Type está en algo distinto de Code.

Dos sliders (o un slider + otro Embed) entran en conflicto

Síntoma. Hacer clic en un punto mueve el slider equivocado, o la consola del navegador se queja de IDs duplicados o de goToSlide.

Causa. Los snippets fijan IDs (testimonialTrack, cardTrack) y la función global goToSlide. Pegar el mismo snippet dos veces choca.

Solución. Renombra IDs, clases y funciones en cada instancia. Para un segundo slider usa testimonialTrack2, goToSlide2, y así sucesivamente. Mantén coherentes todos los renombrados en HTML y JS, incluidos los atributos onclick de los puntos.

El slider es más ancho que su sección

Síntoma. El slider desborda su columna o ignora el padding de tu sección.

Causa. El max-width: 700px u 800px fijo asume una sección a todo lo ancho.

Solución. Baja --testimonial-max-width (Opción 1) o el max-width de .card-slider y .testimonial-grid, o mueve el embed a una sección a todo lo ancho. Las media queries para móvil ya reducen el padding por debajo de 600 px.

Variables de tema que se filtran entre embeds

Síntoma. Dos embeds se cambian los colores entre sí, y gana el último que se carga.

Causa. Las custom properties declaradas en :root son globales a la página.

Solución. Acótalas al contenedor del widget. Consulta Personalizar los colores en la sección de personalización de arriba.

El autoplay sigue ejecutándose fuera de pantalla o en pestañas en segundo plano

Síntoma. El intervalo sigue disparándose mientras el slider está fuera de la vista o la pestaña está oculta. Ciclos desperdiciados, y molesta a los usuarios de lectores de pantalla.

Causa. setInterval se ejecuta incondicionalmente.

Solución. Usa la mejora de accesibilidad de la Opción 1. Condiciona la rotación a IntersectionObserver, matchMedia('(prefers-reduced-motion: reduce)'), el foco del teclado y visibilitychange. Si solo quieres la parte de pestañas en segundo plano, este es el parche mínimo para la Opción 1 (pégalo al final de su script):

js
document.addEventListener('visibilitychange', function () {
  clearInterval(slideInterval);
  slideInterval = null;
  if (!document.hidden) {
    slideInterval = setInterval(nextSlide, 5000);
  }
});

Las imágenes de avatar fallan o generan avisos de privacidad

Síntoma. Los avatares devuelven 404, o tu herramienta de consentimiento marca una petición a terceros al cargar la página.

Causa. i.pravatar.cc es un servicio de terceros en producción. Vale para pruebas. En una página publicada es una petición externa que se dispara a cada visitante, lo que da mala imagen en materia de GDPR para audiencias de la UE y supone un punto único de fallo más.

Solución. Aloja tú las fotos de los clientes: súbelas como recursos de imagen de Carrd o apunta el src de img a tus propias URLs de medios. Mantén el texto alt descriptivo en cualquier caso. Si tu sitio publicado hace peticiones a terceros, añade un aviso de cookies para Carrd para que la información coincida con el comportamiento real.

Accesibilidad: haz que el carrusel sea apto para lectores de pantalla

De fábrica, estos sliders solo se pausan al pasar el ratón. El patrón de carrusel de las ARIA Authoring Practices del W3C exige más a cualquier carrusel con rotación automática. La versión corta:

  • Pausar la rotación al pasar el ratón y cuando el foco del teclado entra en el carrusel
  • Ofrecer un control visible para detener y reanudar la rotación
  • Etiquetar cada botón de punto para que nombre el slide que abre
  • Marcar el contenedor como carrusel con una etiqueta en lenguaje claro
  • Omitir por completo la rotación automática para usuarios con prefers-reduced-motion

El bloque de autoplay accesible de la Opción 1 cubre la pausa por foco, la omisión por reduced-motion y la pausa fuera de pantalla. Para la parte del marcado, añade estos atributos al contenedor y al track de la Opción 1:

html
<div class="testimonial-slider" aria-roledescription="carousel" aria-label="Customer testimonials">
  <div class="testimonial-container">
    <div class="testimonial-track" id="testimonialTrack" aria-live="off">

El aria-live="off" del track es deliberado. Mientras la rotación está activa, anunciar cada cambio es ruido. Si desactivas el autoplay por completo, cámbialo a aria-live="polite" para que la navegación manual sí se anuncie.

Etiqueta cada botón de punto según su destino, por ejemplo aria-label="Go to testimonial 4".

Para el control de parada e inicio, coloca un botón dentro de .testimonial-slider, justo encima de los puntos. Se apoya en el bloque de autoplay accesible, así que pega ese bloque primero. El botón cambia rotationStopped, lo que impide que el hover, el foco, el deslizamiento y el scroll reinicien la rotación después de que un visitante la detenga. El CSS de Carrd resetea los estilos de los botones, así que el snippet le da al botón su propio aspecto:

html
<style>
  .testimonial-toggle {
    display: block;
    margin: 20px auto 0;
    padding: 6px 14px;
    border: 1px solid var(--testimonial-secondary);
    border-radius: 6px;
    background: transparent;
    color: var(--testimonial-secondary);
    font-size: 14px;
    cursor: pointer;
  }
</style>
<button class="testimonial-toggle" onclick="toggleAutoplay()" aria-label="Stop auto-rotating testimonials">Stop rotation</button>
js
// Paste after the accessible autoplay block, inside the same <script>
var testimonialToggle = document.querySelector('.testimonial-toggle');

function toggleAutoplay() {
  rotationStopped = !rotationStopped;
  if (rotationStopped) {
    stopAuto();
    testimonialToggle.textContent = 'Start rotation';
    testimonialToggle.setAttribute('aria-label', 'Start auto-rotating testimonials');
  } else {
    startAuto();
    testimonialToggle.textContent = 'Stop rotation';
    testimonialToggle.setAttribute('aria-label', 'Stop auto-rotating testimonials');
  }
}

Estas adiciones usan APIs estándar del navegador (IntersectionObserver, matchMedia, addEventListener). No se han probado contra una combinación concreta de temas de Carrd, así que verifica en tu sitio publicado.

Verifica: publica, abre la página en vivo y pulsa Tab hasta que el foco llegue al slider. La rotación debería detenerse. Pulsa el botón de parada y la rotación debería quedar detenida. Activa «reducir movimiento» en los ajustes de tu SO y recarga: nada debería rotar solo. Si está roto se ve así: la rotación continúa mientras un botón de punto tiene el foco, o no hay forma de detener el carrusel sin salir de la página.

Alternativas sin código: widgets de testimonios para Carrd

No todo el mundo quiere editar HTML a mano. Aquí va la comparación honesta, respondiendo a la pregunta de «cómo añadir testimonios a Carrd» sin código personalizado.

Senja

Senja (constructor de widgets gratuito). Crea el widget en el Studio de Senja, copia el código de embed, pégalo en el mismo elemento Embed de Carrd y publica. El valor real es el formulario de recolección: las citas aprobadas se sincronizan al widget automáticamente, así que nunca editas el embed para añadir una reseña. Senja documenta el flujo en su guía de configuración para Carrd (sus docs afirman que el embed funciona en Carrd Pro; página modificada por última vez el 2026-01-19). Comprueba los límites actuales de su nivel gratuito antes de comprometerte.

Elige Senja cuando los testimonios llegan continuamente y quieres cero edición de embeds.

Common Ninja

Common Ninja (widget freemium). Un slider de testimonios alojado con efectos de arrastre y vista previa que esta versión hecha a mano ni intenta. El mismo flujo: genera el widget, pégalo en un Embed de Carrd y publica. Lo explican en su guía para Carrd y en un vídeo de YouTube. Los niveles de pago desbloquean más slides y funciones.

Elige Common Ninja cuando quieras esos efectos de movimiento sin escribir CSS.

Código a mano (esta guía)

Hecho a mano. Gratis para siempre, sin JavaScript de terceros, sin peticiones externas más allá de tus propias imágenes de avatar, y control total del marcado y el CSS. El coste es el mantenimiento: la advertencia de los puntos, el tematizado y el trabajo de accesibilidad son tuyos.

Elige esta opción cuando quieras cero dependencia de terceros y un slider que puedas editar en cualquier editor de texto.

Una cosa aplica a las tres: ambas rutas de widgets siguen requiriendo el mismo embed de Pro Standard. Nada escapa al filtro del plan. También existen otras plantillas para copiar y pegar por ahí. Los tres diseños de aquí vienen con la solución de problemas y el trabajo de accesibilidad ya explicados.

Consejos para mejores testimonios

Usa fotos reales. Las fotos de stock parecen falsas. Pide a los clientes retratos o usa sus fotos de LinkedIn con permiso.

Mantén las citas cortas. Los testimonios largos pierden atención. Redúcelos a las 2-3 frases más potentes.

Incluye datos concretos. «¡Gran trabajo!» se olvida. «Aumentaron nuestra tasa de conversión un 40 %» se recuerda.

Diversifica tus testimonios. Muestra distintos tipos de clientes y los diferentes beneficios que recibieron.

Mantén un documento fuente de verdad. Una simple tabla con citas aprobadas, nombres, cargos y URLs de fotos convierte una actualización del embed en un trabajo de dos minutos en lugar de una excavación arqueológica. El formulario de recolección de Senja resuelve el mismo problema con software si se te queda pequeña una hoja de cálculo.

La prueba social funciona mejor con un siguiente paso fácil. En sitios de servicios, combina el slider con un botón de chat de WhatsApp para que los visitantes convencidos puedan escribirte de inmediato.

Prueba Carrd.co

Conclusión

Un slider de testimonios en Carrd te da prueba social sin comerse media página. Elige uno de los tres diseños para copiar y pegar, sustituye citas y fotos reales, publica y verifica en la URL en vivo. Los snippets no tienen dependencias, así que actualizaciones ajenas del builder de Carrd no los romperán.

Combina esto con una tabla de precios y un acordeón de FAQ para una página de servicios completa. ¿Prefieres widgets ya hechos? Descarga el plugin de acordeón de Carrd o el widget de pestañas de Carrd de carrdme. Más diseños con código personalizado: un temporizador de cuenta regresiva en Carrd con diseños para copiar y pegar, un encabezado fijo con CSS y una barra de navegación responsive. Si aún estás eligiendo el propio builder, empieza por cómo crear una web de una página con poco presupuesto.

Novedades en Carrd desde que se publicó esto:

  • El builder ganó un Elements Panel el 2026-08-07 (More Actions, luego Elements) que lista todos los elementos en páginas largas. Útil cuando el embed de testimonios es uno más entre muchos.
  • Cloudflare y PostHog Web Analytics llegaron el 2026-04-27 y el 2026-04-28 para Pro Standard y superior. Vale la pena conectarlos si quieres medir si el slider realmente levanta las conversiones en lugar de adivinarlo.
  • Un control Framing llegó el 2026-08-23 solo para Pro Plus. Decide cuándo otros sitios pueden insertar el tuyo en un iframe. Nada que hacer para el slider; se lista para que el changelog no sea un misterio.
Crea tu slider en Carrd
#Carrd#Testimonials#Web Design

Artículos relacionados