โค้ดภาพสไลด์ HTML ด้วย Bootstrap

โค้ดภาพสไลด์ HTML ด้วย Bootstrap บทความนี้สอนติดตั้ง Bootstrap Framework เพื่อใช้งาน Carousel สำหรับทำภาพสไลด์ด้วย HTML พร้อมกำหนดภาพสไลด์แบบอัตโนมัติตามระยะเวลาที่กำหนด สามารถเขียนโปรแกรมได้ดังนี้

ตัวอย่าง โค้ดภาพสไลด์ HTML ด้วย Bootstrap

1. ติดตั้ง CSS และ JavaScript Bootstrap ผ่านผู้ให้บริการ CDN โดยคัดลอกลิงก์ด้านล่างวางไว้ภายในแท็ก head ของเว็บไซต์

<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/css/bootstrap.min.css" integrity="sha384-Gn5384xqQ1aoWXA+058RXPxPg6fy4IWvTNh0E263XmFcJlSAwiGgFAW/dAiS6JXm" crossorigin="anonymous">

<script src="https://code.jquery.com/jquery-3.2.1.slim.min.js" integrity="sha384-KJ3o2DKtIkvYIK3UENzmM7KCkRr/rE9/Qpg6aAZGJwFDMVNA/GpGFF93hXpG5KkN" crossorigin="anonymous"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.12.9/umd/popper.min.js" integrity="sha384-ApNbgh9B+Y1QKtv3Rn7W3mgPxhU9K/ScQsAP7hUibX39j7fakFPskvXusvfa0b4Q" crossorigin="anonymous"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/js/bootstrap.min.js" integrity="sha384-JZR6Spejh4U02d8jOt6vLEHfe/JQGiRRSQQxSfFWpi1MquVdAyjUar5+76PVCmYl" crossorigin="anonymous"></script>

2. เขียนโค้ดภาพสไลด์ HTML ด้วย Carousel - Bootstrap ประกอบด้วยรูปภาพสไลด์ 3 รูปภาพ คือ color1.png, color2.png และ color3.png

<div id="carouselControls" class="carousel slide" data-ride="carousel">
  <div class="carousel-inner">
    <div class="carousel-item active">
      <img class="d-block w-100" src="color1.png">
    </div>
    <div class="carousel-item">
      <img class="d-block w-100" src="color2.png">
    </div>
    <div class="carousel-item">
      <img class="d-block w-100" src="color3.png">
    </div>
  </div>
  <a class="carousel-control-prev" href="#carouselControls" 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="#carouselControls" role="button" data-slide="next">
    <span class="carousel-control-next-icon" aria-hidden="true"></span>
    <span class="sr-only">Next</span>
  </a>
</div>

3. กำหนดให้โค้ดภาพสไลด์ สไลด์ภาพทุกๆ 2 วินาทีผ่าน JavaScript

<script>
  $('.carousel').carousel({
    interval: 2000
  });
</script>