สร้างจุดดึงดูดบนเว็บไซต์ง่าย ๆ ด้วย Slick.js

สร้างจุดดึงดูดบนเว็บไซต์ง่าย ๆ ด้วย Slick.js

แทบปฏิเสธไม่ได้เลยว่าในปัจจุบันเว็บไซต์ส่วนใหญ่ล้วนแต่มี Function หรือ Feature ต่าง ๆ ที่ใช้เพื่อสร้างความสะดวกสบายและความสวยงามเพื่อดึงดูดผู้ใช้งาน และการเลือกใช้ Slider รูปภาพเป็นอีกหนึ่งทางเลือกที่สามารถสร้างความสวยงามและความน่าสนใจให้กับเว็บไซต์แทนที่จะใช้การโชว์รูปธรรมดา ๆ วันนี้เราเลยนำ JQuery ที่สามารถทำ Image Slider ได้ง่าย ๆ มาแนะนำเพื่อน ๆ นั่นก็คือ Slick.js นั่นเอง

Slick.js ทำอะไรได้บ้าง? ต้องบอกก่อนเลยว่า Slick.js เป็น JavaScript Library ที่เขียนง่ายปรับแต่งง่ายและมีหลาย Faeture และที่เด่นสุด ๆ คือ Fully Responsive ที่ทำให้ Developer ไม่ต้องมานั่งทำ Reponsive เองให้เสียเวลา สามารถทำงานได้รวดเร็วและไม่ติดขัดเนื่องจากใช้ CSS3 และยังมีระบบฟิลเตอร์อีกด้วย และที่สำคัญที่สุดสำหรับ Library ตัวนี้ก็คือ เราสามารถใช้มันได้ฟรีนั่นเองง

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 มากันก่อนเลย ( สามารถเข้าไปโหลดได้ที่ kenwheeler.github.io/slick/ ) หลังจากแตกไฟล์ zip แล้วนำ folder slick ไปไว้ในโปรเจคได้เลย

Screen Shot 2562-03-05 at 09.46.26

หลังจากนั้นมาเพิ่ม css ของ slick ลงในโปรเจคของเราใน head ของ html ก่อนเลย

Screen Shot 2562-02-14 at 10.19.37

และเพิ่ม slick.js ก่อนปิด tag body (หลังจากการเพิ่ม JQuery)

Screen Shot 2562-02-14 at 10.24.43

ตอนนี้เราก็พร้อมที่จะใช้ Slick.js กันแล้ว เริ่มต้นจากการ เรียกใช้ function .slick กันก่อนเลย

Screen Shot 2562-02-14 at 10.27.08

ซึ่งเราสามารถตั้งค่าต่าง ๆ ของ Slider ของเราได้ใน JQuery ซึ่งเพื่อน ๆ สามารถเข้าไปดูตัว Demo และตัวอย่างโค้ดในแบบต่าง ๆ รวมถึงการตั้งค่าต่าง ๆ  ได้ในเว็บไซต์ของ Slick โดยตรงเลยครับผม

เห็นไหมว่าการทำ Image Slider ไม่ได้ยากหรือซับซ้อนเหมือนเมื่อก่อนอีกแล้ว การสร้าง Image Slider จะเป็นตัวที่ช่วยดึงดูดผู้ใช้เว็บไซต์ได้อย่างมากแน่นอน เพื่อน ๆ ลองเอา Slick.js ไปใช้งานกันนะครับ

ขอบคุณรูปภาพและข้อมูลจาก kenwheeler.github.io/slick/

G-ABLE พร้อมให้บริการและคำปรึกษาให้ทุกธุรกิจ เพื่อเตรียมความพร้อมขับเคลื่อนองค์กรสู่ยุคดิจิทัล

ติดต่อสอบถามข้อมูลเพิ่มเติมได้ที่

Contact G-Able

02-781-9333 หรือ

inquiry@g-able.com



Top