JavaScript kullanarak referanslar için özel bir içerik kaydırıcısı inşa etmek size tasarım, davranış ve performans üzerinde tam kontrol verir. önceden oluşturulan eklentilerden farklı olarak, bir el kodlanmış kaydırıcısı, Directus dahil olmak üzere herhangi bir CMS ile sorunsuz bir şekilde entegre eder ve doğrudan doğrulanabilir - doğrudan API'si aracılığıyla canlı testimoni verileri nasıl yapılır.

HTML Structure'ı planlama

Bir referans kaydırıcı bir konteyner ve bireysel kaydıraklardan oluşur. Her slayt alıntıyı tutar, müşterinin adı ve bir isim veya şirket logosu gibi isteye ve isteğe bağlı metadata.

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

Her slayt, semantik doğruluk ve daha iyi erişilebilirlik için bir elementi sarmak.TheETHFLT:2) sınıf şu anda görünür olduğunu belirler. Bu yapı, JavaScript aracılığıyla dinamik olarak oluşturulan verilerden daha iyi kodlanabilir.

The Slider with CSS

Temiz, modern CSS kaydırıcının parlatıldığını ve iyi performans gösterdiğini sağlar.Çalışkan ve geçişlerle slayt görünürlüğü kontrol edin.

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

Sınıfla giriş yapmak için [[Dinler arası basit ama slaytlar arasındaki düzgün geçişler eksik.Bir üretim kaydırıcısı için, CSS dönüşümlerini veya slayt animasyonlarını elde etmek için CSS dönüşümlerini veya mutlak konumlandırmayı kullanmayı düşünün. Yukarıdaki yaklaşım en az bir kurulum için iyi çalışır.

Core JavaScript Fonksiyonelity

JavaScript motoru kaydırıcıyı yönetir, navigasyon ve kullanıcı etkileşimi. kaydırakları seçerek başlayın ve bir indeksin başlangı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);

Bu kod otomatik rotasyon ve interaktif dot navigasyon sağlar. Gelişmiş kullanılabilirlik için, kullanıcının kaydırakları üzerinde konuştuğunda veya dotlarla etkileşimler gösterir.

Add Previous / Next Düğmeler

Birçok kullanıcı, ok kontrollerini manuel olarak referansları göz önünde bulundurmayı bekler. konteynerin içinde veya dışında iki düğme ekleyin.

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

Doğrudanus'tan gelen referansları

Directus gibi bir kafasız CMS, referans verileri bir koleksiyonda depolanır (örneğin, 03:11) için alanlar ile [[Üye Olmayanlar için geçerli olan bir görüntüyü kullanarak.

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

Bu yaklaşım, doğrudanus'ta merkezileştirilmiş ve slaytçıyı otomatik olarak içerik değişiklikleri için güncel tutar.Daha iyi performans için, API yanıtını veya Direktus SDK'yı filtre veya sıralama testimonialleri kullanarak kullanarak test parametrelerinizi kullanarak kontrol eder.

Accessability considerations

kapsayıcı bir kaydırıcı, tüm kullanıcıların referansları ile etkileşime geçebilir. Anahtar uygulamalar şunları içerir:

  • SetFLT:16, kaydırıcı konteyner ve [[Dönderler için geri çekilme ile)
  • Etiket: "Ölçeği kontrol etmek" (örneğin, "Sonraki referans", "Önceki referanslar").
  • [FONT=FONT=FONT=FONT=FONT=FONT=FONT=FONT=FONT=FONT=FONT=FONT=FONT=FONT=FONT=FONT=FONT=FONT=FONT=FONT=FONT=FONT=FONT=FONT=FONT=FONT=FONT=FONT=FONT=FONT=FONT=FONT=FONT=FONT=FONT=FONT=FONT=FONT=FONT=FONT=FONT=FONT=FONT=FONT=FONT=FONT=FONT=FONT=FONT=FONT=FONT=FONT=FONT=FONT=FONT=FONT=FONT=FONT=FONT=FONT=FONT=FONT=FONT=FONT=FONT=FONT=FONT=FONT=FONT=FONT=FONT=FONT=FONT=FONT=FONT=FONT=FONT=FONT=FONT=FONT=FONT=FONT=FONT=FONT=FONT=
  • Odaya veya yukarıya otomatik oyun oynamak ve bir oyun / oyun düğmesi sağlamak.
  • Ensuring klavye navigasyon: ok anahtarları kaydıraklar arasında hareket eder ve sekme odak noktası widget içinde yönetilir.

Derin bir dalış için, [[0)WAI Web Erişimsel Yardımlar Otomobillerde [Dönler 1] atıfta bulun.

Sorumluluk Tasarım & Touch Support

Referans kaydırıcıları mobil cihazlar, tabletler ve masaüstüler arasında çalışmalıdır. ⁇ , font büyüklüğü ve navigasyon düzeni ayarlamak için göreceli birimler ve medya sorguları kullanın.

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

Doku desteği için, swipe mekanizması kullanılarak bir sürü mekanizması uygulayın ve [[Döneticileri ve ►D: 9) veya ►FLT:24'i izlemek.

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

Performans Optimizasyonu

Düzgün bir kullanıcı deneyimi sağlamak için, bu yönergeleri takip edin:

  • Lazyload any image (e.g., müşteri kafashots) using ESFLT:26).
  • DOM manipülasyonlarının sayısını sınırlayın. API verilerinden kaydırıldığında, slayt slayt slayt slaytları toplu eklemeye bir belge parçası kullanın.
  • Throttle veya debounce resize event handlers to avoid setting thrashing.
  • JavaScript bağımlılığa bağlı olarak - kaydırıcı jQuery veya ağır kütüphane gerektirmez.
  • CSS geçişlerini kullanarak düzgün animasyonlar için kullanım:UseFLT:27).

Tarayıcı oluşturma optimizasyonuna derinlemesine bir göz atın, bakın.ETHFLT:0)Google Web Temelleri (Dönetici) oluşturma kılavuzuna kılavuzdur.

Bir Build Process ile bütünleşme

Directus'u kafasız bir CMS olarak kullanırken, kaydırıcı kodunuz, Webpack, Vite veya Parcel gibi bir paketle inşa edilen daha büyük bir ön uç projesinin parçası olabilir. JavaScript ve CSS'nizi ayrı dosyalarda tut ve ana uygulamanıza aktarın.For a statik site or WordPress temasınızda, API çağrısından sonra kodu doğrudan doğruya taşıyabilirsiniz.

Eğer siz de bunu kullanıyorsanız:0)Directus JavaScript SDK), kimlik doğrulama ve hata kullanımı daha basit hale gelir:

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

Bu yaklaşım aynı zamanda TypeScript kullanarak size tip güvenlik sağlar.

Diz your Slider

Geliştirmeden sonra, birden fazla tarayıcıda test (Chrome, Firefox, Safari, Edge) ve cihazlar.Bu klavye kontrollerinin işe yaradığını ve slaytçının JavaScript'in devre dışı kaldığı zaman geri çekilmediğini teyit edin.Testaj hızlarını simüle etmek ve bu testimonilerin ilerici yükleri ilerici bir şekilde doğrulayabildiğini teyit etmek.

Otomatik test Cypress veya Playwright gibi araçlar ile kodbase geliştikçe etkileşimlerin güvenilir kalmasını sağlamak için eklenebilir.

Sonuç Sonuç Sonuç Sonuç Sonuç Sonuç Sonuç Sonuç

JavaScript ile özel bir referans slaytçı inşa etmek size seyircinize güvenen eşsiz, erişilebilir ve doğrudanus ile entegre edilen bir bileşen tasarlama özgürlüğü verir. HTML semantically, fashion with Clean, implement strong JavaScript, and bringing live data from Directus, you create a dynamic feature that builds. - dot navigation, ok kontrolleri, touch support, accessibility, and performance - form the basic for any content carousel you may need in the future.