Utilizando Javascript para construir un deslizador de contenido personalizado para testimonials

2 de junio de 2023 · Updated 14 de julio de 2026 · Reviewed by Jermaine Harris

Construir un slider de contenido personalizado para testimonios usando JavaScript te da control completo sobre el diseño, el comportamiento y el rendimiento. A diferencia de los plugins preconstruidos, un slider codificado a mano se integra perfectamente con cualquier CMS, incluyendo Directus, y puede ser adaptado para que coincida con las especificaciones exactas de tu marca.Este artículo camina a través de la creación de un deslizador de valoración desde cero, cubriendo los controles de navegación de la lógica

Planificación de la estructura HTML

Un deslizador testimonial consiste en un contenedor y diapositivas individuales. Cada diapositiva contiene la cotización, el nombre del cliente, y metadatos opcionales como un título o logotipo de la empresa.

<div id="testimonial-slider" class="slider">
 <div class="slide active">
 <blockquote>
 <p>“Great service that delivered exactly what we needed.”</p>
 <footer>— Jane Doe, CEO of Example Inc.</footer>
 </blockquote>
 </div>
 <div class="slide">
 <blockquote>
 <p>“Their team was responsive and professional from start to finish.”</p>
 <footer>— John Smith, Founder of Acme Corp.</footer>
 </blockquote>
 </div>
 <div class="slide">
 <blockquote>
 <p>“We saw a measurable improvement in user engagement after the redesign.”</p>
 <footer>— Emily Chen, CTO of WebTech</footer>
 </blockquote>
 </div>
</div>

Cada diapositiva envuelve un elemento para la corrección semántica y una mejor accesibilidad. La clase determina qué diapositiva es visible actualmente. Esta estructura puede ser codificada con dificultad o, mejor, generada dinámicamente a partir de datos obtenidos a través de JavaScript.

Estilizar el deslizador con CSS

CSS limpio y moderno garantiza que el deslizador se ve pulido y realiza bien. Uso en el contenedor y control de la visibilidad de la diapositiva con opacidad y transiciones.

.slider {
 position: relative;
 width: 100%;
 max-width: 800px;
 margin: 0 auto;
 overflow: hidden;
 border-radius: 12px;
 box-shadow: 0 4px 12px rgba(0,0,0,0.1);
}

.slide {
 display: none;
 padding: 2rem;
 background: #f9f9f9;
 transition: opacity 0.5s ease-in-out;
}

.slide.active {
 display: block;
}

blockquote {
 margin: 0;
 padding: 0;
 font-style: italic;
 line-height: 1.6;
}

blockquote footer {
 margin-top: 0.75rem;
 font-style: normal;
 font-weight: 600;
 color: #333;
}

.slider-nav {
 display: flex;
 justify-content: center;
 gap: 0.5rem;
 margin-top: 1rem;
}

.slider-nav button {
 width: 12px;
 height: 12px;
 border-radius: 50%;
 border: 2px solid #007acc;
 background: transparent;
 cursor: pointer;
 transition: background 0.3s;
}

.slider-nav button.active-dot {
 background: #007acc;
}

Utilizar con una palanca de clase es simple pero carece de transiciones suaves entre diapositivas. Para un deslizador de producción, considere utilizar transformaciones CSS o posicionamiento absoluto para lograr animaciones cruzadas o deslizantes. El enfoque anterior funciona bien para una configuración mínima.

Función básica de JavaScript

El motor JavaScript gestiona el ciclismo de diapositivas, la navegación de puntos y la interacción de los usuarios. Comience seleccionando las diapositivas e inicializando un índice.

const slides = document.querySelectorAll('.slide');
const dots = document.querySelectorAll('.slider-nav button');
let currentIndex = 0;
let intervalId;

function showSlide(index) {
 slides.forEach((slide, i) => {
 slide.classList.toggle('active', i === index);
 });
 dots.forEach((dot, i) => {
 dot.classList.toggle('active-dot', i === index);
 });
 currentIndex = index;
}

function nextSlide() {
 const next = (currentIndex + 1) % slides.length;
 showSlide(next);
}

