12. การตั้งค่าการแสดงผลของ Smart Slider 3 แบบต่างๆ

ในบทนี้ เราจะพูดถึงการตั้งค่าและการเลือกใช้รูปแบบการแสดงผลของ Smart Slider ชนิดต่างๆ

ไปที่เมนูหลัก > Smart Slider จากนั้นคลิกที่ New Slider (กรอบสีเขียวๆ)

จะมีการตั้งค่าเล็กน้อย ดังนี้
Slider name : ตั้งชื่อของ Slider นี้
Width : ความกว้างของ Slider
Height : ความสูงของ Slider
Preset : เป็นชนิดของการแสดงผล ในส่วนนี้ให้เลือกเป็นแบบ Default ก่อน

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

ด้านในจะมีการตั้งค่าในส่วนของ “วิธีการเติมภาพพื้นหลัง” หรือ “Slide background inage fill”

แบบแรก Fill > จะเป็นการเติมพื้นหลังให้เต็มขนาด จึงทำให้พื้นที่ของ Slider ถูกใช้จนเต็ม

แต่ถ้าหากรูปภาพพื้นหลังมีขนาดที่ไม่พอดีกับขนาดของ Slider จะทำให้ภาพที่ได้มีขนาดที่แปลกไป
ข้อควรระวัง*
ถ้ารูปภาพมีขนาดเล็กกว่าขนาดของ Slider จะทำให้ภาพพิกเซลแตก ไม่สวย แต่รูปจะยังคงสัดส่วนเดิม เพียงแต่ถูกขยายเติมให้มีความกว้างหรือความสูงพอดีกับ Slider เท่านั้น

ต่อไปแบบ Fit > จะเป็นการเติมพื้นหลังให้มีขนาดพอดีกับภาพ

รูปพื้นหลังที่ได้จะมีสัดส่วนพอดีกับ Slider แต่ถ้าขนาดของรูปไม่เท่ากับขนาดของ Slider จะทำให้มีพื้นที่ว่างใน Slider เกิดขึ้น

ต่อไปแบบ Stretch > เป็นการทำให้ภาพพื้นหลังขยายเท่ากับขนาดของ Slider

ข้อเสียของ Stretch คือ ถ้ารูปพื้นหลังมีขนาดไม่เท่ากับขนาดของ Slider จะทำให้สัดส่วนของรูปผิดเพี้ยนได้

ต่อไปแบบ Center > ทำให้รูปพื้นหลังอยู่กึ่งกลาง Slider

แบบ Center นี้จะได้รูปที่ได้สัดส่วน รูปพื้นหลังจะมีขนาดเท่าต้นฉบับและจะมี 2 กรณีที่เกิดขึ้นคือ
1. ถ้ารูปมีขนาดเล็กกว่า Slider จะทำให้มีพื้นที่ว่างภายใน Slider ยิ่งรูปมีขนาดเล็ก พื้นที่ว่างภายในยิ่งมากขึ้น
2. ถ้ารูปมีขนาดใหญ่กว่า Slider จะทำให้รูปพื้นหลังขยายใหญ่ (เนื่องจากมีขนาดเท่าต้นฉบับ)

ต่อไปแบบ Tile > เป็นการเติมส่วนที่ว่างให้เต็มด้วยรูปต้นฉบับเดิม

Slider ที่ได้นั้น ถ้าหากรูปมีขนาดเล็กกว่าขนาดของ Slider จะทำให้พื้นที่ว่างมีการเติมรูปมากขึ้น ยิ่งรูปเล็กมาก ยิ่งมีการเติมเยอะขึ้น
แต่ถ้าหากรูปพื้นหลังมีขนาดใหญ่กว่า Slider จะทำให้เห็นรูปแบบเต็มขนาด และเห็นเฉพาะขนาดของ Slider เท่านั้น แต่รูปพื้นหลังยังคงเรียงต่อกันเช่นเดิม

สุดท้ายแบบ Parallax > รูปพื้นหลังจะฟิกซ์อยู่ด้านหลัง เวลา Scoll เม้าส์จะไม่ขยับตาม

แต่ข้อเสียคือ ถ้ารูปพื้นหลังมีขนาดเล็กกว่าขนาดของ Slider จะทำให้รูปพื้นหลังอยู่ในโหมดของ Fill แต่ยังเกิดผลแบบ Parallax เช่นเดิม

เมื่อลอง scroll เมาส์ลงมาจะเห็นว่ารูปภาพยังอยู่ในตำแหน่งเดิม

 

ต่อไปเราจะพูดถึง Preset ของ Smart Slider 3 Pro ทั้งหมดกัน
โดยที่การตั้งค่าต่างๆจะใช้มาตรฐานร่วมกันคือ
Width : 1200px
Height : 500px

ดังนั้น เมื่อต้องการนำไปใช้ควรเลือกใช้ให้เหมาะสมกับความต้องการและจะมีคำแนะนำในการใช้ Preset แบบต่างๆ เพื่อให้ได้ Slide ที่สมบูรณ์ที่สุด

