🎞️ วิธีสร้างสไลด์โชว์อัตโนมัติ

ลองสร้างสไลด์โชว์ที่เปลี่ยนภาพทุก ๆ 3 วินาทีด้วย JavaScript กันเถอะ!

🏖 เว็บไซต์ท่องเที่ยว: แนะนำสถานที่ยอดนิยมแบบอัตโนมัติ
🏪 แนะนำสินค้า: แสดงแบนเนอร์สินค้าใหม่หรือสินค้าลดราคาโดยอัตโนมัติ
👶 แกลเลอรีภาพ: แสดงภาพกิจกรรมหรือความทรงจำแบบอัตโนมัติ

💡 กลไกของการสไลด์โชว์

ในโค้ด JavaScript ด้านล่าง เราใช้ array เก็บ path ของรูปภาพ
แล้วใช้ setInterval() เพื่อเปลี่ยนภาพตามลำดับทุก ๆ สองสามวินาที
ภาพแรกจะแสดงก่อน จากนั้นเมื่อโหลดหน้าเสร็จ สไลด์โชว์จะเปลี่ยนภาพโดยอัตโนมัติ นี่คือโครงสร้างพื้นฐานของสไลด์โชว์อัตโนมัติ

<script>
const images = [
  "/assets/images/sample1.jpg",
  "/assets/images/sample2.jpg",
  "/assets/images/sample3.jpg"
  // ตัวอย่าง path แบบ absolute สำหรับเซิร์ฟเวอร์:
  // "https://yourdomain.com/assets/images/sample1.jpg"
];
let currentIndex = 0;

function showNextImage() {
  currentIndex = (currentIndex + 1) % images.length;
  document.getElementById("slideshow").src = images[currentIndex];
}

setInterval(showNextImage, 3000); // เปลี่ยนภาพทุก 3 วินาที
</script>

👇 แสดงผลลัพธ์ 👇

📏 วิธีจัดการเมื่อขนาดภาพแตกต่างกัน

เมื่อใช้ภาพแนวตั้งหรือภาพที่มีสัดส่วนต่างกัน ความสูงของภาพอาจทำให้เลย์เอาต์ของหน้า (โดยเฉพาะข้อความด้านล่าง) ขยับได้

ในกรณีนั้น ให้ตั้งค่า height คงที่ และใช้ object-fit เพื่อจัดการภาพให้พอดี

💡 วิธีที่ 1: ตัดภาพให้พอดีความสูง (object-fit: `cover`)

📸 ขยายและตัดภาพโดยใช้จุดศูนย์กลางเป็นหลัก
✨ รูปภาพมีขนาดเท่ากัน ดูเรียบร้อย
🪄 เหมือนกับการแสดงภาพใน Instagram

<!DOCTYPE html>
<html lang="th">
<head>
  <meta charset="UTF-8">
  <title>เดโมสไลด์โชว์อัตโนมัติ</title>
  <style>
    .slideshow {
      width: 100%;
      height: 400px;
      object-fit: cover;
      border-radius: 12px;
      box-shadow: 0 0 10px rgba(0,0,0,0.2);
    }
    .container {
      max-width: 800px;
      margin: 0 auto;
      text-align: center;
      padding: 20px;
    }
  </style>
</head>
<body>
  <div class="container">
    <h1>🎞️ เดโมสไลด์โชว์อัตโนมัติ</h1>
    <img id="slideshow" class="slideshow" src="/assets/images/sample1.jpg" alt="ภาพสไลด์โชว์">
  </div>

  <script>
    const images = [
      "/assets/images/sample1.jpg",
      "/assets/images/sample2.jpg",
      "/assets/images/sample3.jpg"
    ];
    let currentIndex = 0;

    function showNextImage() {
      currentIndex = (currentIndex + 1) % images.length;
      document.getElementById("slideshow").src = images[currentIndex];
    }

    setInterval(showNextImage, 3000); // เปลี่ยนทุก ๆ 3 วินาที
  </script>
</body>
</html>

👇 ผลลัพธ์ 👇

💡 วิธีที่ 2: เพิ่มช่องว่างด้านบนและล่างเพื่อแสดงภาพทั้งหมด (object-fit: `contain`)

🖼 มองเห็นขอบภาพทั้งหมด
⬜ ช่องว่างช่วยปรับความสูงให้เท่ากัน
🔲 เหมาะกับการแสดงภาพขนาดย่อ

ภาพที่มีความสูงต่างกันก็จะแสดงให้เห็นครบทั้งภาพ

<!DOCTYPE html>
<html lang="th">
<head>
  <meta charset="UTF-8">
  <title>สไลด์โชว์ (contain)</title>
  <style>
    .slideshow {
      width: 100%;
      height: 400px;
      object-fit: contain;
      border-radius: 12px;
      box-shadow: 0 0 10px rgba(0,0,0,0.2);
    }
    .container {
      max-width: 800px;
      margin: 0 auto;
      text-align: center;
      padding: 20px;
    }
  </style>
</head>
<body>
  <div class="container">
    <h1>🎞️ สาธิตสไลด์โชว์ (object-fit: contain)</h1>
    <img id="slideshow-contain" class="slideshow" src="/assets/images/sample1.jpg" alt="ภาพสไลด์โชว์">
  </div>

  <script>
    const images = [
      "/assets/images/sample1.jpg",
      "/assets/images/sample2.jpg",
      "/assets/images/sample3.jpg"
    ];
    let currentIndex = 0;

    function showNextImage() {
      currentIndex = (currentIndex + 1) % images.length;
      document.getElementById("slideshow-contain").src = images[currentIndex];
    }

    setInterval(showNextImage, 3000); // เปลี่ยนภาพทุก 3 วินาที
  </script>
</body>
</html>

👇 ผลลัพธ์จะเป็นแบบนี้ 👇

🖐 เพิ่ม UX ด้วยการสลับภาพอัตโนมัติ + แบบแมนนวล

การสไลด์โชว์แบบอัตโนมัติเพียงอย่างเดียวอาจไม่เพียงพอ
การเพิ่มฟังก์ชันควบคุมด้วยมือจะช่วยให้ผู้ใช้สามารถควบคุมตามจังหวะของตนเองได้

สามารถเพิ่มปุ่มต่อไปนี้เพื่อให้ผู้ใช้คลิกเปลี่ยนภาพได้ง่ายขึ้น:

◀️ ย้อนกลับ เพื่อดูภาพก่อนหน้า
▶️ ถัดไป เพื่อข้ามไปยังภาพถัดไป
⏸ หยุดชั่วคราว ก็จะดีมาก

สิ่งนี้ช่วยให้ผู้ใช้สามารถเพลิดเพลินกับการเล่นอัตโนมัติพร้อมควบคุมการแสดงผลได้ตามต้องการ
โดยเฉพาะในการแสดงสินค้า หรือแกลเลอรีรูปภาพ ฟังก์ชันนี้ช่วยตอบสนองต่อความต้องการ“อยากดูใกล้ ๆ”

สามารถใช้ JavaScript clearInterval() และ setInterval() ในการสร้างตรรกะการหยุด/เล่นต่อได้อย่างง่ายดาย
ผสานการเล่นอัตโนมัติกับการควบคุมโดยผู้ใช้เพื่อสร้าง UI สไลด์โชว์ที่สวยงามและยืดหยุ่นยิ่งขึ้น!