Att bygga en anpassad innehållsreglage för vittnesmål som använder JavaScript ger dig full kontroll över design, beteende och prestanda. Till skillnad från pre-byggda plugins integrerar en handkodad reglage sömlöst med alla CMS, inklusive Directus, och kan skräddarsys för att matcha ditt varumärkes exakta specifikationer. Denna artikel går igenom att skapa en produktionsklar testimoniell reglage från början, som täcker HTML-skelettet, CSS-övergångar, JavaScript logik, navigering kontroller, responsiva övervägande,

Planera HTML-strukturen

En vittnesmålning består av en behållare och enskilda bilder. Varje bild innehåller citatet, kundens namn och valfria metadata som en titel eller företagslogotyp.

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

Varje bild drar in en ]-element för semantisk korrekthet och bättre tillgänglighet. ] klassen bestämmer vilken bild som för närvarande är synlig. Denna struktur kan vara hårdkodad eller, bättre, genererad dynamiskt från data som hämtas via JavaScript.

Styling the Slider med CSS

Ren, modern CSS säkerställer att reglaget ser polerat och fungerar bra. Använd ] på behållaren och kontroll bild synlighet med opacitet och övergångar.

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

Använda med en klass växel är enkel men saknar smidiga övergångar mellan bilder. För en produktionsreglage, överväga att använda CSS transformer eller absolut positionering för att uppnå korsning eller bild animationer. Ovanstående tillvägagångssätt fungerar bra för en minimal inställning.

Kärna JavaScript Functionality

JavaScript-motorn hanterar bildcykling, dot navigering och användarinteraktion. Börja med att välja bilderna och initiera ett 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);

Denna kod ger automatisk rotation och interaktiv pricknavigering. För förbättrad användbarhet, pausa autoplay när användaren hoppar över reglaget eller interagerar med prickarna.

Lägga till tidigare / Nästa knappar

Många användare förväntar sig pilkontroller för att manuellt bläddra i vittnesmål. Lägg till två knappar inuti eller utanför behållaren.

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

Fetching vittnesmål från Directus

I ett huvudlöst CMS som Directus lagras vittnesmålsdata i en samling (t.ex. ) med fält för ], ]]]], ]]] och valfritt en bild. Använda Directus JavaScript SDK eller vanlig ]], hämta och återge data dynamiskt.

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

Detta tillvägagångssätt håller dina vittnesmål centraliserade i Directus och uppdaterar reglaget automatiskt när innehållet ändras. För bättre prestanda, överväga att cacha API-svaret eller använda Directus SDK med frågeparametrar för att filtrera eller sortera vittnesmål.

Tillgänglighetsövervägelser

En inkluderande reglage säkerställer att alla användare kan interagera med dina vittnesmål. Viktiga metoder inkluderar:

  • (Sätta in ] på reglagebehållaren och (med nedgång för skärmläsare).
  • Lägga till för att kontrollera knappar (t.ex. "Nästa vittnesmål", "Tydiga vittnesmål").
  • ]] på icke-synliga bilder.
  • Pausa autoplay på fokus eller sväva, och ge en play / paus knapp.
  • Säkerställande av tangentbordsnavigering: piltangenterna rör sig mellan bilder och flikfokus hanteras inom widgeten.

För en djupdykning, hänvisa till ]WAI Web Accessibility Tutorials på karuseller .

Responsiv design & Touch Support

Vittnesmålsreglage måste fungera över mobila enheter, tabletter och stationära datorer. Använd relativa enheter och mediafrågor för att justera vaddering, teckenstorlek och navigationslayout.

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

För beröringsstöd, implementera en svepmekanism med och händelse lyssnare. Spåra delta och utlösa ] eller ] baserat på svep riktning.

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

Prestanda Optimization

För att säkerställa en smidig användarupplevelse, följ dessa riktlinjer:

  • Lazy-load alla bilder (t.ex. klientheadshots) med ].
  • Begränsa antalet DOM-manipulationer. När du bygger om reglaget från API-data, använd ett dokument fragment för att lägga in in rutor.
  • Throttle eller debounce resize händelsehanterare för att undvika layout thrashing.
  • Minimera JavaScript-beroende - reglaget kräver inga jQuery eller tunga bibliotek.
  • Använd för smidiga animationer om du använder CSS-övergångar.

För en djupgående titt på webbläsaren som gör optimering, se ] Google Web Fundamentals guide om rendering ].

Integrera med en byggprocess

När du använder Directus som ett huvudlöst CMS kan din reglagekod vara en del av ett större front-end-projekt byggt med en bunt som Webpack, Vite eller Parcel. Håll din JavaScript och CSS i separata filer och importera dem till din huvudapplikation. För en statisk webbplats eller WordPress-tema kan du infoga koden direkt efter API-samtal.

Om du använder ]]]Directus JavaScript SDK , blir autentisering och felhantering enklare:

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

Detta tillvägagångssätt ger dig också typsäkerhet om du använder TypeScript.

Testa din Slider

Efter utveckling, testa över flera webbläsare (Chrome, Firefox, Safari, Edge) och enheter. Verifiera att tangentbordet styr arbete, att autoplay pausar på svävar, och att reglaget faller tillbaka graciöst när JavaScript är inaktiverad. Använd webbläsarens DevTools för att simulera långsamma nätverkshastigheter och bekräfta att vittnesmål laddas successivt.

Automatiserad testning kan läggas till med verktyg som Cypress eller Playwright för att säkerställa att interaktioner förblir tillförlitliga när kodbasen utvecklas.

Slutsats

Att bygga en anpassad vittnesmålning med JavaScript ger dig friheten att utforma en unik, tillgänglig och performant komponent som integrerar infödd med Directus. Genom att strukturera HTML semantiskt, styling med ren CSS, implementera robust JavaScript och hämta levande data från Directus skapar du en dynamisk funktion som bygger förtroende med din publik. De tekniker som täcks här - dot navigation, pilkontroller, touch support, tillgänglighet och prestanda - bildar grunden för alla innehåll karusell du kanske behöver i framtiden.