Bygge en egendefinert innholdsglidebryter for vitnemål ved hjelp av JavaScript gir deg full kontroll over design, oppførsel og ytelse. I motsetning til forhåndsbygde plugins integrerer en håndkodet glidebryter sømløst med ethvert CMS, inkludert Directus, og kan skreddersys for å matche merkevarens nøyaktige spesifikasjoner. Denne artikkelen går gjennom å opprette en produksjons-klar vitnebryter fra bunnen, dekker HTML skjelett, CSS-overganger, JavaScript-logikk, navigasjonskontroller, responsive hensyn, tilgjengelighet og ⁇ avgjørende ⁇ hvordan du henter levende bevis fra Directus via sin REST API.

Planlegger HTML-strukturen

En vitenglidebryter består av en beholder og individuelle lysbilder. Hver lysbilde inneholder sitat, klientens navn og valgfrie metadata som en tittel eller firmalogo.

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

Hver lysbilde omfavner et element for semantisk korrekthet og bedre tilgjengelighet. klassen bestemmer hvilken lysbilde som er synlig. Denne strukturen kan være hard-kodet eller, bedre, generere dynamisk fra data hentet via JavaScript.

Styling av glidebryteren med CSS

Rent, moderne CSS sikrer at glidebryteren ser polert ut og fungerer godt. Bruk på beholderen og kontroller lysbilde synlighet med åpenhet og overganger.

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

Bruker med en klassebryter er enkel, men mangler glatte overganger mellom lysbilder. For en produksjonsglidebryter, vurdere å bruke CSS transformerer eller absolutt posisjonering for å oppnå kryssfade eller lysbilde animasjoner. Den ovennevnte tilnærmingen fungerer godt for en minimal installasjon.

Core JavaScript Funksjonalitet

JavaScript-motoren administrerer lysbildesykling, dot-navigasjon og brukerinteraksjon. Start ved å velge lysbildene og starte en indeks.

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

Denne koden gir automatisk rotasjon og interaktiv dot-navigasjon. For forbedret brukbarhet, pause autospill når brukeren svever over glidebryteren eller samhandler med prikkene.

Legg til tidligere / Neste knapper

Mange brukere forventer at pilkontroller manuelt kan bla gjennom anmeldelser. Legg til to knapper inne eller utenfor beholderen.

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

Hente vitnesbyrd fra Directus

I en hovedløs CMS som Directus lagres det i en samling (f.eks. ) med felt for ], , og eventuelt et bilde. Ved hjelp av Directus JavaScript SDK eller slette , hente og gjøre dataene dynamisk.

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

Denne tilnærmingen holder dine anmeldelser sentralisert i Directus og oppdaterer glidebryteren automatisk når innholdet endres. For bedre ytelse, vurdere å kake API-responsen eller ved å bruke Directus SDK med spørringsparametre for å filtrere eller sortere påmeldinger.

Tilgjengelighetsoverveielser

En inkluderende glidebryter sikrer at alle brukere kan samhandle med dine anmeldelser. Nøkkelpraksis inkluderer:

  • Innstilling på glidebryteren og (med tilbakefall for skjermlesere).
  • Legg til til kontrollknapper (f.eks. \"Next testimonial\", \"Førre vitnesbyrd\").
  • på ikke-synlige lysbilder.
  • Pausing autoplay på fokus eller sveve, og gi en spill / pause-knappen.
  • Sikre tastaturnavigering: piltastene beveger seg mellom lysbilder, og tabfokus administreres i widgeten.

For en dyp dykk, se WAI Web Access Tutorials on Carousels.

Responsiv design & berøringsstøtte

Vitenskapelige glidebrytere må jobbe på tvers av mobile enheter, nettbrett og skrivebord. Bruk relative enheter og mediespørsler for å justere polstring, skriftstørrelse og navigasjonslayout.

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

For berøringsstøtte implementerer du en sveipemekanisme ved å bruke og hendelseslyttere. Spor deltaet og utløse eller ] basert på sveiperetning.

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

Performance Optimization

For å sikre en jevn brukeropplevelse, følg disse retningslinjene:

  • Lazy ⁇ last ned bilder (f.eks. klientens hodebilder) ved hjelp av .
  • Begrens antall DOM-manipulasjoner. Når du gjenoppbygger glidebryteren fra API-data, bruker du et dokumentfragment til å satse innsettslys.
  • Throttle eller avslå endring av endring av hendelseshåndteringer for å unngå å bli utformet.
  • Minimer JavaScript-avhengighetene ⁇ glidebryteren krever ingen jQuery eller tunge biblioteker.
  • Bruk for glatte animasjoner hvis du bruker CSS-overganger.

For å se grundig på nettleserens gjengivelsesoptimalisering, se guiden til Google Web Fundamentals om gjengivelse.

Integrert med en byggeprosess

Når du bruker Directus som et hodeløs CMS, kan glidebryterkoden din være en del av et større front-end prosjekt bygget med en pakker som Webpack, Vite eller Parcel. Hold JavaScript og CSS i separate filer og importere dem i hovedapplikasjonen. For et statisk nettsted eller WordPress-tema kan du innlede koden direkte etter API-samtalen.

Hvis du bruker Directus JavaScript SDK, blir autentisering og feilhåndtering enklere:

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

Denne tilnærmingen gir deg også å skrive inn sikkerhet ved bruk av TypeScript.

Tester din glidebryter

Etter utvikling tester du på tvers av flere nettlesere (Chrome, Firefox, Safari, Edge) og enheter. Kontroller at tastaturkontroller fungerer, at autospill pauser på hover, og at glidebryteren faller tilbake graciøst når JavaScript er deaktivert. Bruk nettleserens DevTools til å simulere langsomme nettverkshastigheter og bekrefte at testimonials belastning gradvis.

Automatisk testing kan legges til med verktøy som Cypress eller Playwright for å sikre at interaksjonene forblir pålitelige etter hvert som kodebasen utvikler seg.

Konklusjon

Bygge en egendefinert testimonial glidebryter med JavaScript gir deg frihet til å designe en unik, tilgjengelig og performant komponent som integrerer innfødt med Directus. Ved å strukturere HTML semantisk, styling med ren CSS, implementere robust JavaScript og hente live data fra Directus, oppretter du en dynamisk funksjon som bygger tillit til publikum. Teknikkene som er dekket her ⁇ dot navigasjon, pilekontroller, berøringsstøtte, tilgjengelighet og ytelse ⁇ danne grunnlaget for alle innhold karousel du kanskje trenger i fremtiden.