Costruire un cursore di contenuti personalizzato per le recensioni utilizzando JavaScript ti dà il pieno controllo su design, comportamento e prestazioni.A differenza dei plugin pre-costruiti, un cursore codificato a mano si integra perfettamente con qualsiasi API CMS, tra cui Directus, e può essere adattato per soddisfare le specifiche esatte del tuo marchio.Questo articolo passa attraverso la creazione di un tester di valutazione di produzione-ready da zero, coprendo lo scheletro HTML, transizioni CSS, logica JavaScript, controlli di navigazione, controlli, controlli di navigazione, controlli, controlli, controlli di navigazione, accessibilità dati di navigazione

Pianificare la struttura HTML

Ogni slider contiene il preventivo, il nome del cliente e i metadati facoltativi come un titolo o un logo aziendale.

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

Ogni diapositiva avvolge un elemento ] per la correttezza semantica e una migliore accessibilità. La classe [[] determina quale diapositiva è attualmente visibile. Questa struttura può essere codificata duramente o, meglio, generata dinamicamente dai dati raccolti tramite JavaScript.

Styling lo slider con CSS

Pulito, CSS moderno assicura che il cursore sembra lucidato e si esibisce bene. Usa sul contenitore e controllo della visibilità dello scorrevole con opacità e transizioni.

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

L'utilizzo di un dispositivo di scorrimento di classe è semplice ma non ha transizioni lisce tra le diapositive. Per un cursore di produzione, si consideri l'utilizzo di trasformazioni CSS o il posizionamento assoluto per ottenere animazioni crossfade o slide. L'approccio di cui sopra funziona bene per una configurazione minima.

Funzione principale JavaScript

Il motore JavaScript gestisce il ciclismo, la navigazione a punti e l'interazione dell'utente. Inizia selezionando le diapositive e inizializzando un indice.

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

Questo codice fornisce la rotazione automatica e la navigazione interattiva del punto. Per una maggiore usabilità, si interroghi automaticamente quando l'utente si sposta sopra il cursore o interagisce con i punti.

Aggiungere precedente / Successivo pulsanti

Molti utenti si aspettano che i controlli delle frecce sfogliano manualmente le testimonianze.

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

Testimonianze di chiusura di Directus

In un CMS senza testa come Directus, i dati testimoniali vengono memorizzati in una raccolta (ad esempio, []) con campi per , , [, e facoltativamente un'immagine.

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

Questo approccio mantiene le vostre recensioni centralizzate in Directus e aggiorna automaticamente il cursore ogni volta che il contenuto cambia.Per una migliore prestazione, prendere in considerazione la risposta API o utilizzare il Directus SDK con parametri di query per filtrare o ordinare le testimonianze.

Considerazioni di accessibilità

Un slider inclusivo assicura che tutti gli utenti possano interagire con le tue recensioni.

  • Impostazione sul contenitore del cursore e (con il fallback per i lettori dello schermo).
  • Aggiungendo ai pulsanti di controllo (ad esempio, “Next testimonial”, “Previous testimonial”).
  • Usando su diapositive non visibili.
  • Ripassare autoplay su fuoco o hover, e fornire un pulsante play/pause.
  • Assicurare la navigazione della tastiera: i tasti freccia si muovono tra le diapositive, e la messa a fuoco della scheda è gestita all'interno del widget.

Per un'immersione profonda, fare riferimento al ]WAI Web Accessibility Tutorials on Carousels[].

Supporto per il design e il tocco

I cursori testimoniali devono lavorare su dispositivi mobili, tablet e desktop. Utilizzare unità e query multimediali relative per regolare l'imbottitura, la dimensione del carattere e il layout di navigazione.

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

Per il supporto al tatto, implementare un meccanismo di swipe usando [ e gli ascoltatori degli eventi.

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

Ottimizzazione delle prestazioni

Per garantire un'esperienza utente fluida, seguire queste linee guida:

  • Caricare le immagini (ad esempio, testate client) utilizzando .
  • Limitare il numero di manipolazioni DOM. Quando si ricostruisce il cursore dai dati API, utilizzare un frammento di documento per inserire in batch le diapositive.
  • Trabocco o debounce ridimensionano i gestori degli eventi per evitare la rottura del layout.
  • Minimizza le dipendenze JavaScript – il cursore non richiede librerie jQuery o pesanti.
  • Utilizzare per animazioni lisce se si utilizzano transizioni CSS.

Per un'analisi approfondita dell'ottimizzazione del rendering del browser, vedere la guida Google Web Fondamenti sul rendering[].

Integrazione con un processo di costruzione

Quando si utilizza Directus come CMS senza testa, il codice cursore può essere parte di un progetto di front-end più grande costruito con un bundler come Webpack, Vite o Parcel. Mantenere il JavaScript e CSS in file separati e importarli nella vostra applicazione principale. Per un sito statico o tema WordPress, è possibile inlineare il codice direttamente dopo la chiamata API.

Se si utilizza Directus JavaScript SDK[], l'autenticazione e la gestione degli errori diventano più semplici:

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

Questo approccio ti dà anche la sicurezza di tipo se si utilizza TypeScript.

Prova il tuo cursore

Dopo lo sviluppo, prova attraverso più browser (Chrome, Firefox, Safari, Edge) e dispositivi. Verificare che i controlli della tastiera funzionano, che autoplay si ferma su hover, e che il cursore cade indietro con grazia quando JavaScript è disabilitato.

I test automatizzati possono essere aggiunti con strumenti come Cypress o Playwright per garantire che le interazioni rimangano affidabili man mano che la base di codice si evolve.

Conclusioni

Costruire un cursore di testimonianza personalizzato con JavaScript ti dà la libertà di progettare un componente unico, accessibile e performante che si integra in nativo con Directus. Strutturando l'HTML semanticamente, styling con CSS pulito, implementando robusti JavaScript, e recuperando i dati dal vivo da Directus, si crea una funzione dinamica che costruisce fiducia con il tuo pubblico. Le tecniche qui coperte – dot navigazione freccia controlli, supporto touch, accessibilità e prestazioni – formano il futuro.