자동 재생 + 드래그·스와이프 + 화살표·점 인디케이터를 갖춘 후기 캐러셀.
한 줄 요약
후기를 한 장씩 보여주는 자동 재생 캐러셀 호버/탭 숨김 시 정지, 드래그스와이프 스냅, 화살표점 네비, 진행 게이지까지.
신뢰를 주는 사회적 증거를 한 영역에 모아 보여주고 싶을 때 랜딩의 고객 후기/리뷰 섹션.
단일 RAF 루프로 진행 게이지를 채우고 끝에서 다음으로 넘긴다.
호버포커스document.hidden을 하나의 정지 플래그로 모은다.
Pointer 드래그로 가장 가까운 슬라이드에 스냅한다.
화살표점키보드 /와 ARIA role=slide를 둔다.
자동재생 중 SR 스팸을 막으려면 정지 시에만 알린다.
가로 스와이프 중에도 세로 페이지 스크롤은 허용한다.
prefers-reduced-motion이면 자동재생을 끈다.
랜딩 고객 후기 섹션
제품/서비스 리뷰 모음
import type { Metadata } from "next";
import { TestimonialCarouselDemo } from "./-components/TestimonialCarouselDemo";
export const metadata: Metadata = {
title: "고객 후기 캐러셀 섹션 (데모)",
description:
"자동 재생·호버 정지·드래그 스와이프·점 인디케이터를 갖춘 고객 후기 캐러셀 섹션. Pointer Events 기반 스냅 + 접근성(role=slide, ←/→ 키보드).",
robots: { index: false, follow: false },
};
export default function Page() {
return (
<main className="flex min-h-[100dvh] items-center justify-center bg-gradient-to-br from-slate-50 via-white to-violet-50/50">
<TestimonialCarouselDemo />
</main>
);
}