เมื่อเรานึกถึงม้าหมุน สิ่งที่มักจะนึกถึงคือเครื่องเล่นในสวนสนุกที่คุณอาจเคยขี่ตั้งแต่ยังเป็นเด็ก ซึ่งเป็นแพลตฟอร์มขนาดใหญ่ที่หมุนไปพร้อมกับม้าหมุนหลากสีสันที่จะขึ้นและลงในขณะที่การขี่ดำเนินต่อไป
Bootstrap Carousel ไม่ใช่งานแฟร์ที่สนุกสนานที่เรารู้จักตั้งแต่ยังเป็นเด็ก แต่แนวคิดนี้มีความคล้ายคลึงกัน บทความนี้กล่าวถึงวิธีการเริ่มต้นใช้งาน Bootstrap กล่าวถึงองค์ประกอบ UI แบบหมุน ว่าควรใช้เมื่อใด และวิธีการสร้างองค์ประกอบโดยใช้กรอบงาน Bootstrap
เริ่มต้นใช้งาน
สิ่งแรกที่เราต้องทำเพื่อตั้งค่า Bootstrap Carousel คือต้องแน่ใจว่าเรามีการพึ่งพาที่เหมาะสม สำหรับสิ่งนี้ เราต้องการ Bootstrap, PopperJS และ jQuery ดูหน้าเริ่มต้นอย่างรวดเร็วของ Bootstrap เพื่อขอความช่วยเหลือในการเพิ่มการพึ่งพาของคุณในโครงการของคุณ
การตัดสินใจของคุณคือวิธีจัดการกับข้อกำหนดการพึ่งพา แต่วิธีที่ง่ายที่สุดและเป็นมิตรกับผู้เริ่มต้นใช้งานมากขึ้นคือการใช้เครือข่ายการจัดส่งเนื้อหา – CDN – สำหรับ jQuery, Popper.js และ Bootstrap ระวังการเรียงลำดับของ <script> . ของคุณ แท็ก – การสั่งซื้อมีความสำคัญที่นี่
ตอนนี้คุณพร้อมที่จะเริ่มต้นแล้ว!
การใช้เอกสาร Bootstrap เพื่อสร้างภาพหมุน
ทางด้านซ้ายมือของ Introduction/Getting Started คุณจะเห็นแถบด้านข้างที่เชื่อมโยงไปยังสิ่งต่างๆ มองหา Components ลิงค์และคลิกที่มัน การดำเนินการนี้จะนำทางคุณไปยังองค์ประกอบแรกของ Bootstrap ที่มี:Alerts . ถ้าเราดูที่แถบด้านข้างอีกครั้ง ตอนนี้จะแสดงลิงก์ต่างๆ ไปยังส่วนประกอบต่างๆ ทั้งหมดที่มีให้เรา
คลิกที่ Carousel องค์ประกอบเพื่อเริ่มต้น ซึ่งจะมีข้อมูลที่เราต้องการ
มันทำงานอย่างไร
Bootstrap ใช้ประโยชน์จากคุณสมบัติการแปลง CSS และ JavaScript บางตัวเพื่อใช้งานภาพหมุนเมื่อย้ายจากสไลด์หนึ่งไปยังอีกสไลด์ถัดไป ภาพหมุนพื้นฐานที่สุดคือชุดของรูปภาพหรือมาร์กอัปที่เลื่อนจากที่หนึ่งไปยังอีกที่หนึ่งหลังจากเวลาที่กำหนด
81% ของผู้เข้าร่วมกล่าวว่าพวกเขารู้สึกมั่นใจมากขึ้นเกี่ยวกับโอกาสในการทำงานด้านเทคโนโลยีหลังจากเข้าร่วม bootcamp จับคู่กับ Bootcamp วันนี้
ผู้สำเร็จการศึกษาจากหลักสูตร bootcamp โดยเฉลี่ยใช้เวลาน้อยกว่าหกเดือนในการเปลี่ยนอาชีพ ตั้งแต่เริ่มต้น bootcamp ไปจนถึงหางานแรก
โครงสร้างพื้นฐาน
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width">
<title>Bootstrap Navbar</title>
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css" integrity="sha384-ggOyR0iXCbMQv3Xipma34MD+dH/1fQ784/j6cY/iJTQUOhcWr7x9JvoRxT2MZw1T"
crossorigin="anonymous">
<link href="style.css" rel="stylesheet" type="text/css" />
</head>
<body>
<nav class="navbar navbar-expand-lg navbar-light bg-light">
<a class="navbar-brand" href="#"><img width="150" src="https://d30vrbc6r9jj52.cloudfront.net/web-illustrations/layout/ck_logo.png" /></a>
<button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#navbarSupportedContent" aria-controls="navbarSupportedContent" aria-expanded="false" aria-label="Toggle navigation">
<span class="navbar-toggler-icon"></span>
</button>
<div class="collapse navbar-collapse" id="navbarSupportedContent">
<ul class="navbar-nav mr-auto">
<li class="nav-item dropdown">
<a class="nav-link dropdown-toggle smallcaps" href="#" id="navbarDropdown" role="button" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
Bootcamps
</a>
<div class="dropdown-menu" aria-labelledby="navbarDropdown">
<a class="dropdown-item" href="#">Popular Bootcamps</a>
<a class="dropdown-item" href="#">Bootcamp Prep</a>
<div class="dropdown-divider"></div>
<a class="dropdown-item" href="#">Bootcamp Financing</a>
<a class="dropdown-item" href="#">Bootcamp Grads and Alumni</a>
</div>
</li>
<li class="nav-item dropdown">
<a class="nav-link dropdown-toggle smallcaps" href="#" id="navbarDropdown" role="button" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
Coding
</a>
<div class="dropdown-menu" aria-labelledby="navbarDropdown">
<a class="dropdown-item" href="#">Coding Tools</a>
<a class="dropdown-item" href="#">Git</a>
<div class="dropdown-divider"></div>
<a class="dropdown-item" href="#">HTML</a>
<a class="dropdown-item" href="#">CSS</a>
<a class="dropdown-item" href="#">JS</a>
<div class="dropdown-divider"></div>
<a class="dropdown-item" href="#">Python</a>
<a class="dropdown-item" href="#">Ruby</a>
<a class="dropdown-item" href="#">C++</a>
<a class="dropdown-item" href="#">Java</a>
</div>
</li>
<li class="nav-item dropdown">
<a class="nav-link dropdown-toggle smallcaps" href="#" id="navbarDropdown" role="button" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
Career Resources
</a>
<div class="dropdown-menu" aria-labelledby="navbarDropdown">
<a class="dropdown-item smallcaps" href="#">Career Advice</a>
<a class="dropdown-item smallcaps" href="#">Interviews</a>
<div class="dropdown-divider"></div>
<a class="dropdown-item smallcaps" href="#">Tech Cities</a>
<a class="dropdown-item smallcaps" href="#">Tech Salaries</a>
</div>
</li>
<li class="nav-item dropdown">
<a class="nav-link dropdown-toggle smallcaps" href="#" id="navbarDropdown" role="button" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
Tech Fields
</a>
<div class="dropdown-menu" aria-labelledby="navbarDropdown">
<a class="dropdown-item" href="#">Web Design</a>
<a class="dropdown-item" href="#">Web Development</a>
<a class="dropdown-item" href="#">Software Engineering</a>
<a class="dropdown-item" href="#">Data Science</a>
</div>
</li>
<li class="nav-item">
<a class="nav-link smallcaps" href="#">News & Commentary</a>
</li>
</ul>
<form class="form-inline my-2 my-lg-0">
<input class="form-control mr-sm-2" type="search" placeholder="Search" aria-label="Search">
<button class="btn btn-outline-success my-2 my-sm-0" type="submit">Search</button>
</form>
</div>
</nav>
<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="https://images.unsplash.com/photo-1489533119213-66a5cd877091?ixlib=rb-1.2.1&ixid=eyJhcHBfaWQiOjEyMDd9&auto=format&fit=crop&w=2581&q=80" class="d-block w-100" alt="...">
</div>
<div class="carousel-item"><img src="https://images.unsplash.com/photo-1499854413229-6d1c92ff39ef?ixlib=rb-1.2.1&ixid=eyJhcHBfaWQiOjEyMDd9&auto=format&fit=crop&w=3404&q=80" class="d-block w-100" alt="...">
</div>
<div class="carousel-item">
<img src="https://images.unsplash.com/photo-1532377541606-76e67ceb59a2?ixlib=rb-1.2.1&ixid=eyJhcHBfaWQiOjEyMDd9&auto=format&fit=crop&w=2250&q=80" class="d-block w-100" alt="...">
</div>
</div>
</div>
<script src="https://code.jquery.com/jquery-3.3.1.slim.min.js" integrity="sha384-q8i/X+965DzO0rT7abK41JStQIAqVgRVzpbzo5smXKp4YfRvH+8abtTE1Pi6jizo" crossorigin="anonymous"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.7/umd/popper.min.js" integrity="sha384-UO2eT0CpHqdSJQ6hJty5KVphtPhzWj9WO1clHTMGa3JDZwrnQq4sF86dIHNDz0W1" crossorigin="anonymous"></script>
<script src="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/js/bootstrap.min.js" integrity="sha384-JjSmVgyd0p3pXB1rRibZUAYoIIy6OrQ6VrjIEaFf/nJGzIxFDsf4x0xIM+B07jRM" crossorigin="anonymous"></script>
<script src="script.js"></script>
</body>
</html>
ต่อไปนี้คือคุณลักษณะบางอย่างที่เห็นข้างต้นซึ่งคุณอาจยังใหม่ต่อคุณและความหมาย:
| แอตทริบิวต์ | ความหมาย |
| data-ride=“carousel” | เคลื่อนไหวเมื่อโหลดหน้าเว็บ |
| data-interval=“false | [num เป็นมิลลิวินาที]” | หากตั้งค่าเป็นเท็จ ภาพหมุนจะไม่หมุนโดยอัตโนมัติ มิฉะนั้น จะวนตามตัวเลขในหน่วยมิลลิวินาที |
| data-pause=“โฮเวอร์” | เมื่อผู้ใช้วางเมาส์เหนือภาพหมุน ภาพหมุนจะหยุดชั่วคราวบนภาพที่ใช้งานอยู่ในปัจจุบัน บน mouseleave ม้าหมุนจะดำเนินต่อตามกระบวนการปั่นจักรยาน |
| class="ใช้งานอยู่" | ต้องเปิดใช้งานเพื่อให้ทราบว่าจะแสดงรูปภาพใด |
| class=“d-block” | จอแสดงผล:บล็อก; |
| class=“w-100” | ความกว้าง:100%; |
ด้วยการควบคุม
นอกจากโครงสร้างการปั่นจักรยานพื้นฐานแล้ว Bootstrap ยังมีการควบคุมแบบหมุนสำหรับส่วนประกอบ นี่คือที่มาของ JavaScript จำนวนมาก Bootstrap ใช้ฟังก์ชัน JavaScript util เพื่อให้ภาพหมุนทำงานเมื่อผู้ใช้คลิกที่ตัวควบคุม
ในข้อมูลโค้ดด้านล่างนี้ คุณจะเห็นลูกศรก่อนหน้าและถัดไปที่ด้านใดด้านหนึ่งของรูปภาพ นอกเหนือจากการทำงานเหมือนเมื่อก่อน (บนตัวจับเวลา) รูปภาพจะเปลี่ยนไปหากผู้ใช้คลิกที่ลูกศรอันใดอันหนึ่ง
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width">
<title>Bootstrap Navbar</title>
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css" integrity="sha384-ggOyR0iXCbMQv3Xipma34MD+dH/1fQ784/j6cY/iJTQUOhcWr7x9JvoRxT2MZw1T"
crossorigin="anonymous">
<link href="style.css" rel="stylesheet" type="text/css" />
</head>
<body>
<nav class="navbar navbar-expand-lg navbar-light bg-light">
<a class="navbar-brand" href="#"><img width="150" src="https://d30vrbc6r9jj52.cloudfront.net/web-illustrations/layout/ck_logo.png" /></a>
<button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#navbarSupportedContent" aria-controls="navbarSupportedContent" aria-expanded="false" aria-label="Toggle navigation">
<span class="navbar-toggler-icon"></span>
</button>
<div class="collapse navbar-collapse" id="navbarSupportedContent">
<ul class="navbar-nav mr-auto">
<li class="nav-item dropdown">
<a class="nav-link dropdown-toggle smallcaps" href="#" id="navbarDropdown" role="button" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
Bootcamps
</a>
<div class="dropdown-menu" aria-labelledby="navbarDropdown">
<a class="dropdown-item" href="#">Popular Bootcamps</a>
<a class="dropdown-item" href="#">Bootcamp Prep</a>
<div class="dropdown-divider"></div>
<a class="dropdown-item" href="#">Bootcamp Financing</a>
<a class="dropdown-item" href="#">Bootcamp Grads and Alumni</a>
</div>
</li>
<li class="nav-item dropdown">
<a class="nav-link dropdown-toggle smallcaps" href="#" id="navbarDropdown" role="button" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
Coding
</a>
<div class="dropdown-menu" aria-labelledby="navbarDropdown">
<a class="dropdown-item" href="#">Coding Tools</a>
<a class="dropdown-item" href="#">Git</a>
<div class="dropdown-divider"></div>
<a class="dropdown-item" href="#">HTML</a>
<a class="dropdown-item" href="#">CSS</a>
<a class="dropdown-item" href="#">JS</a>
<div class="dropdown-divider"></div>
<a class="dropdown-item" href="#">Python</a>
<a class="dropdown-item" href="#">Ruby</a>
<a class="dropdown-item" href="#">C++</a>
<a class="dropdown-item" href="#">Java</a>
</div>
</li>
<li class="nav-item dropdown">
<a class="nav-link dropdown-toggle smallcaps" href="#" id="navbarDropdown" role="button" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
Career Resources
</a>
<div class="dropdown-menu" aria-labelledby="navbarDropdown">
<a class="dropdown-item smallcaps" href="#">Career Advice</a>
<a class="dropdown-item smallcaps" href="#">Interviews</a>
<div class="dropdown-divider"></div>
<a class="dropdown-item smallcaps" href="#">Tech Cities</a>
<a class="dropdown-item smallcaps" href="#">Tech Salaries</a>
</div>
</li>
<li class="nav-item dropdown">
<a class="nav-link dropdown-toggle smallcaps" href="#" id="navbarDropdown" role="button" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
Tech Fields
</a>
<div class="dropdown-menu" aria-labelledby="navbarDropdown">
<a class="dropdown-item" href="#">Web Design</a>
<a class="dropdown-item" href="#">Web Development</a>
<a class="dropdown-item" href="#">Software Engineering</a>
<a class="dropdown-item" href="#">Data Science</a>
</div>
</li>
<li class="nav-item">
<a class="nav-link smallcaps" href="#">News & Commentary</a>
</li>
</ul>
<form class="form-inline my-2 my-lg-0">
<input class="form-control mr-sm-2" type="search" placeholder="Search" aria-label="Search">
<button class="btn btn-outline-success my-2 my-sm-0" type="submit">Search</button>
</form>
</div>
</nav>
<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="https://images.unsplash.com/photo-1489533119213-66a5cd877091?ixlib=rb-1.2.1&ixid=eyJhcHBfaWQiOjEyMDd9&auto=format&fit=crop&w=2581&q=80" class="d-block w-100" alt="...">
</div>
<div class="carousel-item">
<img src="https://images.unsplash.com/photo-1499854413229-6d1c92ff39ef?ixlib=rb-1.2.1&ixid=eyJhcHBfaWQiOjEyMDd9&auto=format&fit=crop&w=3404&q=80" class="d-block w-100" alt="...">
</div>
<div class="carousel-item">
<img src="https://images.unsplash.com/photo-1532377541606-76e67ceb59a2?ixlib=rb-1.2.1&ixid=eyJhcHBfaWQiOjEyMDd9&auto=format&fit=crop&w=2250&q=80" class="d-block w-100" alt="...">
</div>
</div>
<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>
</div>
<script src="https://code.jquery.com/jquery-3.3.1.slim.min.js" integrity="sha384-q8i/X+965DzO0rT7abK41JStQIAqVgRVzpbzo5smXKp4YfRvH+8abtTE1Pi6jizo" crossorigin="anonymous"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.7/umd/popper.min.js" integrity="sha384-UO2eT0CpHqdSJQ6hJty5KVphtPhzWj9WO1clHTMGa3JDZwrnQq4sF86dIHNDz0W1" crossorigin="anonymous"></script>
<script src="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/js/bootstrap.min.js" integrity="sha384-JjSmVgyd0p3pXB1rRibZUAYoIIy6OrQ6VrjIEaFf/nJGzIxFDsf4x0xIM+B07jRM" crossorigin="anonymous"></script>
<script src="script.js"></script>
</body>
</html>
สิ่งสำคัญที่ต้องทำความเข้าใจเกี่ยวกับวิธีการทำงานของตัวควบคุมคือ href จำเป็นต้องตรงกับรหัสเฉพาะของ div โดยรวมของภาพหมุน
การควบคุมถัดไป:
<a class="carousel-control-next" href="#carouselExampleControls" role="button" data-slide="next">
ตู้คอนเทนเนอร์ด้านนอกสุดของม้าหมุน:
<div id="carouselExampleControls" class="carousel slide" data-ride="carousel">
พื้นที่ที่ไฮไลต์ต้องตรงกันเพื่อให้ลิงก์ทำงานได้
พร้อมอินดิเคเตอร์
นอกจากการใช้ตัวควบคุมเพื่อควบคุมการหมุนของวงล้อแล้ว คุณยังสามารถระบุได้ว่าคุณกำลังดูภาพใดอยู่ โดยแสดงจำนวนองค์ประกอบบล็อกที่มีอยู่ในภาพหมุนของคุณ สามารถใช้ควบคู่กับการควบคุมได้
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width">
<title>Bootstrap Navbar</title>
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css" integrity="sha384-ggOyR0iXCbMQv3Xipma34MD+dH/1fQ784/j6cY/iJTQUOhcWr7x9JvoRxT2MZw1T"
crossorigin="anonymous">
<link href="style.css" rel="stylesheet" type="text/css" />
</head>
<body>
<nav class="navbar navbar-expand-lg navbar-light bg-light">
<a class="navbar-brand" href="#"><img width="150" src="https://d30vrbc6r9jj52.cloudfront.net/web-illustrations/layout/ck_logo.png" /></a>
<button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#navbarSupportedContent" aria-controls="navbarSupportedContent" aria-expanded="false" aria-label="Toggle navigation">
<span class="navbar-toggler-icon"></span>
</button>
<div class="collapse navbar-collapse" id="navbarSupportedContent">
<ul class="navbar-nav mr-auto">
<li class="nav-item dropdown">
<a class="nav-link dropdown-toggle smallcaps" href="#" id="navbarDropdown" role="button" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
Bootcamps
</a>
<div class="dropdown-menu" aria-labelledby="navbarDropdown">
<a class="dropdown-item" href="#">Popular Bootcamps</a>
<a class="dropdown-item" href="#">Bootcamp Prep</a>
<div class="dropdown-divider"></div>
<a class="dropdown-item" href="#">Bootcamp Financing</a>
<a class="dropdown-item" href="#">Bootcamp Grads and Alumni</a>
</div>
</li>
<li class="nav-item dropdown">lid
<a class="nav-link dropdown-toggle smallcaps" href="#" id="navbarDropdown" role="button" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
Coding
</a>
<div class="dropdown-menu" aria-labelledby="navbarDropdown">
<a class="dropdown-item" href="#">Coding Tools</a>
<a class="dropdown-item" href="#">Git</a>
<div class="dropdown-divider"></div>
<a class="dropdown-item" href="#">HTML</a>
<a class="dropdown-item" href="#">CSS</a>
<a class="dropdown-item" href="#">JS</a>
<div class="dropdown-divider"></div>
<a class="dropdown-item" href="#">Python</a>
<a class="dropdown-item" href="#">Ruby</a>
<a class="dropdown-item" href="#">C++</a>
<a class="dropdown-item" href="#">Java</a>
</div>
</li>
<li class="nav-item dropdown">
<a class="nav-link dropdown-toggle smallcaps" href="#" id="navbarDropdown" role="button" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
Career Resources
</a>
<div class="dropdown-menu" aria-labelledby="navbarDropdown">
<a class="dropdown-item smallcaps" href="#">Career Advice</a>
<a class="dropdown-item smallcaps" href="#">Interviews</a>
<div class="dropdown-divider"></div>
<a class="dropdown-item smallcaps" href="#">Tech Cities</a>
<a class="dropdown-item smallcaps" href="#">Tech Salaries</a>
</div>
</li>
<li class="nav-item dropdown">
<a class="nav-link dropdown-toggle smallcaps" href="#" id="navbarDropdown" role="button" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
Tech Fields
</a>
<div class="dropdown-menu" aria-labelledby="navbarDropdown">
<a class="dropdown-item" href="#">Web Design</a>
<a class="dropdown-item" href="#">Web Development</a>
<a class="dropdown-item" href="#">Software Engineering</a>
<a class="dropdown-item" href="#">Data Science</a>
</div>
</li>
<li class="nav-item">
<a class="nav-link smallcaps" href="#">News & Commentary</a>
</li>
</ul>
<form class="form-inline my-2 my-lg-0">
<input class="form-control mr-sm-2" type="search" placeholder="Search" aria-label="Search">
<button class="btn btn-outline-success my-2 my-sm-0" type="submit">Search</button>
</form>
</div>
</nav>
<div id="carouselExampleIndicators" class="carousel slide" data-ride="carousel" data-interval="10000" data-pause="hover">
<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>
<div class="carousel-inner">
<div class="carousel-item active">
<img src="https://images.unsplash.com/photo-1489533119213-66a5cd877091?ixlib=rb-1.2.1&ixid=eyJhcHBfaWQiOjEyMDd9&auto=format&fit=crop&w=2581&q=80" class="d-block w-100" alt="...">
</div>
<div class="carousel-item">
<img src="https://images.unsplash.com/photo-1499854413229-6d1c92ff39ef?ixlib=rb-1.2.1&ixid=eyJhcHBfaWQiOjEyMDd9&auto=format&fit=crop&w=3404&q=80" class="d-block w-100" alt="...">
</div>
<div class="carousel-item">
<img src="https://images.unsplash.com/photo-1532377541606-76e67ceb59a2?ixlib=rb-1.2.1&ixid=eyJhcHBfaWQiOjEyMDd9&auto=format&fit=crop&w=2250&q=80" class="d-block w-100" alt="...">
</div>
</div>
<a class="carousel-control-prev" href="#carouselExampleIndicators" 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="#carouselExampleIndicators" role="button" data-slide="next"><span class="carousel-control-next-icon" aria-hidden="true"></span>
<span class="sr-only">Next</span>
</a>
</div>
<script src="https://code.jquery.com/jquery-3.3.1.slim.min.js" integrity="sha384-q8i/X+965DzO0rT7abK41JStQIAqVgRVzpbzo5smXKp4YfRvH+8abtTE1Pi6jizo" crossorigin="anonymous"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.7/umd/popper.min.js" integrity="sha384-UO2eT0CpHqdSJQ6hJty5KVphtPhzWj9WO1clHTMGa3JDZwrnQq4sF86dIHNDz0W1" crossorigin="anonymous"></script>
<script src="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/js/bootstrap.min.js" integrity="sha384-JjSmVgyd0p3pXB1rRibZUAYoIIy6OrQ6VrjIEaFf/nJGzIxFDsf4x0xIM+B07jRM" crossorigin="anonymous"></script>
<script src="script.js"></script>
</body>
</html>
รายการที่เรียงลำดับในข้อมูลโค้ดด้านบนคือสิ่งที่แสดงตัวบ่งชี้ คลาส .active ตรงกับคลาสที่ใช้งานใน carousel-items .
บทสรุป
นี้อาจดูเหมือนข้อมูลจำนวนมากที่จะแยกแยะในตอนแรก สิ่งสำคัญที่ต้องจำไว้คือเพียงแค่ทำตามเอกสาร ไม่จำเป็นต้องจำว่าต้องทำอย่างไรเมื่อเอกสารมีการเขียนและมีรายละเอียดมาก
เป็นความคิดที่ดีที่จะทราบว่าทุกอย่างทำงานอย่างไรใน Bootstrap ลองดูที่ไฟล์ CSS และ JS ที่ย่อขนาดแล้ว หากคุณมีเวลาเพื่อดูว่าองค์ประกอบเหล่านี้มีรูปแบบและสคริปต์ใน Bootstrap อย่างไร นอกจากนี้ ให้ระวังอย่างน้อยความหมายของแอตทริบิวต์ทั้งหมดในโค้ดตัวอย่าง เพื่อให้คุณสามารถปรับแต่งให้ตรงกับความต้องการของคุณและใช้ในโปรเจ็กต์ของคุณได้
สิ่งสุดท้าย:โปรดทราบว่าองค์ประกอบภาพหมุนอาจใช้ไม่ได้ดีที่สุดในแง่ของการช่วยสำหรับการเข้าถึง ตรวจสอบให้แน่ใจว่าได้ทำให้เพจของคุณสามารถเข้าถึงได้มากที่สุด และอย่าใช้ข้อมูลในภาพหมุนของคุณที่ไม่สามารถหาได้จากที่อื่น
ขอให้โชคดีในขณะที่คุณเดินทางต่อไปโดยใช้ Bootstrap!
