Swiper Carousel

Reusable carousel component รองรับ image slides, custom content (renderSlide), และ free-form children — ติดตั้ง: pnpm add swiper

Reusable Components

Copy ทั้ง 4 ไฟล์ไปวางในโปรเจค (types → components) — ใช้ได้ทันที ปรับ config ผ่าน props

Type Definitions — swiper.type.ts

Type สำหรับ SwiperCarousel และ ThumbnailGallery — copy ไปวางที่ types/ ก่อนใช้ component

SwiperCarousel — Component

Reusable carousel component รองรับ 3 mode: image slides, renderSlide (custom content), children (free-form) — auto-resolve Swiper modules จาก props

SwiperThumbnailGallery — Component

Thumbnail gallery — 2 Swiper sync กัน (main + thumbs), click thumbnail เพื่อเลือก slide

AtmosphereCarousel — Component

Coverflow 3D carousel สำเร็จรูป — ส่งแค่ images array, effect ทั้งหมดจัดการให้ (auto loop เมื่อ >= 5 slides)

Props Reference

อธิบาย props ทุกตัว — กำหนดขนาด, behavior, effect ผ่าน props

Sizing Tips — วิธีควบคุมขนาด

Swiper ใช้ 100% width ของ parent เสมอ — ต้องครอบ container กำหนด max-width หรือใช้ slideClassName กำหนดขนาด slide

{/* ❌ ไม่กำหนดขนาด — เต็มจอ */}
<SwiperCarousel slides={slides} navigation />

{/* ✅ กำหนด container width */}
<div className="mx-auto max-w-2xl">
  <SwiperCarousel slides={slides} navigation slideClassName="aspect-video" />
</div>

{/* ✅ slidesPerView="auto" — ต้องกำหนด width ใน slideClassName */}
<SwiperCarousel
  slides={slides}
  slidesPerView="auto"
  centeredSlides
  slideClassName="w-[280px] h-[200px] rounded-xl"
/>

{/* ✅ Responsive breakpoints */}
<SwiperCarousel
  slides={slides}
  slidesPerView={1}
  spaceBetween={16}
  breakpoints={{
    640: { slidesPerView: 2 },
    1024: { slidesPerView: 3 },
  }}
  slideClassName="aspect-video"
/>

SwiperCarousel Props

Data (เลือก 1 ใน 3 mode)

Prop	Type	Default	Description
`slides`	`T[]`	`—`	Array ข้อมูล slide — ถ้าไม่มี renderSlide จะ render <Image> อัตโนมัติ (T default = CarouselSlide)
`renderSlide`	`(item: T, index: number) => ReactNode`	`—`	Custom render function — ใส่ Card, div, component อะไรก็ได้
`children`	`ReactNode`	`—`	Free-form mode — แต่ละ child element = 1 slide

Effect

Prop	Type	Default	Description
`effect`	`'slide' \| 'fade' \| 'coverflow'`	`'slide'`	Transition effect — 'slide' (default เลื่อน), 'fade' (จางหาย), 'coverflow' (3D perspective)
`coverflowEffect`	`{ rotate, stretch, depth, modifier, slideShadows }`	`{ rotate: 20, depth: 250, ... }`	Config สำหรับ coverflow — ใช้ได้เฉพาะเมื่อ effect='coverflow'

Behavior

Prop	Type	Default	Description
`autoplay`	`boolean \| { delay, disableOnInteraction }`	`false`	เปิด autoplay — true = delay 3000ms, หรือกำหนด { delay: 1800 } เอง
`loop`	`boolean`	`false`	วน loop ไม่สิ้นสุด — slide สุดท้ายต่อ slide แรก
`grabCursor`	`boolean`	`true`	เปลี่ยน cursor เป็น grab เมื่อ hover — บอก user ว่าลากได้
`centeredSlides`	`boolean`	`false`	Active slide อยู่ตรงกลาง — ใช้คู่กับ slidesPerView > 1 หรือ "auto"
`speed`	`number`	`300`	ความเร็ว transition (ms)

Layout

Prop	Type	Default	Description
`slidesPerView`	`number \| 'auto'`	`1`	จำนวน slide ที่เห็นพร้อมกัน — 'auto' = ขนาดตาม content, ต้องกำหนด width ใน slideClassName
`spaceBetween`	`number`	`0`	ช่องว่างระหว่าง slide (px)
`breakpoints`	`SwiperOptions['breakpoints']`	`—`	Responsive config — เช่น { 768: { slidesPerView: 2 }, 1024: { slidesPerView: 3 } }

Modules

Prop	Type	Default	Description
`navigation`	`boolean`	`false`	แสดงลูกศร prev/next — auto import Navigation module
`pagination`	`boolean`	`false`	แสดง dots ด้านล่าง (clickable) — auto import Pagination module

Styling

Prop	Type	Default	Description
`className`	`string`	`—`	Class สำหรับ Swiper container — กำหนด max-width, padding
`slideClassName`	`string`	`—`	Class สำหรับแต่ละ slide — กำหนดขนาด เช่น "aspect-video", "w-[280px] h-[200px]"

Image (เฉพาะ default image mode)

Prop	Type	Default	Description
`imageSizes`	`string`	`'(max-width: 768px) 100vw, 50vw'`	next/image sizes — บอก browser ว่ารูปจะใหญ่แค่ไหนในแต่ละ breakpoint
`imagePriority`	`boolean`	`false`	Priority load สำหรับ slide แรก — ใช้เมื่อ carousel อยู่ above-the-fold

SwiperThumbnailGallery Props

Prop	Type	Default	Description
`slides`	`CarouselSlide[]`	`(required)`	Array ของ { src, alt } สำหรับรูปภาพ
`thumbsPerView`	`number`	`4`	จำนวน thumbnail ที่เห็นพร้อมกัน
`loop`	`boolean`	`false`	วน loop
`className`	`string`	`—`	Class สำหรับ container ทั้งหมด
`thumbClassName`	`string`	`—`	Class สำหรับ thumbnail swiper
`imageSizes`	`string`	`'(max-width: 768px) 100vw, 60vw'`	next/image sizes สำหรับรูปหลัก

Live Demos

แต่ละ variant ใช้ SwiperCarousel ตัวเดียว เปลี่ยนแค่ props

Basic Carousel — Usage

Carousel พื้นฐาน — navigation arrows, pagination dots, autoplay loop

Slide 1

Slide 2

Slide 3

Slide 4

Slide 5

Slide 6

AtmosphereCarousel — Usage

Coverflow 3D effect — slide ตรงกลางใหญ่ ข้างๆ เอียง+เล็กลง, เหมาะสำหรับ gallery, portfolio, atmosphere section

Card Carousel — Usage

Card carousel แบบเห็น card ข้างๆ — ใช้ renderSlide สำหรับ custom content

💳

Payment

Stripe & Omise integration

🔌

Socket.io

Real-time communication

🎨

Tailwind

Design tokens & theming

🔐

NextAuth

Authentication patterns

📝

Forms

react-hook-form + zod

✨

Animation

Framer Motion showcase

Thumbnail Gallery — Usage

Gallery แบบมี thumbnail — click thumbnail เพื่อเลือก slide, navigation arrows บน main

Children Mode — Usage

ใส่ content อะไรก็ได้เป็น slide — แต่ละ child element = 1 slide

Welcome

Features

Get Started