Η κατασκευή μιας προσαρμοσμένης κύλισης περιεχομένου για μαρτυρίες χρησιμοποιώντας JavaScript σας δίνει πλήρη έλεγχο πάνω στο σχεδιασμό, τη συμπεριφορά και την απόδοση. Σε αντίθεση με τα προ-χτισμένα plugins, μια κωδικοποιημένη κύλιση με χέρι ενσωματώνει απρόσκοπτα με οποιοδήποτε CMS, συμπεριλαμβανομένου του Directus, και μπορεί να προσαρμοστεί για να ταιριάζει με τις ακριβείς προδιαγραφές της μάρκας σας. Αυτό το άρθρο περπατά μέσα από τη δημιουργία μιας παραγωγής ⁇ έτοιμης δοκιμαστικής κύλισης από το μηδέν, καλύπτοντας το σκελετό HTML, CSS μεταβάσεις, JavaScript λογική, έλεγχος πλοήγησης, responsive responses, προσβασιμότητα, και ⁇ κρίσιμα ⁇ πώς να φέρει ζωντανά στοιχεία μαρτυρία από Directus μέσω REST API του.

Προγραμματισμός της δομής HTML

Κάθε διαφάνεια κατέχει το απόσπασμα, το όνομα του πελάτη, και τα προαιρετικά μεταδεδομένα, όπως ένας τίτλος ή το λογότυπο της εταιρείας.

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

Κάθε slide τυλίγει ένα στοιχείο για σημασιολογική ορθότητα και καλύτερη προσβασιμότητα. Η τάξη καθορίζει ποια slide είναι ορατή αυτή τη στιγμή. Αυτή η δομή μπορεί να είναι σκληρή ⁇ κωδικοποιημένη ή, καλύτερα, να παραχθεί δυναμικά από τα δεδομένα που λαμβάνονται μέσω JavaScript.

Το styling του Slider με CSS

Καθαρή, σύγχρονη CSS εξασφαλίζει την κύλιση φαίνεται γυαλισμένο και εκτελεί καλά. Χρησιμοποιήστε [[LFT:3]] στο δοχείο και τον έλεγχο ορατότητας διαφάνεια με αδιαφάνεια και μεταβάσεις.

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

Χρησιμοποιώντας με μια εναλλαγή κατηγορίας είναι απλή αλλά στερείται ομαλή μετάβαση μεταξύ των διαφάνειων. Για μια κύλιση παραγωγής, εξετάστε τη χρήση CSS μετασχηματισμών ή απόλυτη τοποθέτηση για την επίτευξη διασταυρώσεων ή κινουμένων σχεδίων διαφάνειας. Η παραπάνω προσέγγιση λειτουργεί καλά για μια ελάχιστη ρύθμιση.

Βασική λειτουργικότητα JavaScript

Η μηχανή JavaScript διαχειρίζεται την ποδηλασία slide, dot navigation και την αλληλεπίδραση χρήστη. Ξεκινήστε επιλέγοντας τις διαφάνειες και αρχικοποιώντας ένα δείκτη.

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

Αυτός ο κώδικας παρέχει αυτόματη περιστροφή και διαδραστική πλοήγηση κουκκίδων. Για ενισχυμένη χρηστικότητα, παύση αυτόματου παιχνιδιού όταν ο χρήστης αιωρείται πάνω από τη κύλιση ή αλληλεπιδρά με τις τελείες.

Προσθήκη προηγούμενων / επόμενων κουμπιών

Πολλοί χρήστες αναμένουν τα χειριστήρια βέλους να περιηγηθούν χειροκίνητα στις μαρτυρίες. Προσθέστε δύο κουμπιά μέσα ή έξω από το δοχείο.

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

Ανάκτηση Μαρτυριών από τον Directus

Σε ένα ακέφαλο CMS όπως το Directus, τα στοιχεία των μαρτυριών αποθηκεύονται σε μια συλλογή (π.χ., ) με πεδία για , , ] και προαιρετικά μια εικόνα. Χρησιμοποιώντας το Directus JavaScript SDK ή απλά , ανακτά και αποδίδει τα δεδομένα δυναμικά.

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

Αυτή η προσέγγιση διατηρεί τις μαρτυρίες σας συγκεντρωμένες στο Directus και ενημερώνει την κύλιση αυτόματα κάθε φορά που αλλάζει περιεχόμενο. Για καλύτερη απόδοση, σκεφτείτε να χαράξετε την απόκριση API ή χρησιμοποιώντας το Directus SDK με παραμέτρους ερωτήματος για να φιλτράρετε ή να ταξινομήσετε τις μαρτυρίες.

Εξετάσεις Προσβασιμότητας

Μια συμπλέκουσα κύλιση εξασφαλίζει ότι όλοι οι χρήστες μπορούν να αλληλεπιδράσουν με τις μαρτυρίες σας.

  • ⁇ στο δοχείο κύλισης και (με εφεδρική μνήμη για τους αναγνώστες οθόνης).
  • Προσθήκη στο κουμπί ελέγχου (π.χ., “Επόμενη μαρτυρία”, “Προηγούμενη μαρτυρία”).
  • Χρήση σε μη ορατές διαφάνειες.
  • Παύση αυτόματης αναπαραγωγής για εστίαση ή αιώρηση, και παροχή ενός κουμπιού αναπαραγωγής/παύσης.
  • Εξασφαλίζοντας την πλοήγηση πληκτρολογίου: τα πλήκτρα βέλους κινούνται μεταξύ των διαφάνειων, και η εστίαση καρτέλας γίνεται μέσα στο γραφικό συστατικό.

