Ang paggawa ng isang nilalamang slider para sa mga testimonya na gumagamit ng JavaScript ay nagbibigay sa iyo ng ganap na kontrol sa disenyo, paggawi, at pagganap. di - tulad ng pre-build plins, isang hand glomer slides na walang - pagbabagong naglalaman ng anumang CMS, pati na ang Directus, at maaaring iangkop upang itugma ang iyong mga brandific na eksaktong mga paliwanag. Ang artikulong ito ay dumaraan sa paglikha ng isang gawang composibleng survigence slider mula sa scurk, na sumasaklaw sa balangkas ng HTML, CSSSScription, JavaScripict logian, mga kontrol, pagtugon, at sa mga impormasyongivitycreachure, pagsasaalang producedence nito, kung paano ito ay mahalaga sa pamamagitan ng –PIP.

Pagpaplano ng HTML Structure

Ang bawat slide ay may pangalan ng kliyente, at opsyonal na metadata gaya ng titulo o logo ng kompanya.

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

Ang bawat slide ay nagbabalot ng elementong para sa semantikong kawastuan at mas mabuting aksesyon. class rate ay nagtatakda kung aling slide ang kasalukuyang nakikita. Ang istrakturang ito ay maaaring maging matigas na quartibament o, mas mabuti, nakalilikha ng dinamikong mula sa data na nakuha sa pamamagitan ng JavaScript.

Pag - aayos sa Slider na may CSS

Tinitiyak ng CSS, modernong CSS na ang slider ay mukhang makinis at mahusay ang pagsasagawa. Gamitin sa lalagyan at kontrolin ang slide na nakikita ng opacity at transisyon.

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

Ang paggamit na may isang klaseng toggle ay simple ngunit kulang ng mga maayos na transaksyon sa pagitan ng mga slide. para sa isang slider ng produksiyon, isaalang-alang ang paggamit ng mga transpormasyon ng CSS o absolutong posisyon upang makamit ang crossfade o slide recessions. Ang nasabing paglapit ay gumaganang mahusay para sa isang minimal setup.

Kabihasnan ng Core JavaScript Functionality

Ang JavaScript engine ay namamahala ng slide bicycling, dotving, at interaksiyon ng gumagamit. starting sa pamamagitan ng pagpili ng mga slide at pag-ficing ng isang index.

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

Para maging mas madaling gamitin, ang kodigong ito ay nagbibigay ng awtomatikong pag - ikot at interaktibong nabigasyon, anupat humihinto sa pag - ikot kapag ang gumagamit ay umaali - aligid sa slider o nakikipag - ugnayan sa mga tuldok.

Pagdaragdag ng mga Unang - Unang Buntot / Susunod na mga Buntot

Inaasahan ng maraming gumagamit nito na ang mga kontrol sa palaso ay manu - manong magkukuwenta ng mga patunay, at magdagdag ng dalawang butones sa loob o labas ng lalagyan.

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

Pag - iwas sa mga Testimonial Mula sa Directus

Sa isang walang ulo na CMS na katulad ng Directus, ang mga datos na pang-produksiyon ay nakaimbak sa isang kalipunan (hal., ) na may mga larangan para sa , , , at insektibong isang imahe. Ginagamit ang Directus JavaScript SDK o kapatagan , at isinasalin ang mga datos nang dynamic.

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

Ang pamamaraang ito ay nagpapanatili sa iyong mga testimonya na sentralisado sa Directus at nagrere- update sa slider na awtomatikong nagbabago kailanma't nagbabago ang nilalaman. Para sa mas mahusay na pagganap, isaalang-alang ang caching the API react o paggamit ng Directus SDK na may mga query para sa pagsasala o mga bertebrasyon.

Mga Pagpapakundangan sa Pagiging Madaling Maluwag

Tinitiyak ng isang tagadulas na hindi ka niya iiwan, gaya ng sinasabi ng mga propesor:

  • Pagtatakda sa lalagyan ng slider at (na may fallback para sa mga nagbabasa ng screen).
  • Dagdag upang kontrolin ang mga buton (e.g., ⁇ Next Prostitusyongisensiya, ⁇ Previous Prostitusyongisensiya).
  • Ginagamit sa mga hindi-defluviable slide.
  • Pag-iisking autoplay sa pokus o habihan, at pagbibigay ng play/pause button.
  • Pag-inog ng keyboard nabigasyon: ang mga tipaan ng palaso ay gumagalaw sa pagitan ng mga slide, at ang tab focus ay napangangasiwaan sa loob ng widget.

