استفاده از جاوا اسکریپت برای ساخت یک اسلایدر محتوای سفارشی برای Testimonials

ساخت یک نوار لغزنده محتوا سفارشی برای توصیف با استفاده از جاوا اسکریپت به شما کنترل کامل بر طراحی، رفتار و عملکرد را می دهد. برخلاف پلاگین های قبل از ساخت، یک اسلایدر دستی با هر CMS ادغام می شود، از جمله Directus، و می تواند متناسب با مشخصات دقیق برند شما باشد.این مقاله از طریق ایجاد یک تست آماده تولید از نوار لغزنده، پوشش دادن مشخصات HTML، سرعت هدایت، کنترل های هدایت کننده و کنترل های حیاتی آن - پردازش اطلاعات دقیق REST، پردازش می کند.

برنامه ریزی ساختار 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] را برای تصحیح معنایی و دسترسی بهتر تنظیم می کند. کلاس تعیین می کند که اسلاید در حال حاضر قابل مشاهده است.این ساختار می تواند به سختی کد گذاری شده یا بهتر باشد، به طور پویا از داده های گرفته شده از طریق جاوا اسکریپت تولید شده است.

دانلود بازی Styling The Slider با CSS

CSS تمیز و مدرن تضمین می کند که لغزنده به نظر می رسد جلا داده شده و به خوبی اجرا می شود.استفاده از در ظرف و کنترل دید اسلاید با opacity و انتقال.

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

استفاده از با یک کلاس به طور ساده است، اما فاقد انتقال صاف بین اسلاید ها است.برای یک اسلایدر تولید، با استفاده از CSS تبدیل یا موقعیت مطلق برای دستیابی به انیمیشن های متقابل یا اسلاید، رویکرد بالا به خوبی برای یک تنظیم حداقل کار می کند.

قابلیت های Core JavaScript

موتور جاوا اسکریپت دوچرخه سواری، ناوبری dot و تعامل کاربر را مدیریت می کند.با انتخاب اسلاید ها و شروع به ثبت نام یک شاخص.

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

این کد چرخش اتوماتیک و ناوبری dot تعاملی را برای قابلیت های پیشرفته فراهم می کند، هنگامی که کاربر بر روی اسلایدر شناور است یا با نقاط تعامل می کند، متوقف خودکار بازی زمانی که کاربر بر روی اسلایدر حرکت می کند.

اضافه کردن دکمه های قبلی / Next Buttons

بسیاری از کاربران انتظار دارند که کنترل های فلش به صورت دستی بررسی شوند و دو دکمه را در داخل یا خارج از ظرف اضافه کنند.

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

تست های Fetching از Directus

در یک CMS بدون سر مانند Directus، داده های تجربی در یک مجموعه ذخیره می شود (به عنوان مثال، با زمینه هایی برای [FLT 11:]، ، [FLT13] و به طور اختیاری یک تصویر با استفاده از Directus JavaScript SDK یا ساده ، و بازیابی داده های پویا.

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 با پارامترهای پرس و جو برای فیلتر یا مرتب کردن توصیف ها استفاده کنید.

نظرات دسترسی

یک اسلایدر فراگیر تضمین می کند که همه کاربران می توانند با توصیفات شما ارتباط برقرار کنند.

• در این میان، در این میان، [[رده:رده:رده:رده:رده:رده:]] و [[رده:رده:رده:رده:رده:رده:رده:رده:رده:رده:رده:رده:رده:رده:رده:رده:رده:رده:رده:رده:رده:رده:رده:رده:رده:رده:رده:رده:رده:رده:رده:رده:رده:رده:رده:رده:رده:رده:رده ها!
• اضافه کردن دکمه های کنترل (به عنوان مثال، "آزمون بعدی"، "آزمون قبلی"
• استفاده از [[FLT 19]] در اسلاید های غیر قابل مشاهده
• استفاده از Autoplay بر روی فوکوس یا شناور و ارائه یک دکمه بازی / یائسگی.
• ناوبری صفحه کلید: کلید های فلش بین اسلاید ها حرکت می کنند و تمرکز زبانه در داخل ویجت مدیریت می شود.

در این میان، به |WAI Web Accessibility» اشاره کنید که در Carousels آموزش می دهد.

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

اگر از آن استفاده کنید، از آن استفاده کنید: (۰) ریدایرکتس اسکریپت 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;
}

این رویکرد همچنین به شما ایمنی نوع را در صورت استفاده از TypeScript می دهد.

تست اسلایدر شما

پس از توسعه، تست در مرورگرهای متعدد (Chrome، فایرفاکس، Safari، Edge) و دستگاه ها. تأیید کنید که صفحه کلید کار را کنترل می کند، که Autoplay مکث در هواور، و اینکه لغزنده به طور ماهرانه هنگامی که جاوا اسکریپت غیرفعال است، استفاده از دیوTools مرورگر برای شبیه سازی سرعت شبکه آهسته و تایید آن توصیفات به طور مداوم.

تست خودکار را می توان با ابزارهایی مانند Cypress یا Playwright اضافه کرد تا اطمینان حاصل شود که تعاملات به عنوان کد پایه قابل اعتماد باقی می مانند.

نتیجه گیری

ساخت یک نوار لغزنده آزمون سفارشی با جاوا اسکریپت به شما آزادی طراحی یک عنصر منحصر به فرد، قابل دسترس و اجرا کننده را می دهد که به طور بومی با Directus ادغام می شود. با ساختار HTML به طور معنایی، با CSS تمیز، پیاده سازی جاوا اسکریپت قوی، و جمع آوری داده های زنده از Directus، شما یک ویژگی پویا ایجاد می کنید که اعتماد با تکنیک های پوشش داده شده در اینجا ایجاد می کند - ناوبری، دسترسی به شما نیاز دارد، و پشتیبانی از عملکرد کاربر - و دسترسی به شما ممکن است.