การตั้งค่าการแสดงผลของ 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 สมบูรณ์แบบยิ่งขึ้น