Table of Contents
Xây dựng một con trượt nội dung tự chọn cho các giao thức kiểm tra bằng JavaScript cho bạn quyền kiểm soát đầy đủ thiết kế, hành vi và hiệu suất. Không giống như bổ sung đã được xây dựng sẵn, con trượt mã hóa tay tích hợp không biên, mã hóa với bất kỳ hệ thống chỉ dẫn, bao gồm Chỉ dẫn, và có thể được điều chỉnh để khớp với các thông tin chính xác về thương hiệu của bạn. Bài này đi qua việc tạo ra thanh trượt thử nghiệm sẵn sàng từ vết xước, che đậy bộ xương HTML, chuyển đổi hệ thống HTML, JavaScript, điều khiển, mã định vị, khả năng điều khiển, xem xét, khả năng truy cập và chủ yếu — làm thế nào để lấy dữ liệu thử nghiệm trực tiếp từ hệ thống AST.
Lập kế hoạch tạo ra HTML
Con trượt vòng tròn gồm có một thùng và mỗi hình chiếu riêng, mỗi slide chứa câu trích dẫn, tên của khách hàng và các siêu dữ liệu tùy chọn như là một logo hoặc của công ty.
<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>Mỗi slide bao gồm một yếu tố để sửa đổi ngữ nghĩa và dễ truy cập hơn. Lớp xác định trang nào hiện có. Cấu trúc này có thể được mã hóa cứng hoặc tốt hơn, tạo ra từ dữ liệu lấy bằng JavaScript.
Đang tạo ảnh cho Slider với CN
Làm sạch, hiện đại CND đảm bảo con trượt trông bóng loáng và thực hiện tốt. Dùng trên hộp và trên trình chiếu điều khiển bằng độ mờ và chuyển tiếp.
.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;
}Dùng với một lớp thì đơn giản nhưng thiếu sự chuyển đổi mịn giữa các slide. Để chuyển đổi trình đơn sản xuất, hãy xem xét cách chuyển đổi CSS hay vị trí tuyệt đối để đạt được sự cắt chéo hay hoạt cảnh. Cách tiếp cận trên cũng hiệu quả với thiết lập tối thiểu.
Hàm chính:
Động cơ JavaScript quản lý việc trượt xe đạp, định vị chấm và tương tác người dùng. Bắt đầu bằng việc chọn các slide và khởi động chỉ mục.
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);Mã này cung cấp sự luân phiên tự động và định vị tương tác chấm. Để tăng cường khả năng sử dụng, tạm dừng hoạt động tự động khi người dùng lướt qua con trượt hoặc tương tác với các chấm.
Thêm nút trước / kế
Nhiều người dùng mong đợi mũi tên điều khiển khả năng duyệt tự động. Thêm hai nút bên trong hoặc bên ngoài hộp.
<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);Lấy những kiểm tra từ Chỉ thị
Trong một tờ giấy trắng như Directus, dữ liệu thử nghiệm được lưu trữ trong một bộ sưu tập (v. d., với trường cho , , , , và tùy chọn hình ảnh. Dùng chỉ đạo JavaScript SDK [FL:14] hoặc rõ ràng [FL:14], lấy dữ liệu và làm cho năng động.
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();
}Cách tiếp cận này giữ trung tâm kiểm tra của bạn trong Chỉ thị và cập nhật tự động con trượt khi nội dung thay đổi. Để đạt hiệu suất tốt hơn, hãy xem cách sử dụng chỉ thị SDK với tham số truy vấn để lọc hay sắp xếp các mẫu kiểm tra.
Xem xét khả năng truy cập
Một con trượt riêng biệt đảm bảo mọi người dùng có thể tương tác với các mẫu thử của bạn. Thực hiện khóa bao gồm:
- Đặt trên cái thùng con trượt và (với hậu quả của người đọc màn hình).
- Thêm để điều khiển các nút (v. d., “Tiếp theo là thư kiểm tra kỹ thuật,“ Cơ chế biểu cảm chính xác ”.
- Dùng trên các slide không thấy được.
- Đang tạm dừng việc tự động chơi tự động khi tập trung hay lơ lửng, và cung cấp một nút phát/ thả.
- Định hướng bàn phím: phím mũi tên di chuyển giữa các trang trình chiếu, và tiêu điểm của thẻ được quản lý trong ô điều khiển.
Để lặn sâu, hãy nhắc đến [FLT:] [FAI AA AGGLanceial on Carousls .
Thiết kế có & kiểu trả lời; hỗ trợ cảm xúc
Con trượt thử ra phải hoạt động trên thiết bị di động, máy tính bảng và màn hình nền. Hãy dùng đơn vị tương đối và các thông tin sơ bộ để điều chỉnh việc đệm, kích cỡ phông chữ và bố trí định vị.
@media (max-width: 600px) {
.slide {
padding: 1.25rem;
}
blockquote {
font-size: 0.95rem;
}
.slider-nav button {
width: 10px;
height: 10px;
}
}Để hỗ trợ xúc giác, hãy dùng cơ chế và thính giả sự kiện.
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);
}
}
}Cách tô màu
Để đảm bảo một người dùng có một trải nghiệm mịn, hãy làm theo những hướng dẫn sau:
- LzyGload bất kỳ hình ảnh nào (v. d., ảnh chụp đầu khách) bằng .
- Giới hạn số thao tác của DOT. Khi xây dựng lại con trượt từ dữ liệu của hệ thống ADI, hãy dùng một mảnh tài liệu để tạo ra các slide chèn.
- Người quản lý sự kiện có độ xoay hay giảm dần để tránh đánh bại bố trí.
- Thu nhỏ các phụ thuộc JavaScript — con trượt không cần thiết thư viện nặng hoặc jQuery.
- Dùng cho hoạt hình mịn nếu dùng kênh truyền hình CN.
Để có một cái nhìn trong bộ trình duyệt tối ưu hóa, xem [FLT: 0] hướng dẫn [FLT: 1] để vẽ [FLT: 1].
Hợp nhất với tiến trình xây dựng
Khi dùng Directus làm mục ghi âm không đầu, mã thanh trượt của bạn có thể là một phần của một dự án lớn hơn được xây dựng với một bộ đóng gói như Webpack, Vite, hoặc Parcel. Giữ JavaScript và CN trong tập tin riêng của bạn và nhập chúng vào ứng dụng chính của bạn. Đối với một sắc thái tĩnh hoặc chủ đề WordPres, bạn có thể liên kết trực tiếp mã sau cuộc gọi ADI.
Nếu bạn đang sử dụng Dirrictus JavaScript ), xác thực và lỗi xử lý trở nên đơn giản hơn:
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;
}Cách tiếp cận này cũng cho bạn sự an toàn nếu dùng TypeSSQL.
Kiểm tra con trượt
Sau khi phát triển, thử ra nhiều trình duyệt (Crome, Firefox, Sairi, Edge) và thiết bị. Kiểm tra xem bàn phím có hoạt động không, việc tự động chạy tạm dừng trên màn hình, và con trượt sẽ quay lại một cách duyên dáng khi JavaScript bị tắt. Hãy dùng công cụ định dạng của trình duyệt để mô phỏng tốc độ mạng chậm và xác nhận tải kiểm tra.
Thử nghiệm tự động có thể được thêm vào những công cụ như Cypress hoặc Playwright để đảm bảo sự tương tác vẫn đáng tin cậy khi cơ sở mã hóa.
Kết luận
Xây dựng một thanh trượt tự động bằng JavaScript cho bạn tự do để thiết kế một thiết kế một thành phần độc đáo, dễ truy cập và thực hiện mà tích hợp tự nhiên với Chỉ thị. Bằng cách cấu hình trình điều khiển mã hoá HTML, xếp chữ bằng các thiết bị JavaScript sạch, chạy JavaScript mạnh mẽ, và lấy dữ liệu trực tiếp từ Chỉ đạo, bạn tạo ra một tính năng xây dựng sự tin tưởng với thính giả của bạn. Các kỹ thuật này được bao gồm ở đây — dot định vị, điều khiển mũi tên, khả năng hỗ trợ, khả năng hỗ trợ và hiệu quả để tạo ra nền tảng cho bất kỳ nội dung nào mà bạn cần trong tương lai.