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

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

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

ภาพประจำตัวสมาชิก
jamepiyawat
PHP VIP Members
PHP VIP Members
โพสต์: 2008
ลงทะเบียนเมื่อ: 21/05/2019 10:45 am

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

โพสต์ที่ยังไม่ได้อ่าน โดย jamepiyawat »

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

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

โค้ด: เลือกทั้งหมด

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

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

ผู้ใช้งานขณะนี้

สมาชิกกำลังดูบอร์ดนี้: ไม่มีสมาชิกใหม่ และบุคลทั่วไป 72