Der Aufbau eines benutzerdefinierten Inhalts-Sliders für Testimonials mit JavaScript gibt Ihnen die volle Kontrolle über Design, Verhalten und Leistung. Im Gegensatz zu vorgefertigten Plugins integriert sich ein handcodierter Slider nahtlos in jedes CMS, einschließlich Directus, und kann genau auf die genauen Spezifikationen Ihrer Marke zugeschnitten werden. Dieser Artikel führt durch die Erstellung eines produktionsbereiten Testimonial-Sliders von Grund auf neu, der das HTML-Skelett, CSS-Übergänge, JavaScript-Logik, Navigationssteuerungen, responsive Überlegungen, Zugänglichkeit und - entscheidend - wie Sie Live-Testimonial-Daten von Directus über seine REST-API abrufen.

Planung der HTML-Struktur

Ein Testimonial-Slider besteht aus einem Container und einzelnen Folien. Jede Folie enthält das Angebot, den Namen des Kunden und optionale Metadaten wie einen Titel oder ein Firmenlogo.

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

Jede Folie wickelt ein -Element für semantische Korrektheit und bessere Zugänglichkeit ein. Die -Klasse bestimmt, welche Folie gerade sichtbar ist. Diese Struktur kann fest codiert oder besser dynamisch aus Daten generiert werden, die über JavaScript abgerufen werden.

Styling des Sliders mit CSS

Sauberes, modernes CSS sorgt dafür, dass der Schieber poliert aussieht und gut funktioniert. Verwenden Sie auf dem Container und steuern Sie die Sichtbarkeit des Schiebers mit Trübung und Übergängen.

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

Die Verwendung von mit einem Klassen-Toggle ist einfach, aber es fehlen reibungslose Übergänge zwischen Folien. Für einen Produktions-Slider sollten CSS-Transformationen oder absolute Positionierung verwendet werden, um Crossfade- oder Folienanimationen zu erzielen. Der obige Ansatz funktioniert gut für eine minimale Einrichtung.

JavaScript-Funktionalität

Die JavaScript-Engine verwaltet Dia-Cycling, Punktnavigation und Benutzerinteraktion. Beginnen Sie mit der Auswahl der Folien und der Initialisierung eines Index.

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

Dieser Code bietet automatische Rotation und interaktive Punktnavigation. Für eine verbesserte Benutzerfreundlichkeit, pausieren Autoplay, wenn der Benutzer über den Schieberegler schwebt oder mit den Punkten interagiert.

Hinzufügen von Previous / Next Buttons

Viele Benutzer erwarten, dass Pfeilsteuerungen Testimonials manuell durchsuchen.

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

Testimonials von Directus abrufen

In einem Headless CMS wie Directus werden Testimonialdaten in einer Sammlung (z. B. ) mit Feldern für , , und optional einem Bild gespeichert.

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

Dieser Ansatz hält Ihre Testimonials zentral in Directus und aktualisiert den Schieberegler automatisch, wenn sich der Inhalt ändert.Um die Leistung zu verbessern, sollten Sie die API-Antwort zwischenspeichern oder das Directus SDK mit Abfrageparametern verwenden, um Testimonials zu filtern oder zu sortieren.

Zugänglichkeitsüberlegungen

Ein inklusiver Schieberegler stellt sicher, dass alle Benutzer mit Ihren Testimonials interagieren können.

  • Setzen Sie auf dem Schieber-Container und (mit Fallback für Bildschirmleser).
  • Hinzufügen von zur Steuerung von Tasten (z. B. “Next testimonial”, “Previous testimonial”).
  • Verwendung von auf nicht sichtbaren Folien.
  • Pausieren Autoplay auf Fokus oder Schwebe, und eine Play / Pause-Taste zur Verfügung stellen.
  • Sicherstellen der Tastaturnavigation: Pfeiltasten bewegen sich zwischen den Folien und der Tab-Fokus wird im Widget verwaltet.

Für einen tiefen Tauchgang siehe die WAI Web Accessibility Tutorials auf Karussells.

Responsive Design & Touch Support

Testimonial-Slider müssen über mobile Geräte, Tablets und Desktops hinweg funktionieren, und verwenden Sie relative Einheiten und Medienabfragen, um Padding, Schriftgröße und Navigationslayout anzupassen.

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

Um Touch-Unterstützung zu erhalten, implementieren Sie einen Swipe-Mechanismus mit und Ereignis-Listener.

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

Leistungsoptimierung

Um eine reibungslose Benutzererfahrung zu gewährleisten, befolgen Sie diese Richtlinien:

  • Lazy-Laden Sie alle Bilder (z. B. Client-Headshots) mit .
  • Begrenzen Sie die Anzahl der DOM-Manipulationen: Wenn Sie den Schieberegler aus API-Daten neu erstellen, verwenden Sie ein Dokumentfragment, um Folien zum Stapeleinfügen einzufügen.
  • Throttle oder Debounce Resize Event Handler, um Layout Thrashing zu vermeiden.
  • Minimieren Sie JavaScript-Abhängigkeiten – der Slider benötigt keine jQuery- oder schweren Bibliotheken.
  • Verwenden Sie für reibungslose Animationen, wenn Sie CSS-Übergänge verwenden.

Für einen detaillierten Blick auf die Browser-Rendering-Optimierung, siehe Google Web Fundamentals Guide on Rendering.

Integration in einen Build-Prozess

Wenn Sie Directus als Headless CMS verwenden, ist Ihr Slider-Code möglicherweise Teil eines größeren Front-End-Projekts, das mit einem Bundler wie Webpack, Vite oder Parcel erstellt wurde. Bewahren Sie JavaScript und CSS in separate Dateien auf und importieren Sie sie in Ihre Hauptanwendung. Für eine statische Site oder ein WordPress-Theme können Sie den Code direkt nach dem API-Aufruf einbinden.

Wenn Sie das Directus JavaScript SDK verwenden, werden Authentifizierung und Fehlerbehandlung einfacher:

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

Dieser Ansatz gibt Ihnen auch die Sicherheit der Typisierung, wenn Sie TypeScript verwenden.

Testen Sie Ihren Slider

Nach der Entwicklung, Test über mehrere Browser (Chrome, Firefox, Safari, Edge) und Geräte. Stellen Sie sicher, dass Tastatursteuerungen funktionieren, dass Autoplay auf dem Hover pausiert und dass der Schieberegler anmutig zurückfällt, wenn JavaScript deaktiviert ist. Verwenden Sie die DevTools des Browsers, um langsame Netzwerkgeschwindigkeiten zu simulieren und bestätigen Sie, dass Testimonials progressiv geladen werden.

Automatisierte Tests können mit Tools wie Cypress oder Playwright hinzugefügt werden, um sicherzustellen, dass Interaktionen zuverlässig bleiben, wenn sich die Codebasis weiterentwickelt.

Schlussfolgerung

Durch die Strukturierung des HTML semantisch, das Styling mit sauberem CSS, die Implementierung von robustem JavaScript und das Abrufen von Live-Daten aus Directus erstellen Sie eine dynamische Funktion, die Vertrauen bei Ihrem Publikum schafft. Die hier behandelten Techniken - Punktnavigation, Pfeilsteuerung, Touch-Unterstützung, Zugänglichkeit und Leistung - bilden die Grundlage für jedes Inhaltskarussell, das Sie in Zukunft benötigen könnten.