สร้าง Carousel ด้วย Bootstrap Framework: คู่มือขั้นตอน

เมื่อพูดถึง "Carousel" หลายคนนึกถึงเครื่องเล่นหมุนในสวนสนุก แต่ Bootstrap Carousel แตกต่างออกไป แม้แนวคิดจะคล้ายกัน (เลื่อนสไลด์ซ้ำๆ) บทความนี้จะแนะนำการเริ่มต้นกับ Bootstrap อธิบาย UI Component Carousel เมื่อไหร่ควรใช้ และวิธีสร้างด้วย Bootstrap Framework

การเตรียมพร้อม (Getting Started)

เพื่อใช้ Bootstrap Carousel ต้องมี dependencies 3 ตัว ได้แก่ Bootstrap, PopperJS, และ jQuery วิธีง่ายที่สุดสำหรับมือใหม่คือใช้ CDN (Content Delivery Network) สำหรับทั้งสามไลบรารี สำคัญ: ลำดับของแท็ก <script> มีผล กรุณาจัดลำดับให้ถูกต้อง (jQuery → Popper.js → Bootstrap JS)

ดูรายละเอียดได้ที่ Bootstrap Quick Start page

ใช้ Bootstrap Documentation สร้าง Carousel

ในเอกสาร Bootstrap ไปที่ Sidebar → Components → Carousel จะพบข้อมูลครบถ้วน

หลักการทำงาน

Bootstrap ใช้ CSS transform property และ JavaScript ควบคุมการเลื่อนสไลด์ Carousel พื้นฐานคือชุดรูปภาพหรือ markup ที่เลื่อนเปลี่ยนกันหลังจากเวลาที่กำหนด

โครงสร้างพื้นฐาน (Basic Structure)

<div id="carouselExampleIndicators" class="carousel slide" data-ride="carousel" data-interval="10000" data-pause="hover">
  <div class="carousel-inner">
    <div class="carousel-item active">
      <img src="..." class="d-block w-100" alt="...">
    </div>
    <div class="carousel-item">
      <img src="..." class="d-block w-100" alt="...">
    </div>
    <div class="carousel-item">
      <img src="..." class="d-block w-100" alt="...">
    </div>
  </div>
</div>

คำอธิบาย Attribute สำคัญ:

เพิ่ม Controls (Previous/Next)

เพิ่มปุ่มย้อนกลับ/ไปข้างหน้า ใช้ JavaScript ของ Bootstrap ควบคุม ต้องให้ href ของปุ่มตรงกับ id ของ carousel container

<a class="carousel-control-prev" href="#carouselExampleControls" role="button" data-slide="prev">
  <span class="carousel-control-prev-icon" aria-hidden="true"></span>
  <span class="sr-only">Previous</span>
</a>
<a class="carousel-control-next" href="#carouselExampleControls" role="button" data-slide="next">
  <span class="carousel-control-next-icon" aria-hidden="true"></span>
  <span class="sr-only">Next</span>
</a>

จุดสำคัญ: href="#carouselExampleControls" ต้องตรงกับ id="carouselExampleControls" ของ div ภายนอก

เพิ่ม Indicators (จุดบ่งชี้สไลด์)

ใช้ <ol class="carousel-indicators"> พร้อม <li> สำหรับแต่ละสไลด์ คลาส active ตรงกับสไลด์ที่แสดงอยู่ สามารถใช้ร่วมกับ Controls ได้

<ol class="carousel-indicators">
  <li data-target="#carouselExampleIndicators" data-slide-to="0" class="active"></li>
  <li data-target="#carouselExampleIndicators" data-slide-to="1"></li>
  <li data-target="#carouselExampleIndicators" data-slide-to="2"></li>
</ol>

สรุป

การสร้าง Carousel ด้วย Bootstrap อาจดูซับซ้อน แต่กุญแจสำคัญคือ ปฏิบัติตามเอกสารอย่างเคร่งครัด ไม่จำเป็นต้องจดจำโค้ดทั้งหมด ให้เข้าใจโครงสร้างพื้นฐาน Attribute และการเชื่อมโยง Controls/Indicators

ข้อควรระวัง: Carousel อาจไม่เหมาะกับ Accessibility (การเข้าถึง) ควรให้ข้อมูลใน Carousel สามารถเข้าถึงได้จากที่อื่นด้วย

ขอให้โชคดีกับการเรียนรู้ Bootstrap!