# วิธีทำสไลด์รูป/แกลเลอรี (Image Slider) พร้อมคำบรรยาย ในบทความ Blogger บางเรื่องเล่าด้วยภาพหลายรูปได้ดีกว่าข้อความ แต่การวางรูปเรียงกันยาว ๆ ทำให้บทความยืดและเลื่อนนาน สไลด์รูป/แกลเลอรีแก้ปัญหานี้ด้วยการรวมหลายภาพไว้ในพื้นที่เดียวที่เลื่อนดูได้ บทความนี้สอนวิธีเพิ่มในธีม Blogger ด้วย BlogKub พร้อมคำบรรยาย ปุ่มเลื่อน จุดบอกตำแหน่ง และรองรับการปัดบนมือถือ *อัปเดต 16 กรกฎาคม 2026 · อ่านประมาณ 9 นาที · ระดับ: เริ่มต้น* > **สรุปสั้น:** เพิ่มบล็อก **สไลด์รูป/แกลเลอรี** ใน BlogKub แล้ว Export XML ไปอัปโหลด Blogger จากนั้นในโพสต์ (มุมมอง HTML) วาง `
` ที่มีหลาย `
` แต่ละอันมี `` และ `
` ระบบจะเติม **ปุ่มเลื่อน จุดบอกตำแหน่ง และรองรับการปัด (scroll-snap)** ให้อัตโนมัติ ประหยัดพื้นที่และเล่าเรื่องด้วยภาพได้สวยงาม ![สไลด์รูป/แกลเลอรีในบทความ Blogger พร้อมปุ่มเลื่อนก่อนหน้า/ถัดไป จุดบอกตำแหน่ง และคำบรรยายใต้ภาพ](https://www.blogkub.com/learn/images/slider.png) *สไลด์รูปเลื่อนได้พร้อมปุ่มก่อนหน้า/ถัดไป จุดบอกตำแหน่ง และคำบรรยายใต้ภาพบนแถบไล่เฉด* ## สไลด์รูป/แกลเลอรีคืออะไร และแก้ปัญหาอะไร **สไลด์รูป (Image Slider) คือกล่องแสดงรูปหลายภาพในพื้นที่เดียว โดยแสดงทีละภาพและให้ผู้อ่านเลื่อนดูภาพถัดไปได้ด้วยปุ่ม การปัด หรือแตะจุดบอกตำแหน่ง** แทนที่จะวางรูป 6-7 ภาพเรียงต่อกันจนบทความยาวเป็นหางว่าว สไลด์รวมทั้งหมดไว้ในกรอบเดียวที่กะทัดรัด ผู้อ่านที่สนใจก็เลื่อนดูครบทุกภาพ ส่วนคนที่ไม่สนใจก็เลื่อนผ่านได้เร็ว นี่คือการแก้ปัญหาการจัดพื้นที่ในบทความที่มีภาพเยอะ เช่น รีวิวที่พักที่อยากโชว์หลายมุม หรือบทความท่องเที่ยวที่มีภาพสวยหลายภาพของสถานที่เดียว การใช้สไลด์ทำให้เนื้อหากระชับ อ่านลื่น และดูเป็นระเบียบ ในขณะที่ยังนำเสนอภาพได้ครบถ้วน ## สไลด์ของ BlogKub ทำงานอย่างไร เมื่อเพิ่มบล็อกนี้ ระบบจะฝังสไตล์และสคริปต์ของสไลด์ในธีม เวลาคุณวางโครงสร้างสไลด์ในโพสต์ ระบบจะทำให้มันใช้งานได้เต็มรูปแบบด้วยองค์ประกอบเหล่านี้ - **การเลื่อนแบบ scroll-snap:** รูปแต่ละภาพ “ดีด” เข้าตำแหน่งพอดีเมื่อเลื่อน ทำให้ไม่ค้างครึ่ง ๆ กลาง ๆ และปัดบนมือถือได้ลื่น - **ปุ่มก่อนหน้า/ถัดไป:** ปุ่มกลมสองข้างสำหรับผู้ใช้เดสก์ท็อปที่ต้องการเลื่อนด้วยการคลิก - **จุดบอกตำแหน่ง (dots):** จุดด้านล่างบอกว่ากำลังดูภาพที่เท่าไรจากทั้งหมด และแตะเพื่อกระโดดไปภาพนั้นได้ จุดของภาพปัจจุบันจะยืดเป็นแถบให้เห็นชัด - **คำบรรยายใต้ภาพ:** ข้อความใน figcaption แสดงทับด้านล่างของรูปบนแถบไล่เฉดมืด อ่านง่ายโดยไม่บังภาพหลัก ทั้งหมดนี้ทำงานร่วมกันโดยที่คุณเพียงวางโครงสร้าง HTML ง่าย ๆ ระบบจัดการส่วนโต้ตอบให้เอง ## วิธีเพิ่มและใช้สไลด์รูปทีละขั้น 1. **เพิ่มบล็อกสไลด์รูป** เปิดคลังบล็อกด้านซ้าย หมวด “บทความ & UX” แล้วลากบล็อก “สไลด์รูป/แกลเลอรี” เข้ามา เพื่อฝังสไตล์และสคริปต์สไลด์ในธีม 2. **Export XML และอัปโหลด** กด Export แล้วนำไฟล์ไปที่ blogger.com → ธีม → เมนูสามจุด → กู้คืน/สำรอง → เลือกไฟล์ XML 3. **วางสไลด์ในโพสต์** ในมุมมอง HTML วาง `
` แล้วใส่หลาย `
คำบรรยาย
` เรียงกันตามจำนวนภาพที่ต้องการ 4. **ทดสอบการเลื่อน** เปิดบทความจริง กดปุ่มก่อนหน้า/ถัดไป แตะจุดบอกตำแหน่ง และลองปัดบนมือถือ เพื่อยืนยันว่าเลื่อนได้ลื่นและคำบรรยายแสดงถูกต้อง เคล็ดลับ: ใช้รูปที่มีอัตราส่วนใกล้เคียงกัน (เช่น 16:10 ทั้งหมด) เพื่อให้สไลด์ดูเรียบร้อย ระบบตั้งอัตราส่วนภาพให้สม่ำเสมออยู่แล้ว แต่รูปต้นฉบับที่สัดส่วนใกล้กันจะถูกครอบน้อยที่สุด ## คำบรรยาย: เพิ่มบริบทให้ภาพ ภาพที่มีคำบรรยายมีพลังมากกว่าภาพเปล่า เพราะคำบรรยายบอกผู้อ่านว่ากำลังดูอะไร ที่ไหน หรือมีอะไรน่าสนใจ ในสไลด์ของ BlogKub คำบรรยายวางทับด้านล่างของภาพบนแถบไล่เฉดจากโปร่งใสไปมืด ทำให้ตัวอักษรสีขาวอ่านออกชัดไม่ว่าภาพด้านหลังจะสว่างหรือมืด นอกจากช่วยผู้อ่าน คำบรรยายและ alt ของภาพยังดีต่อการเข้าถึงและ SEO ของรูปด้วย เมื่อคุณอธิบายภาพอย่างมีความหมาย ทั้งผู้ใช้โปรแกรมอ่านหน้าจอและเครื่องมือค้นหารูปภาพก็เข้าใจเนื้อหาได้ดีขึ้น หากคุณสนใจเรื่องการทำให้รูปภาพถูกค้นพบ ลองอ่านแนวทางการทำภาพให้ Google แสดงผลใน[คู่มือ Lightbox](https://www.blogkub.com/learn/lightbox)ประกอบ เพราะทั้งสองเกี่ยวกับการนำเสนอภาพในบทความ ## สไลด์ vs Lightbox: ใช้ร่วมกันได้ ผู้อ่านหลายคนสงสัยว่าสไลด์กับ[Lightbox](https://www.blogkub.com/learn/lightbox)ต่างกันอย่างไร คำตอบคือทั้งสองทำคนละหน้าที่และเสริมกันได้ - **สไลด์ (Slider):** รวมหลายภาพในพื้นที่เดียวในเนื้อหา ให้เลื่อนดูทีละภาพ เหมาะกับการนำเสนอชุดภาพอย่างกระชับ - **Lightbox:** คลิกรูปเพื่อขยายเต็มจอบนพื้นหลังมืด เหมาะเมื่อผู้อ่านอยากดูรายละเอียดของภาพใดภาพหนึ่งแบบใหญ่ เมื่อใช้ทั้งคู่ ผู้อ่านสามารถเลื่อนดูภาพในสไลด์เพื่อดูภาพรวม แล้วคลิกภาพที่สนใจเพื่อขยายดูรายละเอียดเต็มจอ เป็นประสบการณ์การดูภาพที่สมบูรณ์ เหมาะกับบทความที่ภาพเป็นพระเอก เช่น ท่องเที่ยว อาหาร และรีวิวที่พัก ## ข้อควรพิจารณาด้านความเร็วและรูปภาพ ตัวสไลด์เองเป็น CSS และสคริปต์ขนาดเล็ก จึงแทบไม่กระทบความเร็ว แต่สิ่งที่มีผลจริงคือ **ขนาดไฟล์ของรูปภาพ** เพราะสไลด์มักมีหลายภาพ ถ้าแต่ละภาพใหญ่มาก การโหลดหน้าก็ช้าลง แนะนำให้ย่อขนาดและบีบอัดรูปให้เหมาะสมก่อนอัปโหลด และตั้งชื่อไฟล์กับ alt ให้สื่อความหมาย อีกเทคนิคคือ Blogger รองรับการโหลดรูปแบบ lazy อยู่แล้วในหลายกรณี ทำให้ภาพที่ยังไม่ถูกเลื่อนถึงไม่โหลดทันที ช่วยให้หน้าแรกเปิดเร็วขึ้น การจัดการรูปให้ดีจึงเป็นกุญแจสำคัญที่ทำให้สไลด์ทั้งสวยและเร็ว ซึ่งดีต่อทั้งผู้อ่านและคะแนน Core Web Vitals ## ตัวอย่างการใช้สไลด์ในบล็อกแต่ละแนว - **บล็อกท่องเที่ยว:** รวมภาพหลายมุมของสถานที่เดียวไว้ในสไลด์ พร้อมคำบรรยายบอกจุดถ่ายหรือเวลาที่ควรไป - **รีวิวที่พัก/โรงแรม:** โชว์ห้องพัก วิว และสิ่งอำนวยความสะดวกในสไลด์เดียว ช่วยผู้อ่านเห็นภาพรวมก่อนตัดสินใจ - **บล็อกอาหาร:** ภาพขั้นตอนการทำอาหารหรือเมนูหลายจานในร้าน เลื่อนดูได้กระชับ - **บล็อกงานสร้างสรรค์/พอร์ตโฟลิโอ:** แสดงผลงานหลายชิ้นในแกลเลอรีเดียว พร้อมคำบรรยายชื่อผลงาน ทุกกรณีมีจุดร่วมคือ “ภาพหลายภาพที่เกี่ยวข้องกัน” ซึ่งเหมาะกับการรวมไว้ในสไลด์เดียวมากกว่าการวางเรียงยาว เพราะช่วยให้บทความกระชับและนำเสนอภาพได้อย่างมีชั้นเชิง ## เมื่อไรไม่ควรใช้สไลด์ แม้สไลด์จะมีประโยชน์ แต่ก็ไม่ใช่คำตอบสำหรับทุกสถานการณ์ มีบางกรณีที่การวางรูปตามปกติดีกว่า เช่น เมื่อภาพแต่ละภาพสำคัญเท่ากันและคุณอยากให้ผู้อ่านเห็นทุกภาพแน่นอน การซ่อนภาพไว้ในสไลด์อาจทำให้ผู้อ่านบางคนไม่เลื่อนดูจนครบ ในกรณีนี้การวางรูปเรียงให้เห็นทั้งหมดอาจเหมาะกว่า อีกกรณีคือเมื่อภาพเป็นส่วนหนึ่งของขั้นตอนที่ต้องอ่านไล่ลำดับพร้อมข้อความประกอบแต่ละภาพ การแยกภาพออกไปอยู่ในสไลด์อาจตัดความเชื่อมโยงระหว่างภาพกับคำอธิบาย โดยสรุป ให้ใช้สไลด์เมื่อภาพเป็น “ชุดที่ดูรวมกัน” และผู้อ่านเลือกดูได้ตามสนใจ แต่ถ้าทุกภาพจำเป็นต้องเห็นและผูกกับข้อความเฉพาะ การวางแบบปกติจะสื่อสารได้ดีกว่า การเลือกใช้เครื่องมือให้ถูกกับงานคือหัวใจของการนำเสนอที่ดี ## ปัญหาที่พบบ่อยและวิธีแก้ ### สไลด์ไม่เลื่อนหรือไม่มีปุ่ม ตรวจว่าเพิ่มบล็อกสไลด์และ Export ใหม่แล้ว และใช้โครงสร้างถูกต้อง คือ `bk-slider` ครอบหลาย `figure` เขียนในมุมมอง HTML ของโพสต์ หากใช้มุมมองเขียน โครงสร้างอาจถูกแปลงจนสไลด์ไม่ทำงาน ### รูปถูกครอบมากเกินไป สไลด์ตั้งอัตราส่วนภาพให้สม่ำเสมอเพื่อความเรียบร้อย หากรูปต้นฉบับมีสัดส่วนต่างจากกรอบมาก จะถูกครอบมาก แนะนำให้ใช้รูปที่สัดส่วนใกล้เคียงกันหรือใกล้เคียงกรอบเพื่อลดการครอบ ### คำบรรยายไม่แสดง ตรวจว่าใส่ข้อความใน `figcaption` ของแต่ละ figure ถ้าไม่มี figcaption ก็จะไม่มีคำบรรยายให้แสดง ซึ่งเป็นพฤติกรรมปกติ ### สไลด์โหลดช้า มักเกิดจากไฟล์รูปใหญ่เกินไป ย่อขนาดและบีบอัดรูปก่อนอัปโหลด เพราะจำนวนและขนาดรูปมีผลต่อความเร็วมากกว่าตัวสไลด์เอง ## แนวทางปฏิบัติที่ดี (Best Practices) - ใช้รูปที่สัดส่วนใกล้เคียงกันเพื่อให้สไลด์ดูเรียบร้อยและถูกครอบน้อย - ใส่คำบรรยายและ alt ที่สื่อความหมายทุกภาพ เพื่อผู้อ่านและ SEO ของรูป - ย่อขนาดและบีบอัดรูปก่อนอัปโหลด เพื่อรักษาความเร็วหน้า - ใช้สไลด์กับ “ชุดภาพที่เกี่ยวข้องกัน” ไม่ใช่รูปเดี่ยว ๆ ที่ไม่จำเป็นต้องเลื่อน - จับคู่กับ[Lightbox](https://www.blogkub.com/learn/lightbox)เพื่อให้ผู้อ่านเลื่อนดูภาพรวมแล้วคลิกขยายภาพที่สนใจ ## สรุป สไลด์รูป/แกลเลอรีเป็นเครื่องมือที่ช่วยให้บทความที่มีภาพเยอะดูกระชับ อ่านลื่น และนำเสนอภาพได้อย่างมีชั้นเชิง ด้วย BlogKub คุณเพียงเพิ่มบล็อกสไลด์แล้ว Export ไปใช้ จากนั้นวางโครงสร้าง bk-slider ที่มีหลาย figure พร้อม img และ figcaption ระบบจะเติมปุ่มเลื่อน จุดบอกตำแหน่ง คำบรรยายใต้ภาพ และรองรับการปัดบนมือถือให้อัตโนมัติ เมื่อจัดการรูปให้มีขนาดเหมาะสมและใส่คำบรรยายที่ดี สไลด์จะช่วยเล่าเรื่องด้วยภาพได้อย่างสวยงามและรวดเร็ว โดยเฉพาะในบทความท่องเที่ยว อาหาร รีวิว และพอร์ตโฟลิโอที่ภาพเป็นหัวใจของเนื้อหา ## คำถามที่พบบ่อย (FAQ) **สไลด์รูปใช้อย่างไร?** ในโพสต์มุมมอง HTML วาง
แล้วใส่หลาย
ข้างใน แต่ละ figure มี และ
สำหรับคำบรรยาย ระบบจะเติมปุ่มเลื่อน จุดบอกตำแหน่ง และรองรับการปัดให้อัตโนมัติ **สไลด์รองรับการปัดบนมือถือไหม?** รองรับ สไลด์ใช้การเลื่อนแบบ scroll-snap จึงปัดนิ้วเลื่อนรูปได้ลื่นบนมือถือ พร้อมมีปุ่มก่อนหน้า/ถัดไปและจุดบอกตำแหน่งสำหรับผู้ใช้เดสก์ท็อป **ใส่คำบรรยายใต้รูปได้ไหม?** ได้ ใส่ข้อความใน
ของแต่ละ figure คำบรรยายจะแสดงทับด้านล่างของรูปบนแถบไล่เฉดมืด อ่านง่ายและไม่บังภาพหลัก **สไลด์ทำให้เว็บช้าไหม?** ผลกระทบน้อยเพราะสไลด์เป็น CSS และสคริปต์ขนาดเล็ก ไม่ใช้ไลบรารีหนัก อย่างไรก็ตามควรย่อขนาดไฟล์รูปให้เหมาะสมก่อนอัปโหลด เพราะจำนวนรูปหลายภาพมีผลต่อการโหลดมากกว่าตัวสไลด์เอง **สไลด์กับ Lightbox ต่างกันอย่างไร?** สไลด์คือแกลเลอรีเลื่อนดูรูปหลายภาพในพื้นที่เดียวในเนื้อหา ส่วน Lightbox คือการคลิกรูปเพื่อขยายเต็มจอ ทั้งสองใช้ร่วมกันได้ เช่นเลื่อนดูในสไลด์แล้วคลิกเพื่อขยายภาพที่สนใจ --- *บทความนี้เป็นส่วนหนึ่งของ [คู่มือฟีเจอร์ BlogKub](https://www.blogkub.com/learn/) · คู่มือทีละฟีเจอร์ พร้อมวิธีตั้งค่า ตัวเลือก และปัญหาที่พบบ่อย* > เขียนโดย > > ภัทร์พิศาล ดาทอง · เบน > > ผู้ก่อตั้ง BlogKub และบล็อกเกอร์สาย Blogger ที่อยากให้คนไทยมีบล็อกสวยได้เองโดยไม่ต้องเขียนโค้ด รวบรวมประสบการณ์ทำธีมและ SEO บน Blogger มาเรียบเรียงเป็นคู่มือชุดนี้ > > [Facebook](https://www.facebook.com/patpisan)[Pantip · LuMoo](https://pantip.com/profile/2448725)