แบบ Full width : เป็นการแสดงผลหน้าสไลด์แบบเต็มความกว้าง ถึงแม้ว่าเราจะกำหนด Width ไว้แล้วก็ตาม Slider เองจะทำให้แสดงผลเต็มความกว้างของหน้านั้นๆ

คำแนะนำ : ควรตั้งค่าความกว้างให้สอดคล้องกับขนาดของรูปภาพ
ส่วนความสูงของ Slider สามารถปรับแต่งได้ตามความต้องการของผู้ใช้


แบบ Full page : เป็น Slider แบบเต็มหน้าจอนั้นๆ (เมื่อรวมกับ Menu bar) ถึงแม้เราจะตั้งค่าให้ให้ความกว้างและความสูงมีขนาดเท่าไหร่ การแสดงผลก็ยังจะเป็นแบบ Full page เช่นเดิม

ถ้าการตั้งค่าความกว้างและความสูงเล็กกว่าขนาดของรูปภาพ จะทำให้รูปที่ได้โดนตัดครอบ
คำแนะนำ : ควรตั้งค่าให้ความกว้างและความสูงสอดคล้องกับขนาดของรูปภาพ

แบบ Block : จะเป็นลักษณะของกล่องข้อความ ที่กำหนดให้ใส่รูปพื้นหลังได้เพียง 1 รูป เหมาะสำหรับสร้างกล่องข้อความแสดงผลทั่วไป
คำแนะนำ : สามารถปรับรูปแบบการแสดงผลภายในได้ตามความเหมาะสม (ดูการปรับตั้งค่าได้ในช่วงต้นๆของบทเรียน)

แบบ Carousel : เป็นการแสดงผลโดยดึงเอารูปบางส่วนออกมาแสดงผลและจัดเรียงกันไว้ใน Slider
เราสามารถกำหนดจำนวนของรูปที่จะให้ Slider นำออกมาแสดงผลได้ และรูปอื่นๆที่ไม่ถูกแสดงผล จะถูกซ่อนไว้ เมื่อเลื่อนรูปไปถึงจะเลื่อนมาแสดงผล

Bullets จำเป็นกับ Slider ประเภทนี้เพื่อบอกจำนวนของรูปภาพภายใน Slider และเราสามารถกำหนด Bullets ของ Slider ได้หลากหลายอีกด้วย


แบบ Showcase : เป็น Slider คล้ายๆกับ Carousel แต่จะมีลูกเล่นที่โดดเด่นคือ ตัว Slide จะนำเสนอรูปเด่น 1 รูปตรงกลาง และขอบๆของ Slider จะมีรูปบางส่วนโผล่ให้เห็นเพื่อให้รู้สึกว่ามีรูปอื่นๆที่น่าสนใจอยู่ นั่นคือการ Showcase นั่นเอง

หากรูปมีขนาดใหญ่กว่า Slider จะทำให้รูปนั้นๆ ถูกย่อและตัดครอบ เพื่อให้มีพื้นที่ในการแสดงผลรูปบางส่วนตรงขอบของ Slider ได้


แบบ Thumbnail – horizontal : เป็น Slider ที่สามารถเลือกดูรูปอื่นๆได้แบบ Gallery มีรูป Thumbnail เรียงอยู่ใต้รูป Slider หลัก

เหมาะที่จะใช้แสดงผลรูปภาพครั้งละมากๆ สามารถใช้แทน Gallery เริ่มต้นของ WordPress ได้ดี


แบบ Thumbnail – vertical : เป็น Slider ที่สามารถเลือกดูรูปอื่นๆได้แบบ Gallery มีรูป Thumbnail เรียงอยู่ด้านข้างของรูป Slider หลัก

แบบ vertical นี้ เราสามารถเลือกตำแหน่งของรูป Thumbnail ได้ว่า จะให้ชิดขอบ Slider ทางขวา หรือ ทางซ้าย ได้


แบบ Bar : เป็น Slider คล้ายแบบ Default แต่จะมีแถบข้อความแสดงชื่อรูปภาพอยู่ใต้ Slider

ตัวอย่างแบบ Bar


แบบ Horizontal accordion : เป็น Slider แบบพับได้ในแนวนอน มีแถบบอกชื่อรูปที่สามารถเลื่อนพับได้

เหมาะสำหรับแสดงผลรูปที่มีจำนวนไม่มาก เพราะถ้าหากรูปมีจำนวนมากจะทำให้พื้นที่การแสดงผล Slider เล็กลงอีกทั้งยังต้องคำนึงถึงความกว้างของ Slider ด้วย


แบบ Vertical accordion : เป็น Slider แบบพับได้ในแนวตั้ง มีแถบบอกชื่อรูปที่สามารถเลื่อนพับได้

เช่นเดียวกับ Horizontal accordion คือเหมาะสำหรับแสดงผลรูปที่มีจำนวนไม่มาก ดังนั้นความสูงของ Slider จึงมีส่วนสำคัญด้วย


Note : การเลือกใช้ Preset ให้ตรงกับงานที่เหมาะสมจะลดความผิดพลาดในการแสดงผลและทำให้การแสดงผลของ Slider สมบูรณ์แบบยิ่งขึ้น