Створення користувальницького контенту слайдера для свідчень за допомогою JavaScript дає вам повну контроль над дизайном, поведінкою та продуктивністю. На відміну від попередньо створених плагінів, портативний слайдер інтегрується безшовно з будь-яким CMS, включаючи Directus, і може бути налаштований відповідно до специфікацій вашого бренду. Ця стаття проходить через створення продакшн-рецензії з нуля, покриття HTML скелета, CSS переходів, JavaScript логіки, навігаційні елементи, адаптивні міркування, доступність та – головне – як викопувати живі дані з 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>

Кожен слайд обгортає елемент для емантичне виправлення та кращої доступності. Клас визначає, що слайд в даний час помітний. Ця структура може бути твердо-кодована або, краще, генерується динамічно з даних, що випливають через JavaScript.

Стилізація слайдера з CSS

Чистий, сучасний CSS забезпечує полірований слайдер і добре виконує. Використовуйте на контейнері і контрольному видимості слайдів з непрозорістю і переходами.

.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

В рамках проекту «Сучасні технології» укладено новий проект «Сучасні технології» та «Сучасні технології».

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 або plain , отримання і відображення даних динамічно.

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

Цей підхід зберігає ваші відгуки, що централізовано засвідчують у Директиві та оновлює слайдер автоматично, коли всі зміни вмісту. Для кращої продуктивності слід розглянути кешування відповіді API або використання Директиви SDK з параметрами запиту для фільтрування або сортування відгуків.

Розгляд доступності

Увімкнути інклюзивний слайдер, щоб всі користувачі могли взаємодіяти з вашими свідченнями. Ключові практики включають:

  • Встановлення на контейнері слайдера та (з випаданням для зчитувачів екрана).
  • Додавання для керування кнопками (наприклад, «Далі відгуки», «Попередня Відгуки».
  • на невидимих слайдах.
  • За допомогою автоматичного відтворення на фокусі або конюшині, і надаючи кнопку відтворення/покоївки.
  • Налаштування клавіатури навігації: клавіші стріли переміщаються між слайдами, і фокус вкладки керований в рамках віджету.

Для глибокого занурення див. WAI Web Accessibility Tutorials on Carousels.

Відповідальний дизайн та підсилювач; сенсорна підтримка

Список повзунок необхідно працювати по мобільних пристроях, планшетах, настільних комп'ютерах. Використовуйте відносні блоки та медіа запити для регулювання насипання, розміру шрифту та навігаційної макети.

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

Для сенсорної підтримки реалізовано механізм застібки за допомогою та . Відстежуйте дельта та запустіть або на основі напряму swipe.

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

Оптимізація продуктивності

Щоб забезпечити плавний досвід користувача, слідуйте цими рекомендаціями:

  • Lazy‐load будь-які зображення (наприклад, знімки клієнта) за допомогою .
  • Визначте кількість маніпуляцій DOM. При перебудуванні слайдера з даних API використовуйте фрагмент документа для пакетних вставок слайдів.
  • У разі виявлення несправностей або видалення ручок для запобігання розмітки.
  • Мінімізувати JavaScript залежності – слайдер не вимагає джбШвидких або важких бібліотек.
  • Використовуйте для плавної анімації, якщо використовувати CSS-переходи.

Для поглибленого перегляду на оптимізації веб-адреса веб-редактора веб-редактора веб-редактора веб-редактора веб-редактора веб-редактора .

Інтеграція з процесом побудови

Якщо ви використовуєте Directus як безголовний CMS, ваш код слайдера може бути частиною більшого проекту переднього класу, побудований з пучком, як Webpack, Vite, або Parcel. Тримайте JavaScript і CSS в окремих файлах і імпортуйте їх в основну програму. Для статичного сайту або WordPress тема ви можете ввімкнути код безпосередньо після виклику API.

Предактор СПК, автентифікація та похибка по роботі з творами:

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) і пристроїв. Перевірте, що клавіатурні елементи працюють, які автоматичноplay паузи на конюшині, і що слайдер повертає назад витончено, коли JavaScript вимкнено. Використовуйте DevTools для імітації повільних мережевих швидкостей і підтверджує, що свідчення завантаження поступово.

Автоматичне тестування може бути додано з інструментами, такими як Cypress або Playwright, щоб забезпечити взаємодію, залишаються надійними як конвертація коду.

Висновок

Створення користувальницького свідоцтва слайдера з JavaScript дає вам свободу дизайну унікальної, доступної та виконавської складової, яка інтегрується на рідному рівні з Директивою. За структуруванням HTML-семантично, укладаючи з чистим CSS, реалізуючи надійний JavaScript, а також випробувавши живі дані з Директиви, ви створюєте динамічну функцію, яка будує довіру з аудиторією. Методи, що охоплюють тут – точка навігації, стрілові елементи управління, сенсорна підтримка, доступність та продуктивність – формує основу для будь-якого вмісту карусель, який може знадобитися в майбутньому.