Het bouwen van een custom content slider voor getuigenissen met JavaScript geeft u volledige controle over ontwerp, gedrag en prestaties. In tegenstelling tot vooraf gebouwde plugins, een hand-gecodeerde slider integreert naadloos met een CMS, inclusief Directus, en kan worden aangepast aan uw merk exacte specificaties. Dit artikel loopt door het creëren van een productie-ready testimonial slider vanaf nul, het bedekken van het HTML skelet, CSS overgangen, JavaScript logica, navigatie controles, responsieve overwegingen, toegankelijkheid, en . .. hoe om live testimonial data te halen van Directus via zijn REST API.

Planning van de HTML-structuur

Een testimonial slider bestaat uit een container en individuele dia's. Elke dia bevat de offerte, de naam van de klant, en optionele metadata zoals een titel of bedrijfslogo.

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

Elke dia wraps een element voor semantische correctheid en betere toegankelijkheid. De klasse bepaalt welke dia momenteel zichtbaar is. Deze structuur kan hard gecodeerd of, beter, dynamisch gegenereerd worden uit gegevens die via JavaScript worden opgehaald.

De schuif met CSS styling

Schone, moderne CSS zorgt ervoor dat de schuifregelaar er gepolijst uitziet en goed presteert. Gebruik op de container en regel de zichtbaarheid van de schuif met opaciteit en overgangen.

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

Het gebruik van met een klasse-omschakelen is eenvoudig maar mist een soepele overgang tussen dia's. Voor een productie-schuifregelaar, overwegen CSS-omvormingen of absolute positionering te gebruiken om kruisvervaging of dia-animaties te bereiken. De bovenstaande benadering werkt goed voor een minimale opstelling.

Kern JavaScript Functionaliteit

De JavaScript-engine beheert diafiets, dotnavigatie en gebruikersinteractie. Begin met het selecteren van de dia's en het initialiseren van een 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);

Deze code biedt automatische rotatie en interactieve dot navigatie. Voor een verbeterde bruikbaarheid, pauzeer autoplay wanneer de gebruiker zweeft over de schuifregelaar of interageert met de stippen.

Vorige / volgende knoppen toevoegen

Veel gebruikers verwachten pijlbedieningen handmatig bladeren getuigenissen. Voeg twee knoppen binnen of buiten de container.

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

Getuigenissen van Directus ophalen

In een hoofdloze CMS zoals Directus worden getuigenissengegevens opgeslagen in een verzameling (bv. ) met velden voor , , ] en optioneel een afbeelding. Met behulp van de Directus JavaScript SDK of vlak , de gegevens dynamisch ophalen en weergeven.

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

Deze aanpak houdt uw getuigenissen centraal in Directus en update de schuifregelaar automatisch wanneer de inhoud verandert. Voor betere prestaties, overweeg het cachen van de API-respons of het gebruik van de Directus SDK met query parameters om te filteren of testimonials sorteren.

Toegankelijkheidsoverwegingen

Een inclusieve schuifregelaar zorgt ervoor dat alle gebruikers kunnen communiceren met uw getuigenissen. Belangrijkste praktijken zijn:

  • Instellen op de schuifcontainer en (met terugval voor schermlezers).
  • Voegen toe aan de bedieningsknoppen (bv., . .Volgende testimonial . . .Vorige testimonial .).
  • Gebruik op niet-zichtbare dia's.
  • Pauzeer autoplay op focus of zweef, en het verstrekken van een afspeel/pauze knop.
  • Zorgen voor toetsenbordnavigatie: pijltjestoetsen verplaatsen tussen dia's, en tabbladfocus wordt beheerd binnen de widget.

Voor een diepe duik, verwijzen naar de WAI Web Toegankelijkheid Tutorials op Carousels.

Responsive Design & Touch Support

Testimonial schuifregelaars moeten werken op mobiele apparaten, tablets en desktops. Gebruik relatieve eenheden en media-queries om de padding, lettergrootte en navigatie-lay-out aan te passen.

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

Voor touch support, implementeer een swipe mechanisme met behulp van en ] event luisteraars. Volg de delta en trigger of op basis van swipe richting.

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

Prestatieoptimalisatie

Om een soepele gebruikerservaring te garanderen, volg deze richtlijnen:

  • Lui laden van alle afbeeldingen (bv. klantfoto's) met behulp van .
  • Beperk het aantal DOM-manipulaties. Gebruik bij het opnieuw opbouwen van de slider van API-gegevens een documentfragment om dia's in te voegen.
  • Throttle of debounce resize event handlers om layout thrashing te voorkomen.
  • Minimaliseer JavaScript afhankelijkheden . De slider vereist geen jQuery of zware bibliotheken.
  • Gebruik voor gladde animaties als CSS-overgangen worden gebruikt.

Voor een diepgaande blik op de weergave van de browser, zie de Google Web Fundamentals gids over rendering.

Integratie met een bouwproces

Wanneer u Directus als hoofdloze CMS gebruikt, kan uw slider-code deel uitmaken van een groter front-end project dat is gebouwd met een bundelaar zoals Webpack, Vite of Parcel. Houd uw JavaScript en CSS in aparte bestanden en importeer ze in uw hoofdtoepassing. Voor een statische site of WordPress thema, kunt u de code direct na de API-oproep inlineren.

Als u de Directus JavaScript SDK gebruikt, worden authenticatie en foutafhandeling eenvoudiger:

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

Deze aanpak geeft u ook de veiligheid van typeren als u TypeScript gebruikt.

Uw schuifregelaar testen

Na ontwikkeling, test over meerdere browsers (Chrome, Firefox, Safari, Rand) en apparaten. Controleer of toetsenbordbesturingen werken, dat autoplay pauzeert op zweef, en dat de slider gratieus terugvalt wanneer JavaScript is uitgeschakeld. Gebruik de browser.DevTools DevTools om langzame netwerksnelheden te simuleren en te bevestigen dat testimonials laden geleidelijk.

Geautomatiseerde testen kunnen worden toegevoegd met tools zoals Cypress of Playwright om ervoor te zorgen dat interacties betrouwbaar blijven als de codebase evolueert.

Conclusie

Het bouwen van een aangepaste testimonial slider met JavaScript geeft u de vrijheid om een unieke, toegankelijke en performante component te ontwerpen die native met Directus integreert. Door het structureren van de HTML semantisch, styling met schone CSS, het implementeren van robuuste JavaScript, en het ophalen van live gegevens van Directus, creëer je een dynamische functie die vertrouwen opbouwt met uw publiek. De technieken die hier worden behandeld . Dot navigatie, pijlbesturing, touch support, bereikbaarheid en prestaties .. vormen de basis voor elke inhoud carrousel die u nodig zou kunnen hebben in de toekomst.