जावास्क्रिप्ट का उपयोग करके प्रशंसापत्र के लिए एक कस्टम सामग्री स्लाइडर का निर्माण आपको डिजाइन, व्यवहार और प्रदर्शन पर पूर्ण नियंत्रण देता है। पूर्व-निर्मित प्लगइन्स के विपरीत, एक हाथ से कोडित स्लाइडर किसी भी CMS के साथ सहज रूप से एकीकृत होता है, जिसमें निर्देश शामिल हैं, और आपके ब्रांड के सटीक विनिर्देशों से मिलान करने के लिए तैयार किया जा सकता है। यह लेख स्क्रैच से उत्पादन-रेडी परीक्षणात्मक स्लाइडर बनाने के माध्यम से चलता है, HTML कंकाल, सीएसएस संक्रमण, जावास्क्रिप्ट लॉजिक, नेविगेशन नियंत्रण, उत्तरदायी विचारों, पहुंच, और - महत्वपूर्ण रूप से - कैसे अपने 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>

प्रत्येक स्लाइड एक तत्व को अर्थात्मक शुद्धता और बेहतर पहुंच के लिए लपेटता है। वर्ग यह निर्धारित करता है कि वर्तमान में स्लाइड दिखाई दे रही है। इस संरचना को हार्ड-कोड किया जा सकता है या बेहतर बनाया जा सकता है, जो जावास्क्रिप्ट के माध्यम से प्राप्त डेटा से गतिशील रूप से उत्पन्न होता है।

सीएसएस के साथ स्लाइडर स्टाइल करना

स्वच्छ, आधुनिक सीएसएस सुनिश्चित करता है कि स्लाइडर पॉलिश दिखता है और अच्छी तरह से प्रदर्शन करता है। कंटेनर पर का उपयोग करें और अस्थिरता और संक्रमण के साथ स्लाइड दृश्यता को नियंत्रित करें।

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

]] का उपयोग करके एक वर्ग टॉगल सरल है लेकिन स्लाइड के बीच चिकनी संक्रमण की कमी है। एक उत्पादन स्लाइडर के लिए, क्रॉसफ़ेड या स्लाइड एनिमेशन प्राप्त करने के लिए सीएसएस रूपांतरण या पूर्ण स्थिति का उपयोग करने पर विचार करें। उपरोक्त दृष्टिकोण न्यूनतम सेटअप के लिए अच्छी तरह से काम करता है।

कोर जावास्क्रिप्ट कार्यक्षमता

जावास्क्रिप्ट इंजन स्लाइड साइकिलिंग, डॉट नेविगेशन और उपयोगकर्ता इंटरेक्शन का प्रबंधन करता है। स्लाइड का चयन करके शुरू करें और एक इंडेक्स को शुरू करें।

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 में, testimonial डेटा को )]] के लिए फ़ील्ड के साथ एक संग्रह (जैसे, [[FLT: 10]]] में संग्रहीत किया जाता है, [[FLT: 12]]], [[FLT: 13]]]], और वैकल्पिक रूप से एक छवि। Directus जावास्क्रिप्ट SDK या सादे [[FLT: 14]] का उपयोग करके, डेटा को गतिशील रूप से पुनः प्राप्त करें और प्रस्तुत करें।

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

यह दृष्टिकोण आपके प्रशंसापत्र को डायरेक्टस में केंद्रीकृत रखता है और जब भी सामग्री में बदलाव आता है तो स्लाइडर को स्वचालित रूप से अपडेट करता है। बेहतर प्रदर्शन के लिए, एपीआई प्रतिक्रिया को पकड़ने या डायरेक्टस एसडीके का उपयोग करने पर विचार करें ताकि परीक्षण को फ़िल्टर या सॉर्ट करने के लिए क्वेरी पैरामीटर हो।

अभिगम्यता विचार

एक समावेशी स्लाइडर यह सुनिश्चित करता है कि सभी उपयोगकर्ता आपके प्रशंसापत्र के साथ बातचीत कर सकते हैं।

  • ]] की स्थापना स्लाइडर कंटेनर पर और (स्क्रीन रीडर के लिए वापसी के साथ)।
  • बटन (जैसे, "अगला प्रेक्षणिक" ("पिछला प्रेवीण परीक्षण") को नियंत्रित करने के लिए जोड़ना।
  • ] का उपयोग गैर-visible स्लाइड पर किया जाता है।
  • फोकस या होवर पर ऑटोप्ले का पीछा करते हुए, और प्ले / प्ले बटन प्रदान करते हैं।
  • कीबोर्ड नेविगेशन को सुनिश्चित करना: तीर कुंजी स्लाइड के बीच चलती है, और टैब फोकस विजेट के भीतर प्रबंधित किया जाता है।

