Menggunakan Javascript untuk Membangun Penggelungsur Kandungan Biasa untuk Uji Coba

Kebangunan sebuah slider konten khusus untuk testimonial menggunakan JavaScript memberikan kontrol penuh atas desain, perilaku, dan kinerja. Tidak seperti plugin pra-bangun, sebuah slider berkode tangan terintegrasi tanpa kejang-kejang dengan CMS, termasuk Directus, dan dapat disesuaikan untuk sesuai dengan spesifikasi pasti merek Anda. Artikel ini berjalan melalui pembuatan ⁇ siap testimonial slider dari awal, meliputi kerangka HTML, transisi CSS, logika JavaScript, kontrol navigasi, pertimbangan responsif, aksesibilitas, dan ⁇ secara krusial ⁇ bagaimana mengambil data testimonial langsung dari Directus melalui REST. API

Perencanaan Kalsel Struktur HTML

Sebuah slider testimonial terdiri dari sebuah wadah dan slide individual. Setiap slide memegang kutipan, nama klien, dan data meta opsional seperti judul atau logo perusahaan.

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

Setiap slide balutan setiap suatu elemen untuk keselarasan semantik dan kebolehcapaian yang lebih baik. Kelas menentukan slide mana yang saat ini dapat dilihat. Struktur ini dapat hard ⁇ coded atau, lebih baik, dihasilkan secara dinamis dari data yang diambil melalui JavaScript.

Memancing Penggelungsur dengan CSS

Clean, CSS modern memastikan slider terlihat dipoles dan tampil dengan baik. Gunakan pada kontainer dan kontrol visibilitas slide dengan kelegapan dan transisi.

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

Menggunakan dengan togol kelas adalah sederhana tetapi kurang transisi lancar antara slide. Untuk slider produksi, pertimbangkan menggunakan CSS transforms atau posisi absolut untuk mencapai crossfade atau animasi slide. Pendekatan di atas bekerja dengan baik untuk setup minimal.

Fungsionalitas JavaScript Inti Ujar

Mesin JavaScript mengelola sepeda slide, navigasi titik, dan interaksi pengguna. Mulai dengan memilih slide dan meminisialisasikan sebuah indeks.

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

Kode ini menyediakan rotasi otomatis dan navigasi titik interaktif. Untuk kemampuan kitarabilitas yang ditingkatkan, jeda autoplay ketika pengguna melayang di atas slider atau berinteraksi dengan titik-titik.

Menjumlahkan Tombol Sebelumnya / Berikutnya

Banyak pengguna mejangkakan kontrol panah untuk secara manual melayari testimonial. Tambahkan dua tombol di dalam atau di luar kontainer.

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

Othernoping Testimonials from Directus

Dalam CMS tanpa kepala seperti Directus, data testimonial disimpan dalam koleksi (misalnya, ) dengan bidang untuk , , , dan secara opsional sebuah gambar. Menggunakan Directus JavaScript SDK atau plain , mengambil dan merender data secara dinamis.

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

Pendekatan ini membuat testimoni anda dipusatkan di Directus dan memperbarui slider secara otomatis kapanpun konten berubah. Untuk kinerja yang lebih baik, pertimbangkan untuk mengecap respon API atau menggunakan Directus SDK dengan parameter pertanyaan untuk menyaring atau mengurutkan testimoni.

Pertimbangan Kebolehcapaian Kebolehcapaian

Penggelunsur inklusif memastikan semua pengguna dapat berinteraksi dengan testimonial anda. Praktik kunci meliputi:

• Efid Sett pada wadah slider dan (dengan fallback untuk pembaca layar).
• Penambahan pada tombol kontrol (misalnya, \"testimonial berikutnya\", \"tesimonial sebelumnya\").
• Namaless menggunakan pada slide yang tidak terlihat.
• Melumpuhkan autoplay pada fokus atau melayang, dan menyediakan tombol main/jeda.
• Memastikan navigasi papan tombol: tombol panah bergerak antara seluncur, dan fokus tab dikelola di dalam widget.

Untuk penyelaman mendalam, mengacu pada WAI Web Accessibility Tutorials on Carousels.

& Sponsif Desain; Dukungan Sentuh

Penggelunsur testimonialis harus bekerja di seluruh perangkat bergerak, tablet, dan desktop. Gunakan unit relatif dan kueri media untuk menyesuaikan pemadatan, ukuran font, dan tata letak navigasi.

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

Untuk dukungan sentuhan quine, laksanakan mekanisme gesek menggunakan dan Pendengar peristiwa.Lacak delta dan pemicu atau berdasarkan arah gesek.

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

Optimasi Kinerja Kinerja

Untuk memastikan pengalaman pengguna yang lancar, ikuti pedoman ini:

• ¡Folf Lazy ⁇ muat gambar apapun (misalnya, headshots klien) menggunakan .
• Batasi jumlah manipulasi DOM. Ketika membangun kembali slider dari data API, gunakan fragmen dokumen untuk memasukkan slide.
• \"Hawnut Throttle\" atau mencoret pengendali acara untuk menghindari tata letak thrashing.
• Minimalkan dependensi JavaScript ⁇ slider tidak memerlukan jQuery atau pustaka berat.
• Use untuk animasi lancar jika menggunakan transisi CSS.

Untuk sebuah in ⁇ depth lihat pada optimasi renderisasi peramban, lihat Google Panduan Web Fundamentals pada render.

Mengkagumasikan dengan Proses Pembangunan

Ketika menggunakan Directus sebagai CMS tanpa kepala, kode slider Anda mungkin merupakan bagian dari proyek front ⁇ end yang lebih besar yang dibangun dengan bundler seperti Webpack, Vite, atau Parcel. Simpan JavaScript dan CSS Anda dalam berkas terpisah dan impornya ke dalam aplikasi utama Anda. Untuk sebuah situs statis atau tema WordPress, Anda dapat mengantri kode langsung setelah panggilan API.

Jika Anda menggunakan Directus JavaScript SDK, otentikasi dan penanganan kesalahan menjadi lebih sederhana:

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

Pendekatan ini juga memberikan ketik keselamatan jika menggunakan TypeScript.

Pengujian Slider Anda

Setelah pengembangan, uji coba melintasi multiple browser (Chrome, Firefox, Safari, Edge) dan perangkat. Pastikan bahwa keyboard mengontrol kerja, bahwa jeda autoplay pada hover, dan bahwa slider jatuh kembali dengan anggun ketika JavaScript dinonaktifkan. Gunakan DevTools peramban untuk mensimulasikan kecepatan jaringan yang lambat dan mengkonfirmasi bahwa testimonial memuat secara progresif.

Pengujian yang diautomated dapat ditambahkan dengan alat-alat seperti Cypress atau Playwright untuk memastikan interaksi tetap dapat diandalkan seiring berkembangnya codebase.

Kekecualian Kesimpulan

Membina sebuah panel uji coba yang khusus dengan JavaScript memberikan Anda kebebasan untuk merancang komponen unik, mudah diakses, dan performa yang terintegrasi secara native dengan Directus. Dengan menyusun HTML secara semantik, berkilat dengan CSS bersih, menerapkan JavaScript yang kuat, dan mengambil data langsung dari Directus, Anda membuat fitur dinamis yang membangun kepercayaan dengan penonton Anda. Teknik yang dicakup disini ⁇ navigasi titik, kontrol panah, dukungan sentuh, aksesibilitas, dan kinerja ⁇ membentuk fondasi untuk karousel konten apapun yang mungkin Anda butuhkan di masa depan.