11. แนะนำ 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 ต่างๆเหล่านี้
**เราสามารถใช้ค่าเริ่มต้นการตั้งค่าได้เลย

หัวข้อ Layer Animations : จะเป็นการตั้งค่าภายในแต่ละ Slide โดยรวมทั้งหมด

หัวข้อ Optimize : แนะนำให้ใช้ค่าเริ่มต้น

หัวข้อ Loading : เป็นการปรับแต่งส่วนของการเริ่มโหลดหน้าเว็บและ Effect ของการโหลด Slider

หัวข้อ Slides : คือการตั้งค่าให้การทำงานของ Slide ให้สามารถสุ่มแสดงผลได้

หัวข้อ Developer : เป็นฟังก์ชั่นเพิ่มเติมที่สามารถกำหนดให้กับ Slider ได้เช่นการไม่ใช้คลิกขวาใน Slide ได้ อีกทั้งยังสามารถเพิ่ม JavaScript ได้

หัวข้อ Arrows : เราสามารถเลือกปุ่มสำหรับการเปลี่ยน Slide ได้จากตรงนี้ อีกทั้งยังสามารถปรับแต่งขนาด, ตำแหน่ง, สี, animation ของปุ่มได้

หัวข้อ Bullets : ฟังชั่นนี้มีไว้เพื่อความสวยงามและไว้ใช้บอกจำนวนของ Slide ได้

หัวข้อ Autoplay (คนละอันกับด้านบน) : เป็นปุ่มที่เราสามารถควบคุมการเล่นของ Slide ได้

หัวข้อ Indicator

หัวข้อ Text Bar 

หัวข้อ Thumbnails

หัวข้อ Shadows 

หัวข้อ Full Screen 

หัวข้อ HTML 

จากนั้นให้คลิกเข้าไปที่ Slide ที่ต้องการ

ในส่วนนี้จะเป็นหน้าในการปรับแต่งรายละเอียดของ Slide หนึ่งๆ

เราสามารถดูการแสดงผลของ Slide ได้จากปุ่มกลางจอนี้
รูปนี้เป็นการแสดงผลแบบ Desktop

รูปนี้เป็นการแสดงผลแบบ Tablet

รูปนี้เป็นการแสดงผลแบบ Mobile 

หากต้องการดูตัวอย่างของ Slide สามารถกดดูที่ปุ่ม Preview

เราสามารถดูได้ก่อนการนำไปใช้จริงได้ที่นี่ทั้ง Desktop, Tablet และ Mobile