使用 Javascript 构建自定义内容滑动器用于验证

使用 JavaScript 构建一个自定义的测试内容滑动器,可以让你完全控制设计、行为和性能。 与预建的插件不同,手动编码滑动器与包括Directus在内的任何CMS 的无缝融合,可以适应品牌的精确规格。 文章从头开始创建一个生产“ 准备” 测试性滑动器,覆盖 HTML 骨架、CSS 过渡、JavaScript 逻辑、导航控制、反应性考虑、可访问性,以及关键是怎样通过 REST API从De获取现场测试数据。

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

每个幻灯片都包 [[FLT: 1]] 元素, 用于语义正确和更好的访问。 [[FLT: 2] 类决定了当前可看到的幻灯片。 这个结构可以被硬编码, 或者更好, 从 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;
}

使用 [[FLT: 5] ] 类切换简单, 但缺少幻灯片之间的平滑转换。 对于制作滑动器, 请考虑使用 CSS 转换或绝对定位来实现交叉或幻灯片动画。 上述方法对于最小的设置效果良好 。

核心 JavaScript 功能性

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 获取证词

在像Directus这样的无头的CMS中,测试数据存储在集合(例如])中,并有字段用于,],],以及可选的图像. 使用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();
}

这种方法将您的验证集中到 Directus 中, 并在内容变化时自动更新滑动器。 为了更好的性能, 请考虑缓存 API 响应, 或者使用 Directus SDK 并带有查询参数来过滤或排序验证 。

无障碍因素

包容性的滑动器确保所有用户都能与您的验证进行交互。关键做法包括:

• 在滑动容器和]上设置(屏幕阅读器可反向)。
• 添加,以控制按钮(例如“下一个证明”、“先前的证明”)。
• 在非可见幻灯片上使用。
• 在焦点或悬浮时暂停自动播放,并提供播放/暂停按钮。
• 确保键盘导航:箭头键在幻灯片之间移动,标签焦点在部件内管理.

对于深潜,请参考WAI在木卫一上的网络无障碍教程.

响应设计与amp; 触摸支持

验证滑动器必须跨越移动设备、平板电脑和桌面。使用相对单位和媒体查询来调整粘贴、字体大小和导航布局。

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

对于触摸支持,请使用 ] 和 事件听器执行刷卡机制。根据刷卡方向跟踪三角洲并触发 或 ]。

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

性能优化

为确保用户经验的顺利,遵循这些准则:

• 懒惰装入任何图像(例如客户端头像)使用]。
• 限制 DOM 操作的次数。 在重建 API 数据中的滑动器时, 使用文档碎片进行批次插入幻灯片 。
• 调压或调压重排事件处理器,以避免布局的抽打.
• 最小化 JavaScript 依赖性 – 滑动器不需要 jQuery 或重文库 。
• 如果使用 CSS 转换,则使用 平滑动画.

浏览器渲染优化的深入观察,请参见Google Web Profiles 渲染的指南.

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