À la différence des plugins préconstruits, un slider codé à la main s'intègre parfaitement à n'importe quel CMS, y compris Directus, et peut être adapté pour correspondre aux spécifications exactes de votre marque. Cet article permet de créer un slider de témoignage prêt à la production à partir de zéro, couvrant le squelette HTML, les transitions CSS, la logique JavaScript, les contrôles de navigation, les considérations réactives, l'accessibilité et – d'une manière cruciale – comment récupérer des données de témoignage en direct de Directus via son API REST.

Planification de la structure HTML

Un slider de témoignage est constitué d'un conteneur et de diapositives individuelles. Chaque diapositive contient le devis, le nom du client et des métadonnées optionnelles comme un titre ou un logo de l'entreprise.

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

Chaque diapositive enveloppe un élément pour une correction sémantique et une meilleure accessibilité. La classe détermine quelle diapositive est actuellement visible. Cette structure peut être codée en dur ou, mieux, générée dynamiquement à partir de données récupérées via JavaScript.

Styling the Slider avec CSS

La CSS moderne et propre assure le polissage du curseur et fonctionne bien. Utilisez sur le conteneur et contrôlez la visibilité du curseur avec opacité et transitions.

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

L'utilisation de avec un basculement de classe est simple mais manque de transitions fluides entre les diapositives. Pour un curseur de production, envisager d'utiliser des transformations CSS ou un positionnement absolu pour réaliser des animations de crossfade ou de diapositive.

Fonctionnalité principale JavaScript

Le moteur JavaScript gère le vélo de diapositives, la navigation par points et l'interaction utilisateur. Commencez par sélectionner les diapositives et initialiser un 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);

Ce code fournit une rotation automatique et une navigation interactive par points. Pour une meilleure convivialité, arrêtez le jeu automatique lorsque l'utilisateur survole le curseur ou interagit avec les points.

Ajout de boutons précédents / suivants

De nombreux utilisateurs s'attendent à des commandes de flèches pour parcourir manuellement les témoignages. Ajouter deux boutons à l'intérieur ou à l'extérieur du conteneur.

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

Récupérer des témoignages de Directus

Dans un CMS sans tête comme Directus, les données de témoignage sont stockées dans une collection (p. ex. ) avec des champs pour , , et en option une image. En utilisant le SDK JavaScript de Directus ou une simple , récupérer et rendre les données dynamiquement.

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

Cette approche maintient vos témoignages centralisés dans Directus et met à jour automatiquement le curseur chaque fois que le contenu change. Pour une meilleure performance, envisagez de mettre en cache la réponse API ou d'utiliser le SDK Directus avec des paramètres de requête pour filtrer ou trier les témoignages.

Considérations relatives à l'accessibilité

Un curseur inclusif permet à tous les utilisateurs d'interagir avec vos témoignages. Les principales pratiques sont les suivantes :

  • Réglage sur le contenant de curseur et (avec retour pour les lecteurs d'écran).
  • Ajouter aux boutons de contrôle (p. ex., -Témoignage suivant, -Témoignage précédent).
  • Utilisation sur les diapositives non visibles.
  • En arrêtant le jeu automatique sur focus ou plan, et en fournissant un bouton de lecture/pause.
  • Assurer la navigation du clavier: les touches fléchées se déplacent entre les diapositives, et l'onglet focus est géré dans le widget.

Pour une plongée profonde, consultez les Tutoriels d'accessibilité Web WAI sur Carousels.

Conception réactive & Support tactile

Les curseurs de témoignage doivent fonctionner sur les appareils mobiles, tablettes et ordinateurs de bureau. Utilisez des unités relatives et des requêtes multimédias pour ajuster le rembourrage, la taille de police et la mise en page de navigation.

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

Pour le support tactile, implémentez un mécanisme de balayage en utilisant et des auditeurs d'événements. Suivez le delta et déclenchez ou en fonction de la direction de balayage.

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

Optimisation des performances

Pour assurer une expérience utilisateur harmonieuse, suivez les lignes directrices suivantes :

  • Chargez par laser toutes les images (p. ex., des prises de vue du client) en utilisant .
  • Limiter le nombre de manipulations DOM. Lors de la reconstruction du curseur à partir des données de l'API, utilisez un fragment de document pour insérer des diapositives par lot.
  • Manipulation ou débonflage des gestionnaires d'événements redimensionnés pour éviter les battements de disposition.
  • Minimiser les dépendances JavaScript – le curseur ne nécessite pas de bibliothèque jQuery ou lourde.
  • Utilisez pour des animations en douceur si vous utilisez des transitions CSS.

Pour un examen approfondi de l'optimisation du rendu du navigateur, voir le guide Google Web Fundaments sur le rendu.

Intégration à un processus de construction

Lorsque vous utilisez Directus comme un CMS sans tête, votre code slider peut faire partie d'un projet front-end plus grand construit avec un bundler comme Webpack, Vite ou Parcel. Gardez votre JavaScript et CSS dans des fichiers séparés et importez-les dans votre application principale. Pour un thème statique ou WordPress, vous pouvez insérer le code directement après l'appel API.

Si vous utilisez le Directus JavaScript SDK, l'authentification et le traitement des erreurs deviennent plus simples:

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

Cette approche vous donne également la sécurité de type si vous utilisez TypeScript.

Tester votre curseur

Après le développement, testez sur plusieurs navigateurs (Chrome, Firefox, Safari, Edge) et appareils. Vérifiez que les commandes du clavier fonctionnent, que l'autoplay s'arrête sur le vol stationnaire, et que le curseur tombe gracieusement lorsque JavaScript est désactivé. Utilisez le navigateur -S DevTools pour simuler les vitesses réseau lentes et confirmer que les témoignages se chargent progressivement.

Des tests automatisés peuvent être ajoutés avec des outils comme Cypress ou Playwright pour garantir que les interactions restent fiables au fur et à mesure que la base de codes évolue.

Conclusion

En structurant le style HTML sémantique avec CSS propre, en implémentant JavaScript robuste et en récupérant les données en direct de Directus, vous créez une fonctionnalité dynamique qui renforce la confiance avec votre public. Les techniques couvertes ici – navigation par points, commandes de flèches, support tactile, accessibilité et performance – constituent la base de tout carrousel de contenu dont vous pourriez avoir besoin à l'avenir.