function startAutoPlay(interval = 5000) {
 intervalId = setInterval(nextSlide, interval);
}

function stopAutoPlay() {
 clearInterval(intervalId);
}

// Dot click handler
dots.forEach((dot, index) => {
 dot.addEventListener('click', () => {
 stopAutoPlay();
 showSlide(index);
 startAutoPlay(4000); // restart with shorter delay after manual interaction
 });
});

// Initialize
showSlide(0);
startAutoPlay(5000);

Este código proporciona rotación automática y navegación interactiva de puntos. Para una mayor usabilidad, detenga el juego automático cuando el usuario se agita sobre el deslizador o interactúa con los puntos.

Agregar anterior / Siguiente Botones

Muchos usuarios esperan que los controles de flecha busquen manualmente testimonios. Agregue dos botones dentro o fuera del contenedor.

<button class="prev" aria-label="Previous testimonial">❮</button>
<button class="next" aria-label="Next testimonial">❯</button>

.prev, .next {
 position: absolute;
 top: 50%;
 transform: translateY(-50%);
 background: rgba(0,0,0,0.5);
 color: white;
 border: none;
 padding: 0.75rem;
 cursor: pointer;
 z-index: 10;
}

.prev { left: 0; border-radius: 0 4px 4px 0; }
.next { right: 0; border-radius: 4px 0 0 4px; }

document.querySelector('.prev').addEventListener('click', () => {
 const prev = (currentIndex - 1 + slides.length) % slides.length;
 showSlide(prev);
});

document.querySelector('.next').addEventListener('click', nextSlide);

Pruebas de captura de Directus

En un CMS sin cabeza como Directus, los datos testimoniales se almacenan en una colección (por ejemplo, ]) con campos para , , , y opcionalmente una imagen. Utilizando el SDK JavaScript Directus o la llanura , recupera y renderiza los datos dinámicamente.

async function fetchTestimonials() {
 try {
 const response = await fetch('https://your-project.directus.app/items/Testimonials');
 if (!response.ok) throw new Error('Network response was not ok');
 const data = await response.json();
 return data.data;
 } catch (error) {
 console.error('Failed to fetch testimonials:', error);
 return [];
 }
}

async function renderSlider() {
 const testimonials = await fetchTestimonials();
 const sliderContainer = document.getElementById('testimonial-slider');
 const navContainer = document.querySelector('.slider-nav');

 // Clear existing content
 sliderContainer.innerHTML = '';
 navContainer.innerHTML = '';

 testimonials.forEach((item, index) => {
 const slide = document.createElement('div');
 slide.className = `slide${index === 0 ? ' active' : ''}`;
 slide.innerHTML = `
 <blockquote>
 <p>“${item.quote}”</p>
 <footer>— ${item.client_name}${item.client_title ? `, ${item.client_title}` : ''}</footer>
 </blockquote>
 `;
 sliderContainer.appendChild(slide);

 const dot = document.createElement('button');
 dot.className = index === 0 ? 'active-dot' : '';
 dot.setAttribute('aria-label', `Go to testimonial ${index + 1}`);
 dot.addEventListener('click', () => {
 stopAutoPlay();
 showSlide(index);
 startAutoPlay(4000);
 });
 navContainer.appendChild(dot);
 });

 // Re‑initialize variables and start
 slides = document.querySelectorAll('.slide');
 dots = document.querySelectorAll('.slider-nav button');
 showSlide(0);
 startAutoPlay();
}

Este enfoque mantiene sus testimonios centralizados en Directus y actualiza el slider automáticamente cada vez que el contenido cambia. Para un mejor rendimiento, considere la caché de la respuesta de la API o el uso del SDK Directus con parámetros de consulta para filtrar o clasificar los testimonios.

Consideraciones de accesibilidad

Un deslizador integrador garantiza que todos los usuarios puedan interactuar con sus testimonios.

Configuración en el contenedor deslizante y (con retroceso para los lectores de pantalla).
Añadiendo a los botones de control (por ejemplo, "Siguiente testimonial", "Evidencia previa").
Usando sobre diapositivas no visibles.
Pausando el juego automático en el enfoque o el audífono, y proporcionando un botón de juego/pausa.
Asegurar la navegación del teclado: las teclas de flecha se mueven entre las diapositivas, y el foco de pestaña se gestiona dentro del widget.

