สร้าง Carousel ด้วย react-slick

ในบางครั้งเราต้องการสร้าง carousel ในหน้าเว็บแต่ถ้าจะให้เริ่มสร้างตั้งแต่ต้นก็จะใช้เวลาค่อนข้างเยอะซึ่งอาจจะกินเวลาในการทำงานส่วนอื่นๆไปด้วย วันนี้ผมมี lib ที่ใช้สร้าง carousel ง่ายๆมาแนะนำครับ lib ตัวนั้นคือ react-slick ซึ่งใช้งานง่ายมากๆ เราลองไปดูวิธีการติดตั้งและใช้งานกันเลย

Prerequisite

  1. NodeJs
  2. create-react-app
  3. react-slick
  4. slick-carousel

1. Install

  1. สร้าง Project ด้วย create-react-app {Project Name}
  2. ติดตั้ง dependencies โดยใช้คำสั่ง npm install react-slick slick-carousel

2. สร้างหน้า UI

จากรูปเราจะเอา Component Slider จาก react-slick มาใช้พร้อมกับแนบ settings เข้าไปเพื่อนเป็นการ config เบื้องต้นเพื่อนให้ตัว carousel ทำงานตามที่เราต้องการ

ผลลัพธ์

เพื่อนๆสามารถเข้าไปศึกษาเพิ่มเติมได้ที่ https://react-slick.neostack.com/ ขอบคุณครับ

ConvoLab

Pakkawat Suwannasam

Written by

ConvoLab

ConvoLab

Leading Enterprise Chat Management Platform in Thailand

Welcome to a place where words matter. On Medium, smart voices and original ideas take center stage - with no ads in sight. Watch
Follow all the topics you care about, and we’ll deliver the best stories for you to your homepage and inbox. Explore
Get unlimited access to the best stories on Medium — and support writers while you’re at it. Just $5/month. Upgrade