แนะนำ UI และการตั้งค่าเบื้องต้นของ Smart Slider 3

Smart Slider 3 Pro เป็น Plugin ที่มีอยู่ในธีม Plant เป็นตัวช่วยให้การสร้างเว็บสนุกและง่ายยิ่งขึ้น เพราะเราสามารถปรับแต่ง จัดวาง เลือกใช้เครื่องมือได้ตามความต้องการ แต่เนื่องจากเครื่องมือของ Smart Slider 3 Pro มีเยอะมาก อีกทั้งการปรับแต่ง ตั้งค่าต่างๆค่อนข้างหลายหลายพอสมควร ดังนั้นบทนี้เราจะเรียนรู้การใช้ปลั๊กอินนี้กัน

หน้าเริ่มต้นของ Smart Slider 3 Pro เป็นแบบนี้ จากนั้นคลิกไปที่ New Slider

จะมีหน้าจอให้เรากรอกดังนี้
Slider Name : ใส่ชื่อของ Slider
Width : ใส่ความยาวของ Slider
Height : ใส่ความกว้างของ Slider
Preset :
สามารถเลือกใช้ตามงานที่เราได้ออกแบบไว้ เราจะพูดถึงรายละเอียดในบทต่อไป แต่หลักๆที่ใช้จะเป็น Default และ Full width
จากนั้นคลิกที่ Create

จากนั้นคลิกที่ New Slide

ระบบจะให้เราเพิ่มรูป

เมื่อเลือกรูปแล้วคลิกที่ เลือก

ในส่วนนี้จะเป็นการปรับแต่งโดยรวมของ Slide ทั้งหมด
ส่วนของ Public จะเป็นส่วนที่บอกถึงวิธีการนำ Slider นี้ไปใช้งาน นำไปประกอบกับหน้าต่างๆที่ต้องการ

หน้า General จะเป็นส่วนที่ใช้ปรับแต่งค่าพื้นฐานของ Slider

Name : เราสามารถตั้งชื่อใหม่ให้ Slider นี้ได้
Control : เป็นส่วนที่ใช้ควบคุมการทำงานต่างๆ ทั้งการ Scoll เม้าส์, การแตะ Slide, การใช้คีย์บอร์ดควบคุม
Thumbnail : รูปตัวอย่างของ Slider
Align : เลือกให้ Slider อยู่ตรงไหนของหน้า ซ้าย, ขวา, ตรงกลาง
Slide background image fill : แต่ละ Slide จะต้องมีรูป Background ในส่วนนี้จะเป็นการกำหนดให้รูปนั้นๆ ส่งผลแบบไหนต่อ Slider โดยรวม มีหลายแบบให้เลือก เราจะพูดถึงในบทต่อไป

Slide Type : กำหนดให้การแสดงผลของแต่ละ Slide เป็นไปในรูปแบบต่างๆ รายละเอียดจะพูดถึงในบทถัดๆไป
Animation Settings
Main animation : เมื่อเราเปลี่ยน Slide ส่วนนี้จะเป็นตัวกำหนดว่าจะแสดงผลในรูปแบบไหน
Main animation properties : สามารถกำหนดความเร็วในการเปลี่ยน Slide, การหน่วงเวลาก่อนเปลี่ยน ได้จากตรงนี้
ฺBackground animation : ส่วนนี้เป็น Animation ของพื้นหลัง รายละเอียดจะพูดถึงในบทถัดๆไป
Ken Burns effects : ……………

หัวข้อ Size
เราสามารถกำหนดขนาดของ Slider โดยรวมทั้งหมดได้ที่นี่

Slider size : เราสามารถกำหนดขนาดของ Slider ได้จากการใส่ความยาว*ความสูงได้ที่นี่
Show on devices : เราสามารถเลือกให้เกิดผลกระทบต่ออุปกรณ์ที่มีขนาดต่างๆได้จากฟังก์ชั่นนี้
Margin : สร้างระยะห่างให้ Slider ทั้งสี่ด้าน
Responsive mode : เลือกให้ Slider แสดงผลแบบ Responsive ในรูปแบบต่างๆ

หัวข้อ Autoplay
เป็นส่วนการกำหนดให้ Slider เริ่มทำงานเมื่อมีการโหลดหน้าเว็บ

Autoplay :
Enabled > เปิดปิดการเริ่ม autoplay slide เอง
Autostart > แสดงผลเมื่อเปิดหน้าเว็บ
Finish autoplay on : สิ้นสุดการเริ่มอัตโนมัติเมื่อเกิด Action ต่างๆเหล่านี้
**เราสามารถใช้ค่าเริ่มต้นการตั้งค่าได้เลย