สร้างภาพ slied show ด้วย Bootstrap

CSS Knowledge เป็น บอร์ดรวามความรู้ CCC เน้นบทความ แนวทางการเขียนโปรแกรม บันทึกกันลืม เพื่อให้สมาชิกได้เขียนความรู้ที่ตัวเองมีให้สมาชิกท่านอื่นๆ ได้ เข้ามาอ่าน และ ไว้อ่านเองกันลืมด้วย

Moderators: mindphp, ผู้ดูแลกระดาน

User avatar
jamepiyawat
PHP VIP Members
PHP VIP Members
Posts: 1485
Joined: 21/05/2019 10:45 am

สร้างภาพ slied show ด้วย Bootstrap

Post by jamepiyawat » 01/08/2019 6:02 pm

สร้าง slied show ด้วย Bootstrap

หลาย ๆ คนก็คงจะคิดว่าการทำภาพ slied show นั้นจะมี code ที่ยาวและไม่น่าจะทำความเข้าใจได้ง่ายเลยแต่บทความนี้ก็จะมาแสดง code ในการทำภาพโดยใช้ class Carousel ของ Bootstrap มานำเสนอกันจะเป็นอย่างไรลองไปดูกันเลย

อันดับแรกเราก็ต้องเรียกใช้ไฟร์ของ Bootstrap ก่อน จะใช้แบบนี้เลยก็ได้หรือว่าจะโหลดเก็บไว้แล้วค่อยเรียกออกมาใช้ก็ได้เอาที่เราสะดวกเลย

Code: Select all

<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>
จากนั้นเราก็จะมาตั้งค่าก่อนว่าเราจะใส่ภาพจำนวนเท่าไรในตัวอย่างนี้ก็จะเลือกแค่ 3 ภาพนะครับ
code ในส่วนนี้ใส่ไว้ในแท็ก body นะครับ

Code: Select all

<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>
แล้วเราก็มาเลือกภาพที่จะให้ slied กันเลย

Code: Select all

<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>
จากนั้นเราก็จะมาใส่ลูกศรที่ให้ผู้ใช้คลิ๊กซ้ายขาวกันเลย

Code: Select all

<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>
ผลลัทธ์ที่ได้
Selection_999(252).png
Selection_999(251).png

เท่านี้เว็บของเราก็จะมีภาพslied ที่สวยงามขึ้นมาแล้วล่ะครับเป็นอย่างไรกันบ้างครับสำหรับวิธีนี้เป็นอะไรที่ง่าย ๆ เลยทีเดียวก็หวังว่าผู้ที่เข้ามาอ่านบทความนี้จะได้ประโยชน์จากบทความนี้ไม่มากก็น้อยนะครับ

Return to “CSS Knowledge”

Users browsing this forum: No registered users and 2 guests