มารู้จัก SLICK.JS
Slick.js เป็น JavaScript Library ที่ไว้ทำ Banner Slide หรือ Gallery Slide ที่ไม่ต้องยุ่งยาก เสียเวลา มีฟีเจอร์ให้ใช้มากมาย สามารถทำได้ง่ายๆ และเป็น Library
ที่ใช้ CSS 3 ทำให้มีความใหม่และทันสมัยมากยิ่งขึ้นและที่โดดเด่นมากๆคือ ทำให้นักพัฒนาหลายคนชื่นชอบ เนื่องจากลดเวลาการทำงานไปได้อย่างมากเลยทีเดียว คือ Fully Responsive ที่ทำให้ Developer ไม่ต้องมานั่งทำ Responsive เองที่สำคัญใช้งานฟรี
Slick.js Features
- เป็น Fully Responsive โดยจะสเกลจากขนาดของ Container แต่ก็สามารถเข้าไปเซ็ตการต้้งค่าในแต่ละ Resolution breakpoint ได้เช่นกัน
- ใช้ CSS3 (ในกรณีที่ browser รองรับ)
- สามารถเปิดระบบ Swipe หรือ Mouse dragging ได้
- มีระบบ Infinite Loop
- มี Navigation ให้เลือกทั้งแบบ Arrows และ Dots
- ระบบ Filtered และ Unfiltered ที่หาได้ยากบน JavaScript Slider Library
เริ่มต้นการใช้งานกันเลย !
ก่อนอื่นเราต้องโหลดไฟล์ Library ของ Slick.js มากันก่อน หลังจากแตกไฟล์ zip แล้วนำ folder slick ไปไว้ในโปรเจคได้เลย หลังจากนั้นมาเพิ่ม css ของ slick ลงในโปรเจคของเราใน head ของ html
เพิ่ม slick.js ก่อนปิด tag body (หลังจากการเพิ่ม JQuery)
พร้อมใช้งาน Slick.js เริ่มต้นจากการ เรียกใช้ function .slick
ซึ่งเราสามารถตั้งค่าต่าง ๆ ของ Slider ของเราได้ใน JQuery ซึ่งเพื่อน ๆ สามารถเข้าไปดูตัว Demo และตัวอย่างโค้ดในแบบต่าง ๆ รวมถึงการตั้งค่าต่าง ๆ ได้ในเว็บไซต์ของ Slick โดยตรงเลย