Για μια βαθιά κατάδυση, ανατρέξτε στην WAI Web Accessibility Tutorials on Carousels].

Ανταπόκριση & Υποστήριξη αφής

Χρησιμοποιήστε σχετικές μονάδες και ερωτήματα μέσων για να ρυθμίσετε το padding, το μέγεθος γραμματοσειράς, και τη διάταξη πλοήγησης.

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

Για υποστήριξη αφής, εφαρμόστε ένα μηχανισμό swip χρησιμοποιώντας [[LFT:21]]] και [[LFT:22]] ακροατές γεγονότων. Παρακολουθήστε το δέλτα και ενεργοποιήστε [[LFT:23]] ή [[LFT:24]] με βάση την κατεύθυνση swip.

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

Βελτιστοποίηση απόδοσης

Για να εξασφαλίσετε μια ομαλή εμπειρία χρήστη, ακολουθήστε τις παρακάτω οδηγίες:

  • Τεμπέλης ⁇ φόρτωση οποιασδήποτε εικόνας (π.χ., headshots πελατών) χρησιμοποιώντας .
  • Περιορισμός του αριθμού των χειρισμών DOM. Κατά την ανακατασκευή της κύλισης από τα δεδομένα API, χρησιμοποιήστε ένα θραύσμα εγγράφου για να εισάγετε slides παρτίδα.
  • Εκκίνηση ή αποβολή μετασχηματισμού των χειριστών γεγονότων για να αποφευχθεί το θραύση διάταξης.
  • Ελαχιστοποίηση εξαρτήσεων JavaScript ⁇ η κύλιση δεν απαιτεί jQuery ή βαριές βιβλιοθήκες.
  • Χρήση για ομαλές κινήσεις αν χρησιμοποιείται μετάβαση CSS.

Για μια εμπεριστατωμένη ματιά στη βελτιστοποίηση της απόδοσης του προγράμματος περιήγησης, δείτε τον οδηγό Google Web Fundamentals για την απόδοση.

Ενοποίηση με μια διεργασία κατασκευής

Όταν χρησιμοποιείτε το Directus ως ακέφαλο CMS, ο κωδικός σας μπορεί να είναι μέρος ενός μεγαλύτερου έργου front-end που χτίστηκε με ένα budder όπως Webpack, Vite, ή Parcel. Κρατήστε το JavaScript σας και CSS σε ξεχωριστά αρχεία και να τα εισάγετε στην κύρια εφαρμογή σας. Για ένα στατικό site ή WordPress θέμα, μπορείτε να συνδέσετε τον κώδικα απευθείας μετά την κλήση API.

Αν χρησιμοποιείτε το Directus JavaScript SDK, η ταυτοποίηση και ο χειρισμός σφαλμάτων γίνονται απλούστερα:

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

Αυτή η προσέγγιση σας δίνει επίσης ασφάλεια τύπου εάν χρησιμοποιείτε TypeScript.

Δοκιμές του Σλάιντερ σας

Μετά την ανάπτυξη, δοκιμάστε σε πολλαπλά προγράμματα περιήγησης (Chrome, Firefox, Safari, Edge) και συσκευές. Επιβεβαιώστε ότι το πληκτρολόγιο ελέγχει την εργασία, ότι το αυτόματο παιχνίδι σταματά στο αιώρημα, και ότι η κύλιση πέφτει πίσω με χάρη όταν η JavaScript είναι απενεργοποιημένη. Χρησιμοποιήστε το DevTools του προγράμματος περιήγησης για να προσομοιώσετε τις αργές ταχύτητες του δικτύου και να επιβεβαιώσετε ότι οι μαρτυρίες φορτώνουν προοδευτικά.

Αυτόματες δοκιμές μπορούν να προστεθούν με εργαλεία όπως το Cypress ή το Playwright για να εξασφαλιστεί ότι οι αλληλεπιδράσεις παραμένουν αξιόπιστες καθώς εξελίσσεται η βάση κώδικα.

Συμπέρασμα

Η κατασκευή μιας προσαρμοσμένης δοκιμαστικής κύλισης με JavaScript σας δίνει την ελευθερία να σχεδιάσετε ένα μοναδικό, προσβάσιμο και εκτελέσιμο συστατικό που ενσωματώνεται εγγενώς με Directus. Με τη διαμόρφωση της HTML σημασιολογικά, styling με καθαρό CSS, υλοποιώντας στιβαρή JavaScript, και την ανάκτηση ζωντανών δεδομένων από Directus, δημιουργείτε ένα δυναμικό χαρακτηριστικό που χτίζει την εμπιστοσύνη με το κοινό σας. Οι τεχνικές που καλύπτονται εδώ ⁇ dot navigation, ελέγχου βέλους, υποστήριξης αφής, προσβασιμότητας, και απόδοσης ⁇ αποτελούν το θεμέλιο για οποιοδήποτε περιεχόμενο καρουζέλ που μπορεί να χρειαστείτε στο μέλλον.