JavaScript를 사용하여 Testimonials에 대한 사용자 정의 콘텐츠 슬라이더를 구축하십시오.

JavaScript를 사용하여 평가에 대한 사용자 정의 콘텐츠 슬라이더를 구축하면 디자인, 행동, 성능에 대한 전체 제어를 제공합니다. 사전 제작 플러그인과 달리, 손으로 코딩 슬라이더는 직접 포함 CMS와 완벽하게 통합되며 브랜드의 정확한 사양과 일치하도록 맞춤화 될 수 있습니다. 이 문서는 HTML 골격, CSS 전환, JavaScript 논리, 탐색 제어, 반응성, 실시간 통계 및 API를 통해 생산 ‐ 읽을 수 있는 증언 슬라이더를 만드는 것을 통해 걸어갑니다. 이 문서는 HTML 골격, CSS 전환, JavaScript 논리, 탐색 제어, 반응성, 실시간 통계 및 실시간 통계 분석, API를 통해 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>

각 슬라이드는 세만성 정정과 더 나은 접근성을 위한 요소입니다. 클래스는 슬라이드가 현재 볼 수 있는 결정입니다. 이 구조는 하드 코딩 또는 더 나은, 자바스크립트를 통해 데이터에서 동적으로 생성될 수 있습니다.

CSS를 가진 슬라이더를 스타일링

클린, 현대 CSS는 슬라이더가 광택을 보이고 잘 수행한다. 컨테이너에 ]를 사용하여, 불투명과 전환과 슬라이드 가시성을 제어합니다.

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

class toggle 을 사용하여 는 슬라이드 사이의 부드러운 전환이 간단하지만 부족합니다. CSS를 사용하여 생각하거나 절대 위치가 교차하거나 슬라이드 애니메이션을 달성하는 것을 고려하는 생산 슬라이더. 위의 접근은 최소한의 설정에 잘 작동합니다.

핵심 JavaScript 기능

JavaScript 엔진은 슬라이드 사이클링, 도트 탐색 및 사용자 상호 작용을 관리합니다. 슬라이드를 선택하고 인덱스를 초기화하여 시작하십시오.

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

이 코드는 자동 회전 및 상호 작용하는 점 항법을 제공합니다. 강화된 가용성을 위해, 사용자가 슬라이더를 통해 삽을 하거나 점과 상호 작용할 때 일시적인 autoplay.

이전 / 다음 버튼 추가

많은 사용자는 수동으로 증언을 찾아야 할 화살표 컨트롤을 기대합니다. 컨테이너 내부 또는 외부 두 개의 버튼을 추가하십시오.

<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의 Fetching Testimonials

Directus와 같은 헤드리스 CMS에서, 평가 데이터는 수집 (예를 들어, ]]]])에 저장되어 ], , , 그리고 선택적으로 이미지. 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를 사용하여 쿼리 매개 변수를 필터링하거나 증언을 분류합니다.

접근성 고려 사항

포함 된 슬라이더는 모든 사용자가 당신의 증언과 상호 작용할 수 있도록합니다. 주요 관행에는 다음과 같습니다.

슬라이더 컨테이너에 ] (화면 리더에 대한 fallback)를 설정합니다.
] 버튼을 제어하기 위해 추가 (예: “Next testimonial”, “Previous testimonial”).
]를 비 눈에 띄는 슬라이드에 사용합니다.
초점 또는 hover에 autoplay를 포장하고, 놀이/쉼 단추를 제공하십시오.
키보드 탐색을 관리: 화살표 키 슬라이드 사이 이동, 탭 초점은 위젯 내에서 관리.

딥 다이빙을 위해 ]WAI 웹 접근성 튜토리얼을 Carousels에 참조하세요.

책임 디자인 & 접촉 지원

Testimonial 슬라이더는 모바일 장치, 태블릿 및 데스크톱을 통해 작업해야 합니다. 패딩, 폰트 크기 및 탐색 레이아웃을 조정하는 상대 장치 및 미디어 쿼리를 사용합니다.

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

터치 지원은 ]과 ]] 이벤트 청취를 사용하여 swipe 메커니즘을 구현합니다. 델타를 추적하고 또는 swipe 방향을 기반으로합니다.

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 (e.g., 클라이언트 헤드샷) using .
DOM 조작의 수를 제한하십시오. API 자료에서 슬라이더를 재건할 때, 일괄 삽입 슬라이드에 문서 조각을 사용합니다.
스로틀 또는 debounce는 레이아웃을 피하기 위해 조정 이벤트 핸들러를 크기를 조정합니다.
JavaScript 의존성을 최소화 - 슬라이더는 jQuery 또는 무거운 라이브러리가 필요하지 않습니다.
CSS 전환을 사용하는 경우 ] 매끄러운 애니메이션에 사용됩니다.

브라우저 렌더링 최적화를 통해 심층적 인 모습에 대한 ]]]]를 참조하십시오.

Build Process와 통합

를 사용할 때 의 머리없는 CMS, 당신의 슬라이더 코드는 더 큰 프론트 엔드 프로젝트의 일부가 될 수 있습니다 Webpack, Vite, 또는 Parcel. 유지 자바 스크립트 및 CSS 별도의 파일에 그리고 당신의 주요 응용 프로그램에 가져. 정적 사이트 또는 워드 프레스 테마, 당신은 코드를 직접 API 호출 후.

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

이 접근법은 TypeScript를 사용하시면 안전이 됩니다.

당신의 슬라이더를 테스트

개발 후, 여러 브라우저 (크롬, 파이어 폭스, 사파리, 가장자리) 및 장치에서 테스트. 키보드 제어 작업을 검증, 그 자동 재생은 호버에 일시 중지, 그리고 슬라이더는 자바 스크립트가 비활성화 될 때 다시 우아한 떨어졌다. 브라우저의 DevTools를 사용하여 느린 네트워크 속도를 시뮬레이션하고 그 평가 로드를 신속하게 확인합니다.

자동화된 테스트는 Cypress 또는 Playwright와 같은 도구로 추가 될 수 있습니다. 상호 작용을 보장하기 위해 코드베이스 진화로 신뢰할 수 있습니다.