Para una inmersión profunda, consulte los tutoriales de accesibilidad web deWAI en Carousels.

Soporte de diseño y tacto responsable

Los deslizadores de prueba deben trabajar a través de dispositivos móviles, tabletas y escritorios. Utilice unidades relativas y consultas de medios para ajustar el relleno, tamaño de fuente y diseño de navegación.

@media (max-width: 600px) {
 .slide {
 padding: 1.25rem;
 }
 blockquote {
 font-size: 0.95rem;
 }
 .slider-nav button {
 width: 10px;
 height: 10px;
 }
}

Para el apoyo táctil, implemente un mecanismo de giro usando y oyentes de eventos. Rastrea el delta y activa o basado en la dirección de giro.

let touchStartX = 0;
let touchEndX = 0;

sliderContainer.addEventListener('touchstart', (e) => {
 touchStartX = e.changedTouches[0].screenX;
});

sliderContainer.addEventListener('touchend', (e) => {
 touchEndX = e.changedTouches[0].screenX;
 handleSwipe();
});

function handleSwipe() {
 const diff = touchStartX - touchEndX;
 if (Math.abs(diff) > 50) {
 if (diff > 0) nextSlide();
 else {
 const prev = (currentIndex - 1 + slides.length) % slides.length;
 showSlide(prev);
 }
 }
}

Optimización del rendimiento

Para asegurar una experiencia de usuario fluida, siga estas directrices:

Carga perezosa cualquier imagen (por ejemplo, las imágenes de los clientes) usando .
Limite el número de manipulaciones DOM. Al reconstruir el slider de datos de API, utilice un fragmento de documento para insertar diapositivas.
Empuje o desbounce redimensiona los manipuladores del evento para evitar el corte de tracción.
Minimizar las dependencias de JavaScript – el slider no requiere ninguna biblioteca jQuery o pesada.
Use para animaciones suaves si utiliza transiciones CSS.

Para una mirada detallada a la optimización de renderización del navegador, vea la Guía de Google Web Fundamentals en renderización.

Integrando con un proceso de construcción

Al utilizar Directus como un CMS sin cabeza, su código de deslizamiento puede ser parte de un proyecto de front-end más grande construido con un paqueter como Webpack, Vite o Parcel. Mantenga su JavaScript y CSS en archivos separados e importarlos en su aplicación principal. Para un sitio estático o tema de WordPress, puede inlinear el código directamente después de la llamada API.

Si está utilizando el Directus JavaScript SDK, la autenticación y el manejo de errores se vuelven más simples:

import { createDirectus, rest, readItems } from '@directus/sdk';

const client = createDirectus('https://your-project.directus.app').with(rest());

async function getTestimonials() {
 const testimonials = await client.request(readItems('Testimonials', {
 sort: ['sort'],
 limit: 10
 }));
 return testimonials;
}

Este enfoque también le da seguridad de tipo si utiliza TipoScript.

Probando su deslizante

Después del desarrollo, prueba a través de múltiples navegadores (Chrome, Firefox, Safari, Edge) y dispositivos. Verifica que los controles de teclado funcionan, que autoplay pausa en el audífono, y que el deslizador se desploma con gracia cuando JavaScript está deshabilitado. Utilice DevTools del navegador para simular velocidades de red lentas y confirmar que los testimonios se cargan progresivamente.

Las pruebas automatizadas se pueden agregar con herramientas como Cypress o Playwright para asegurar que las interacciones sigan siendo fiables a medida que evoluciona la base de código.

Conclusión

Construir un deslizador testimonial personalizado con JavaScript le da la libertad de diseñar un componente único, accesible y performant que se integra nativamente con Directus. Si estructura el HTML semánticamente, estilizándose con CSS limpio, implementando JavaScript robusto y obteniendo datos en vivo desde Directus, creas una característica dinámica que construye confianza con tu audiencia. Las técnicas aquí cubiertas – navegación de puntos, controles de flecha, soporte táctil, accesibilidad y rendimiento –