Devdit
 

โค้ดรูปสไลด์ Bootstrap Carousel

2.1K

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

 

ตัวอย่าง โค้ดรูปสไลด์ Bootstrap Carousel

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

<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/css/bootstrap.min.css">

 

2. ติดตั้ง JS Bootstrap และ jQuery ผ่าน CDN โดยการวางลิงก์ด้านล่างไว้ภายในแท็ก body ของเว็บไซต์

<script src="https://code.jquery.com/jquery-3.2.1.slim.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.12.9/umd/popper.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/js/bootstrap.min.js"></script>

 

3. เขียนโค้ดรูปสไลด์ Bootstrap Carousel จากตัวอย่างประกอบด้วยรูปภาพทั้งหมด 3 รูป และปุ่มลูกศรสำหรับเลื่อนรูปภาพไปทางซ้าย และทางขวา

<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="image_1.png"></div>
    <div class="carousel-item"><img class="d-block w-100" src="image_2.png"></div>
    <div class="carousel-item"><img class="d-block w-100" src="image_3.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>

 

4. กำหนดให้โค้ดรูปสไลด์ Bootstrap ทำงานอัตโนมัติ หรือรูปสไลด์เองทุกๆ 2 วินาที ผ่าน class carousel

<script>
  $('.carousel').carousel({
    interval: 2000
  });
</script>
แก้ไข 2 ปีที่แล้ว
ชอบ
ลิ้งก์
แชร์
Devdit มีช่อง YouTube แล้ว
เราสร้างวิดีโอเกี่ยวกับเทคโนโลยี ทำตามง่ายๆ