Para sa malalim na pagsisid, tumutukoy sa Web Accessibility Tutorials on Carousels.

Responsive Design & Suporta sa Paggalaw

Ang mga testimonial slip ay kailangang gumawa sa mga mobile device, tablet, at desktop. Gamitin ang mga seksiyon ng media para maiayos ang mga pading, font, at ang pagkakaayos ng nabigasyon.

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

Para sa suportang panghipo, ipatupad ang mekanismong swim gamit ang at [pag-unawa][pagsubaybay sa delta at pag-udyok o batay sa direksiyong swill.

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

Paggawa ng Optimisasyon

Upang matiyak ang isang mahusay gumamit, sundin ang mga tuntuning ito:

  • Lazy Glopeload ang anumang imahe (e.g., client headshots) gamit ang .
  • Kapag muling itinatayo ang slider mula sa API data, gumamit ng piraso ng dokumento upang magpasok ng mga slide.
  • Muling kinukumpuni ni Throttle o debounce ang mga humahawak ng pangyayari upang maiwasan ang maayos na pagtaluntad.
  • Minaliit ang JavaScript dependencies – ang slider ay hindi nangangailangan ng jQuery o mabibigat na aklatan.
  • Gamitin ang para sa mga mabusising animasyon kung gumagamit ng CSS transitions.

Para sa isang in ansyardepth tingnan ang browser na salin ng optimisasyon, tingnan ang Gogle Web Fundamentals guide sa pagsasalin.

Paninirahan sa Pamamagitan ng Proseso ng Pagtatayo

Kapag ginagamit ang Directus bilang isang walang ulo na CMS, ang iyong kodigong slideer ay maaaring bahagi ng isang mas malaking proyektong front gloper na ginawa gamit ang isang bunder tulad ng Webpack, Vite, o Parcel. Panatilihin ang iyong JavaScript at CSS sa magkahiwalay na mga file at angkat ang mga ito sa iyong pangunahing aplikasyon. Para sa isang temang static site o WordPress, maaari mong i-in ang code nang direkta pagkatapos ng API call.

Kung ginagamit mo ang Directus JavaScript SDK[, nagiging mas simple ang pag-aaanunsyo at maling paghawak:

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

Ang pamamaraang ito ay nagbibigay rin sa iyo ng uri ng kaligtasan kung gumagamit ka ng TypeScript.

Subukin ang Iyong Dahon

Pagkatapos ng pagbuo, pagsusuri sa maraming browser (Chrome, Firefox, Safari, Edge) at mga aparato. Gamitin ang mga keyboard control, na ang mga makina ay humihinto sa pag - ikot, at na ang slider ay magandang bumabalik kapag ang JavaScript ay may kapansanan. Gamitin ang browser na mga DevToll upang gayahin ang mabagal na takbo ng network at tiyakin na ang mga patotoo ay patuloy na nagdadala.

Ang pagsubok na automated ay maaaring idagdag sa mga kasangkapang katulad ng Cypress o Playwright upang matiyak ang mga interaksiyon ay nananatiling maaasahan habang ang codebase ay nag-evolve.

Pagsasaayos

Ang paggawa ng isang nakaugaliang padulas na pang-edukasyon kasama ng JavaScript ay nagbibigay sa iyo ng kalayaan na magdisenyo ng isang natatangi, madaling makuha, at magtatanghal na sangkap na katutubong nagdurugtong sa Directus. Sa pamamagitan ng pag-sctucting ng HTML semantical, estimulo na may malinis na CS, nagpapatupad ng matipunong JavaScript, at pagkuha ng mga live data mula sa Directus, lumilikha ka ng isang dinamikong tampok na nagpapatibay ng tiwala sa iyong mga manonood. Ang mga pamamaraang sumasaklaw dito – dot nabigasyon, kontrol ng pana, pag-trap, pag-agap, pag-agap, pagkakamit at pagbuo –ang pang-isipan ng anumang nilalamang pang-isipan ng sasakyan sa hinaharap.