ในการสร้างเว็บด้วย WordPress นั้น Plugin ประเภท Carousel Slider มักจะเป็น Plugin ที่ถูกติดตั้งใช้งานเสมอ (ไม่ว่าจะในรูปแบบที่มากับ Page Builder เช่น Elementor, Divi หรือ WPBakery Page Builder เป็นต้น หรือจะเป็น Plugin เฉพาะทางไปเลยเช่น Smart Slider 3 หรือ Slider Revolution) นั่นก็คือ Plugin ที่ไว้ใช้ทำ Slider จาก Post, Page, Image หรือ Product โดยแต่ละ Plugin ก็จะมีคุณสมบัติคล้ายๆ กัน ซึ่งถ้าเป็นปลั๊กอินแบบฟรีนั้น ส่วนใหญ่แล้วก็จะมีฟังก์ชั่นการใช้งานที่จำกัด
สำหรับคนที่ยังเข้าใจว่า Plugin คืออะไร สามารถเข้าไปอ่านบทความที่อธิบายเกี่ยวกับ Plugin WordPress ได้ที่นี่ -> Plugin WordPress คืออะไร
บทความนี้เลยอยากจะแนะนำ Plugin สำหรับทำ Slider ที่มีคุณสมบัติที่หาได้ยากและยังฟรีอีกด้วย Plugin ตัวนี้มีชื่อว่า Carousel Slider by Sayful Islam โดยคุณสมบัติที่ว่าหาได้ยากนั่นก็คือการทำ Image Carousel หรือรูปภาพสไลด์นั่นเอง เมื่ออ่านมาถึงจุดนี้ผู้อ่านอาจจะสงสัยว่า เอ๊ะ แล้วมันแปลกตรงไหน เพราะ Page Builder Elementor แบบฟรีก็ทำได้นะ
คุณสมบัติที่ว่าหายากนั่นก็คือการใส่ Link เข้าไปใน Image แบบแยก เช่น ภาพที่ 1 ใส่ Link ไปปลายทาง A, ภาพที่ 2 ใส่ Link ไปปลายทาง B เป็นต้น ซึ่งโดยปกติใน Plugin แบบฟรีจะเป็นการใส่ Link รวม คือทุกภาพจะต้อง Link ไปที่เดียวกัน และการที่จะทำแบบนี้ได้นั้น ส่วนใหญ่แล้วจะต้องเป็น Plugin แบบเสียเงินเท่านั้น ซึ่งถ้าเป็น Elementor ก็จะต้องเป็นเวอร์ชั่น Pro ถึงจะใส่ Link แยกเฉพาะ Image ได้
Plugin ทำ Slider ที่มีคุณสมบัตินี้หาได้ยาก ยิ่งถ้าเป็นเวอร์ชั่นฟรี ยิ่งหายาก จนอาจจะพูดได้ว่า เป็น Plugin แบบฟรีตัวเดียวที่ทำแบบนี้ได้ )
การติดตั้ง
เข้าไปที่ Plugins -> Add New แล้วพิมพ์คำว่า Carousel Slider ที่ช่อง Keyword
Install และ Activate ให้เรียบร้อย
การสร้าง Slider
ในที่นี้จะขอแนะนำการสร้าง Image Carousel (URL) เท่านั้น เพราะเป็นคุณสมบัติที่หาได้ยากใน Plugin แบบฟรี ส่วนการสร้าง Slider แบบอื่นๆนั้นก็จะมีวิธีการไม่แต่กันมากนัก
เข้าไปที่ Carousel Slider -> Add New
ตั้งชื่อ Slider, ที่ Tab Carousel Slider หัวข้อ Slider Type เลือกเป็น Image Carousel (URL)
คลิกที่ Add URLs เพื่อเพิ่ม Image
ที่ Image Carousel – from URL คลิกที่ Add Item
ช่อง URL – ใส่ Link ของ Image
ช่อง Link To URL – ใส่ Link ปลายทาง
จากนั้นให้คลิกที่ไอคอน + เพื่อเพิ่ม Image อันต่อมา ใส่ Linke ของ Image และ Link ปลายทาง, เพิ่ม image จนครบตามที่ต้องการ
จัดลำดับ Image ที่จะแสดงได้ด้วยการคลิกลากที่ไอคอนรูปลูกศร แล้วลากขึ้นลงเพื่อจัดลำดับการแสดงผล
(เพื่อความสวยงามของรูปภาพสไลด์ ภาพที่นำมาลงควรจะมีขนาดเท่ากันทุกภาพ)
เมื่อครบทุกสไลด์แล้ว ให้คลิกที่ปุ่ม Save
ก็จะกลับมาที่หน้าหลักของการสร้าง Slider
ที่ Tab Image Carousel Settings เป็นการตั้งค่าเกี่ยวกับ Image Carousel เช่น ต้องการให้ Show Image Title, Image Caption ด้วยหรือไม่ เมื่อคลิกที่ Image ที่มีการใส่ Link จะให้เปิด Tab Browser ใหม่หรือไม่ และ Show Lightbox Gallery หรือไม่
General Settings เป็นการตั้งค่าอื่นๆ เช่น Carousel Image size เป็นการกำหนดขนาด Image ที่จะแสดงที่หน้าเว็บ ควรตั้งในขนาดที่เหมาะสมกับหน้าเว็บ
- Lazy Loading – เปิดใช้คุณสมบัติ Lazy Loading หรือไม่
- Item Spacing – กำหนดระยะห่างระหว่างสไลด์
- Infinity loop – วนลูปการสไลด์ไม่สิ้นสุดหรือไม่
- Stage Padding – กำหนด Padding Left and Right ของกรอบ Image Slider
- Auto Width – กำหนดความกว้างของรายการตามความกว้างของเนื้อหาหรือไม่ (โดยทั่วไปถ้าเป็น Image จะไม่ใช้คุณสมบัตินี้)
เมนูด้านขวาของหน้าสร้าง Slider
Navigation Settings เป็นการกำหนดคุณสมบัติของตัวนำทางเช่น ลูกศรเลื่อนสไลด์ซ้ายขวา หรือปุ่ม Bullet สำหรับเลือกสไลด์, ขนาดของ Arrow, Bullet, ตำแหน่งของ Arrow, จะให้ Bullet เป็นวงกลมหรือสี่เหลี่ยม กำหนดสีและเวลา Hover ของ Arrow, Bullet
Autoplay Settings เป็นการตั้งค่าการเล่นอัตโนมัติของสไลด์
- AutoPlay – ให้สไลด์เล่นอัตโนมัติหรือไม่
- Pause On Hover – หยุดเล่นสไลด์ชั่วคราว เมื่อเคอร์เซอร์ของเมาส์มาอยู่บนสไลด์
- Autoplay Timeout – ระยะเวลาที่จะเลื่อนสไลด์ต่อไป
- Autoplay Speed – ความเร็วของสไลด์ที่เลื่อน
Responsive Settings – เป็นการตั้งค่าการ Columns ในการแสดงผลในหน้าจอต่างๆเช่น Desktop, Tablet, Mobile
ตั้งค่าให้เหมาะสมกับจำนวนภาพสไลด์และการออกแบบของเว็บนั้นๆ
การนำไปใช้งาน
เมื่อกำหนดค่าทุกอย่างเรียบร้อย ให้คลิกที่ปุ่ม Publish เพื่อบันทึกการเปลี่ยนแปลง
ตัว Slider จะสร้าง Shortcode ขึ้นมา โดยดูได้ที่หน้า All Sliders หรือ เข้าไปที่ Slider นั้นๆ
การนำไปใช้งาน ให้นำ Shortcode นั้นไปใช้ เช่น นำ Shortcode ไปใส่ที่หน้าที่ต้องการ เช่น Edit Elementor หรือหน้า Edit Post ของ WordPress
ข้อสังเกต ในหน้า Edit Elementor เมื่อนำ Shortcode ไปใส่แล้ว ตัว Slider จะไม่โชว์ในหน้า Edit Elementor
แต่เมื่อไปดูที่หน้าเว็บ ตัว Slider ก็จะแสดงผลปกติ
การสร้าง Slide ในแบบอื่นๆ เช่น
- Posts Carousel | ดึง Blog Post มาโชว์เป็นสไลด์
- Product Carousel | ดึง Product มาโชว์เป็นสไลด์
- Hero Carousel | คือการใส่รูปภาพขนาดใหญ่เต็มความกว้างของของหน้าเว็บไซต์ และใส่ข้อความลงไป โดยมากส่วนนี้จะอยู่ที่หน้าแรกส่วนบนสุดถัดลงมาจาก Header
ในส่วนของการใช้งาน Carousel แบบอื่นๆ สามารถเข้าไปดูวิดีโอแนะนำการใช้งานของผู้ผลิตได้ที่ Documentation
