Construirea unui slider personalizat pentru mărturii folosind JavaScript vă oferă un control complet asupra designului, comportamentului și performanței. Spre deosebire de plugin-uri pre-construite, un slider codat manual se integrează perfect cu orice SMC, inclusiv Directus, și poate fi adaptat pentru a se potrivi cu specificațiile exacte ale brandului. Acest articol merge prin crearea unui slider de testare de la zero, acoperind scheletul HTML, tranzițiile CSS, logica JavaScript, control de navigație, considerente receptive, accesibilitate, și

Planificarea structurii HTML

Un slider de marturie consta dintr-un container si diapozitive individuale. Fiecare diapozitiv detine citatul, numele clientului si metadatele optionale, cum ar fi un titlu sau logo al companiei.

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

Fiecare diapozitiv învelește un element pentru corectitudinea semantică și o mai bună accesibilitate. clasa determină ce diapozitiv este vizibil în prezent. Această structură poate fi hard-codată sau, mai bine, generată dinamic din datele obținute prin JavaScript.

Stilarea slider cu CSS

CSS curat, modern asigură că slider-ul arată lustruit și funcționează bine. Utilizați pe container și controlați vizibilitatea diapozitivei cu opacitate și tranziții.

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

Folosirea cu o class toggle este simplă, dar lipsește tranziții netede între diapozitive. Pentru un slider de producție, ia în considerare utilizarea CSS transformă sau poziționare absolută pentru a realiza animații crossfade sau diapozitive. Abordarea de mai sus funcționează bine pentru o configurare minimă.

Funcționalitate JavaScript centrală

Motorul JavaScript gestionează ciclismul, navigarea punct și interacțiunea cu utilizatorul. Începeți prin selectarea diapozitivelor și inițializarea unui 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);

Acest cod oferă rotire automată și navigare punct interactiv. Pentru utilizare îmbunătățită, pauză automată atunci când utilizatorul plutește peste slider sau interacționează cu punctele.

Adăugarea de butoane anterioare / următoare

Mulți utilizatori se așteaptă ca comenzile săgeată să navigheze manual marturii. Adăugați două butoane în interiorul sau în afara containerului.

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

Aducerea mărturiilor de la Directus

Într-un CMS fără cap, cum ar fi Directus, datele de marturie sunt stocate într-o colecție (de exemplu, ) cu câmpuri pentru , , , și opțional o imagine. Folosind Directus JavaScript SDK sau simplu , preluați și redați datele dinamic.

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

Această abordare menține mărturiile centralizate în Directus și actualizează automat diapozitivul ori de câte ori se schimbă conținutul. Pentru o performanță mai bună, ia în considerare cache-ul răspunsului API sau utilizarea Directus SDK cu parametrii de interogare pentru a filtra sau sorta mărturii.

Considerații privind accesibilitatea

Un slider incluziv asigură că toți utilizatorii pot interacționa cu mărturiile dumneavoastră. Practicile cheie includ:

  • Setarea pe recipientul cu slider și (cu retur pentru cititorii ecranului).
  • Adăugare la butoanele de control (de exemplu,
  • Folosind pe diapozitive nevizibile.
  • Întrerupând autoplay-ul pe focus sau planează, și oferind un buton de redare/pauză.
  • Asigurarea navigarea tastaturii: tastele săgeată se deplasează între diapozitive, și fila se concentrează este gestionat în cadrul widget.

Pentru o scufundare profundă, a se vedea WAI Tutorials Accesibilitate Web pe Carousels.

Design responsabil & Suport tactil

Sliderele de marturie trebuie sa lucreze pe dispozitive mobile, tablete, si desktop-uri. Utilizati unitati relative si interogări media pentru a ajusta padding, dimensiunea fontului, si layout navigare.

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

Pentru suport tactil, implementați un mecanism de rotire care utilizează și ] ascultătorii evenimentului. Urmăriți delta și declanșați sau pe baza direcției de rotire.

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

Optimizarea performanței

Pentru a asigura o experiență de utilizare lină, urmați următoarele orientări:

  • Încărcați orice imagini (de exemplu, fotografii cu capul clientului) utilizând .
  • Limitaţi numărul de manipulări ale DOM. La reconstruirea sliderului din datele API, utilizaţi un fragment de document pentru inserarea pe loturi a slide-urilor.
  • Tronkle sau debunce redimensiona manipulatori eveniment pentru a evita baterea aspect.
  • Minimizează dependența JavaScript
  • Utilizarea pentru animațiile netede dacă se utilizează tranziții CSS.

Pentru o privire aprofundată asupra optimizării redării browser-ului, a se vedea Google Web fundamentals guide on reding.

Integrarea cu un proces de construire

Atunci când utilizați Directus ca un CMS fără cap, codul slider poate face parte dintr-un proiect front-end mai mare construit cu un pachet ca Webpack, Vite, sau Parcel. Păstrați JavaScript și CSS în fișiere separate și importați-le în aplicația principală. Pentru un site static sau temă WordPress, puteți inlinia codul imediat după apelul API.

Dacă utilizați Director JavaScript SDK, autentificarea și manipularea erorilor devin mai simple:

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

Această abordare vă oferă, de asemenea, siguranță de tip dacă utilizați TypeScript.

Testarea slider-ului

După dezvoltare, testați pe mai multe browsere (Chrome, Firefox, Safari, Edge) și dispozitive. Verificați dacă tastatura controlează locul de muncă, că pauzele de autoplay pe hover, și că slider-ul se retrage cu grație atunci când JavaScript este dezactivat. Utilizați browser-ul DevTools pentru a simula viteze lente de rețea și confirma că marturiile încărca progresiv.

Testarea automată poate fi adăugată cu instrumente precum Cypress sau Playwright pentru a asigura că interacțiunile rămân fiabile pe măsură ce baza de coduri evoluează.

Concluzie

Construirea unui slider personalizat cu JavaScript vă oferă libertatea de a proiecta o componentă unică, accesibilă și performantă care se integrează nativ cu Directus. Prin structurarea semantic HTML, stil cu CSS curat, implementarea robust JavaScript, și aducerea de date live de la Directus, vă creați o caracteristică dinamică care construiește încredere cu publicul. Tehnicile acoperite aici navigare punct, control săgeată, suport tactil, accesibilitate, și performanță forma fundație pentru orice carusel conținut s-ar putea nevoie în viitor.