एक गहरी गोता के लिए, ]WAI वेब एक्सेसिबिलिटी ट्यूटोरियल ऑन कारिसल्स का उल्लेख करें।

उत्तरदायी डिजाइन & amp; टच समर्थन

Testimonial स्लाइडर्स मोबाइल उपकरणों, टैबलेट और डेस्कटॉप पर काम करना चाहिए। पैडिंग, फ़ॉन्ट आकार और नेविगेशन लेआउट को समायोजित करने के लिए सापेक्ष इकाइयों और मीडिया प्रश्नों का उपयोग करें।

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

निष्पादन अनुकूलन

एक सहज उपयोगकर्ता अनुभव सुनिश्चित करने के लिए, इन दिशानिर्देशों का पालन करें:

  • Lazy-load any images (जैसे, क्लाइंट हेडशॉट) का उपयोग कर।
  • DOM जोड़तोड़ की संख्या को सीमित करें। जब API डेटा से स्लाइडर को फिर से तैयार किया जाता है, तो बैच डालने वाली स्लाइड्स में एक दस्तावेज़ खंड का उपयोग करें।
  • थ्रेसल या डिबॉन्टल ने लेआउट थ्रेसिंग से बचने के लिए इवेंट हैंडलर का आकार बदल दिया।
  • जावास्क्रिप्ट निर्भरता को कम करें - स्लाइडर को किसी jQuery या भारी पुस्तकालय की आवश्यकता नहीं है।
  • यदि CSS संक्रमण का उपयोग किया जाता है तो चिकनी एनिमेशन के लिए का उपयोग करें।

ब्राउज़र रेंडरिंग अनुकूलन पर गहन नज़र के लिए, ]GOOGLE वेब फंडामेंटल गाइड ऑन रेंडरिंग देखें।

एक निर्माण प्रक्रिया के साथ एकीकृत

जब डायरेक्टस का उपयोग हेडलेस सीएमएस के रूप में करते हैं, तो आपका स्लाइडर कोड एक बड़े फ्रंट-एंड प्रोजेक्ट का हिस्सा हो सकता है जो वेबपैक, वाइट, या पार्सल जैसे बंडलर के साथ बनाया गया है। अपनी जावास्क्रिप्ट और सीएसएस को अलग फ़ाइलों में रखें और उन्हें अपने मुख्य अनुप्रयोग में आयात करें। स्थैतिक साइट या वर्डप्रेस थीम के लिए, आप एपीआई कॉल के बाद सीधे कोड को इनलाइन कर सकते हैं।

यदि आप ]Directus JavaScript SDK का उपयोग कर रहे हैं, तो प्रमाणीकरण और त्रुटि हैंडलिंग सरल हो जाती है:

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

यह दृष्टिकोण आपको टाइपस्क्रिप्ट का उपयोग करने पर भी सुरक्षा प्रदान करता है।

अपने स्लाइडर का परीक्षण

विकास के बाद, एकाधिक ब्राउज़रों (क्रोम, फ़ायरफ़ॉक्स, सफारी, एज) और उपकरणों के पार परीक्षण करें। सत्यापित करें कि कीबोर्ड काम को नियंत्रित करता है, जो स्वचालित रूप से होवर पर ठहराता है, और यह कि जावास्क्रिप्ट अक्षम होने पर स्लाइडर वापस gracefully गिर जाता है। धीमी नेटवर्क गति को अनुकरण करने और उस प्रशंसापत्र को उत्तरोत्तर रूप से लोड करने की पुष्टि करने के लिए ब्राउज़र के देवटूल का उपयोग करें।

स्वचालित परीक्षण को उपकरण जैसे कि सिप्रेस या प्लेराइट के साथ जोड़ा जा सकता है ताकि यह सुनिश्चित किया जा सके कि बातचीत विश्वसनीय रहे क्योंकि कोडबेस विकसित हो।

निष्कर्ष

जावास्क्रिप्ट के साथ एक कस्टम प्रशंसापत्र स्लाइडर का निर्माण आपको एक अद्वितीय, सुलभ और प्रदर्शनकारी घटक को डिजाइन करने की स्वतंत्रता देता है जो देशी रूप से डायरेक्टस के साथ एकीकृत करता है। एचटीएमएल semantically को तैयार करके, स्वच्छ सीएसएस के साथ स्टाइल करना, मजबूत जावास्क्रिप्ट को कार्यान्वित करना और डायरेक्टस से लाइव डेटा प्राप्त करना, आप एक गतिशील सुविधा बनाते हैं जो आपके दर्शकों के साथ विश्वास पैदा करती है। यहां शामिल तकनीकों - डॉट नेविगेशन, तीर नियंत्रण, स्पर्श समर्थन, पहुंच और प्रदर्शन - भविष्य में आपको किसी भी सामग्री कार्स्टल के लिए नींव बनाती है।