Construir uma barra de conteúdo personalizada para depoimentos usando JavaScript lhe dá controle total sobre o design, comportamento e desempenho. Ao contrário de plugins pré-construídos, uma barra de conteúdo com código manual integra-se perfeitamente com qualquer CMS, incluindo Directus, e pode ser adaptada para corresponder às especificações exatas da sua marca. Este artigo caminha através da criação de uma barra de teste pronta para produção do zero, cobrindo o esqueleto HTML, transições CSS, lógica JavaScript, controles de navegação, considerações responsivas, acessibilidade e – crucialmente – como obter dados de testemunho ao vivo da Directus através da sua API REST.

Planeando a Estrutura HTML

Uma barra de teste consiste em um recipiente e slides individuais. Cada slide contém a citação, o nome do cliente e metadados opcionais, como um título ou logotipo da 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 slide envolve um elemento para correção semântica e melhor acessibilidade. A classe determina qual slide está atualmente visível. Esta estrutura pode ser codificada ou, melhor, gerada dinamicamente a partir de dados obtidos via JavaScript.

Estilhar o Slider com CSS

CSS limpo e moderno garante que a barra parece polida e funciona bem. Use no recipiente e controle a visibilidade do slide com opacidade e transições.

.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;
}

Usar com uma opção de classe é simples, mas não tem transições suaves entre slides. Para uma barra deslizante de produção, considere usar transformadas CSS ou posicionamento absoluto para alcançar animações de deslize ou deslize. A abordagem acima funciona bem para uma configuração mínima.

Funcionalidade do JavaScript Principal

O motor JavaScript gerencia o ciclismo de slides, navegação de pontos e interação do usuário. Comece selecionando os slides e inicializando um í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 fornece rotação automática e navegação interativa de pontos. Para uma usabilidade melhorada, pare o jogo automático quando o usuário passar sobre a barra deslizante ou interaja com os pontos.

Adicionando botões anteriores / próximos

Muitos usuários esperam que os controles de setas naveguem manualmente em depoimentos. Adicione dois botões dentro ou fora do recipiente.

<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);

Obtendo depoimentos do Directus

Em um CMS sem cabeça como Directus, os dados de testemunho são armazenados em uma coleção (por exemplo, ]) com campos para , , , e opcionalmente uma imagem. Usando o Directus JavaScript SDK ou simples , recuperar e renderizar os dados dinamicamente.

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();
}

Esta abordagem mantém os seus depoimentos centralizados no Directus e actualiza a barra automaticamente sempre que o conteúdo muda. Para melhor desempenho, considere o cache da resposta API ou usar o Directus SDK com parâmetros de consulta para filtrar ou ordenar depoimentos.

Considerações sobre Acessibilidade

Uma barra deslizante inclusiva garante que todos os usuários possam interagir com seus depoimentos. As práticas principais incluem:

  • Configuração no recipiente de controle deslizante e (com recuo para leitores de tela).
  • Adicionando aos botões de comando (por exemplo, “Próximo testemunho”, “Extrateste”).
  • Usando em slides não-visíveis.
  • Pausando autoplay no foco ou pairar, e fornecendo um botão de reprodução / pausa.
  • Garantir a navegação do teclado: as teclas de seta movem-se entre os slides e o foco da aba é gerenciado dentro do widget.

Para um mergulho profundo, consulte o WAI Web Acessibilidade Tutoriais em Carrossels.

Suporte ao Toque do & para Desenho Responsivo

Os controles deslizantes de testemunho devem funcionar em dispositivos móveis, tablets e desktops. Use unidades relativas e consultas de mídia para ajustar o preenchimento, tamanho da fonte e layout de navegação.

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

Para suporte ao toque, implemente um mecanismo de deslize usando e ouvintes de eventos. Acompanhe o delta e gatilho ou ] baseado na direção do deslize.

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);
 }
 }
}

Otimização de desempenho

Para garantir uma experiência suave do usuário, siga estas diretrizes:

  • Carregar preguiçosas quaisquer imagens (por exemplo, fotografias de cabeça de cliente) utilizando .
  • Limitar o número de manipulações DOM. Ao reconstruir a barra de dados da API, use um fragmento de documento para inserir slides em lote.
  • Acelerar ou desbound redimensionar manipuladores de eventos para evitar thrashing layout.
  • Minimize dependências JavaScript – o controle deslizante não requer jQuery ou bibliotecas pesadas.
  • Use para animações suaves se usar transições CSS.

Para uma análise aprofundada da otimização de renderização de navegadores, consulte o guia Google Web Fundaments sobre renderização.

Integrando-se com um processo de compilação

Ao usar o Directus como um CMS sem cabeça, o seu código deslizante pode fazer parte de um projeto de front-end maior construído com um empacotador como o Webpack, Vite ou Parcel. Mantenha o JavaScript e CSS em arquivos separados e importe-os para o seu aplicativo principal. Para um site estático ou tema WordPress, você pode inserir o código diretamente após a chamada API.

Se você estiver usando o Directus JavaScript SDK, autenticação e manipulação de erros se tornam mais 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;
}

Esta abordagem também lhe dá segurança de tipo se usar TypeScript.

Testando sua barra deslizante

Após o desenvolvimento, teste em vários navegadores (Chrome, Firefox, Safari, Edge) e dispositivos. Verifique se os controles de teclado funcionam, que automaticamente tocam pausas no hover, e que a barra cai graciosamente quando o JavaScript está desativado. Use DevTools do navegador para simular velocidades de rede lentas e confirmar que os depoimentos carregam progressivamente.

Testes automatizados podem ser adicionados com ferramentas como Cypress ou Playwright para garantir que as interações permaneçam confiáveis à medida que a base de códigos evolui.

Conclusão

Construir um controle deslizante de testemunho personalizado com o JavaScript lhe dá a liberdade de projetar um componente exclusivo, acessível e performante que se integra nativamente ao Directus. Ao estruturar o HTML semântica, estilizar com CSS limpo, implementar JavaScript robusto e buscar dados ao vivo do Directus, você cria uma funcionalidade dinâmica que constrói confiança com seu público. As técnicas aqui abordadas – navegação de pontos, controles de setas, suporte ao toque, acessibilidade e desempenho – formam a base para qualquer carrossel de conteúdo que você possa precisar no futuro.