หลาย ๆ คนก็คงจะคิดว่าการทำภาพ slied show นั้นจะมี code ที่ยาวและไม่น่าจะทำความเข้าใจได้ง่ายเลยแต่บทความนี้ก็จะมาแสดง code ในการทำภาพโดยใช้ class Carousel ของ Bootstrap มานำเสนอกันจะเป็นอย่างไรลองไปดูกันเลย
อันดับแรกเราก็ต้องเรียกใช้ไฟร์ของ Bootstrap ก่อน จะใช้แบบนี้เลยก็ได้หรือว่าจะโหลดเก็บไว้แล้วค่อยเรียกออกมาใช้ก็ได้เอาที่เราสะดวกเลย
โค้ด: เลือกทั้งหมด
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.4.0/css/bootstrap.min.css">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.4.1/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.4.0/js/bootstrap.min.js"></script>
code ในส่วนนี้ใส่ไว้ในแท็ก body นะครับ
โค้ด: เลือกทั้งหมด
<div class="container">
<h2>ตัวอยางการใช้ Carousel</h2>
<br>
<div id="myCarousel" class="carousel slide" data-ride="carousel">
<!-- Indicators -->
<ol class="carousel-indicators">
<li data-target="#myCarousel" data-slide-to="0" class="active"></li>
<li data-target="#myCarousel" data-slide-to="1"></li>
<li data-target="#myCarousel" data-slide-to="2"></li>
</ol>
โค้ด: เลือกทั้งหมด
<div class="carousel-inner">
<div class="item active">
<img src="ที่อยู่ภาพ" alt="Los Angeles" style="width:100%;">
</div>
<div class="item">
<img src="ที่อยู่ภาพ" alt="Chicago" style="width:100%;">
</div>
<div class="item">
<img src="ที่อยู่ภาพ" alt="New york" style="width:100%;">
</div>
</div>
โค้ด: เลือกทั้งหมด
<a class="left carousel-control" href="#myCarousel" data-slide="prev">
<span class="glyphicon glyphicon-chevron-left"></span>
<span class="sr-only">Previous</span>
</a>
<a class="right carousel-control" href="#myCarousel" data-slide="next">
<span class="glyphicon glyphicon-chevron-right"></span>
<span class="sr-only">Next</span>
</a>
</div>
</div>
เท่านี้เว็บของเราก็จะมีภาพslied ที่สวยงามขึ้นมาแล้วล่ะครับเป็นอย่างไรกันบ้างครับสำหรับวิธีนี้เป็นอะไรที่ง่าย ๆ เลยทีเดียวก็หวังว่าผู้ที่เข้ามาอ่านบทความนี้จะได้ประโยชน์จากบทความนี้ไม่มากก็น้อยนะครับ