สไลด์โชว์ Bootstrap Carousel หลายรายการ

เผยแพร่แล้ว: 2016-03-17

ฉันจะเพิ่ม ตัวเลื่อนสไลด์โชว์ Bootstrap Carousel หลาย ตัวในหน้าเดียวหรือหน้าเดียวได้อย่างไร

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

การเพิ่มและสร้างตัวเลื่อนแบบวงล้อบูตสแตรปหลายตัวบนหน้านั้นง่ายและสะดวกมาก

เริ่มจากโค้ดตัวอย่างกันก่อน

หลังจากดาวน์โหลดซอร์สโค้ดเสร็จแล้ว คุณจะได้รับไฟล์ zip “multiple-bootstrap-carousels.zip” แตกไฟล์ zip ที่ใดก็ได้ในระบบคอมพิวเตอร์ท้องถิ่น

หลังจากการแตกไฟล์ คุณพบไดเร็กทอรีชื่อ "multiple-bootstrap-carousels" ในไดเร็กทอรีนั้น คุณจะได้รับเนื้อหาต่อไปนี้:

  1. CSS Directory
  2. ไดเรกทอรีแบบอักษร
  3. ไดเรกทอรีรูปภาพ
  4. JS Directory
  5. CSS Directory
  6. ไฟล์ HTML – multiple-bootstrap-carousels.html

หลักฐานเหล่านี้คืออะไร?

เนื้อหาเหล่านี้จำเป็นสำหรับการสร้างแถบเลื่อนแบบวงล้อหลายตัว

  • ไดเร็กทอรี CSS มีไฟล์ “bootstrap.min.css” ซึ่งใช้ในการออกแบบหน้า HTML ที่ตอบสนอง
  • ไดเร็กทอรี ฟอนต์ ถูกใช้โดย bootstrap CSS เพื่อสร้างไอคอนกราฟิกที่สร้างขึ้นต่างๆ การควบคุมการนำทางด้วยลูกศรเลื่อนแบบหมุนก็สร้างขึ้นด้วยสิ่งนี้ คุณสามารถตรวจสอบได้ที่นี่
  • ไดเร็กทอรี รูปภาพ มีรูปภาพทั้งหมดที่เราจะใช้ในสไลด์ของตัวเลื่อนแบบหมุน
  • ไดเร็กทอรี JS ประกอบด้วยไฟล์ js 2 ไฟล์ "jquery.min.js" และ "bootstrap.min.js" ไฟล์ jquery.min.js เป็นไลบรารี JavaScript จุดประสงค์ของ jquery ใช้ JavaScript บนเว็บไซต์ ไฟล์ bootstrap.min.js เป็นไฟล์ไลบรารี js กรอบงานบูตสแตรปซึ่งใช้สร้างภาพหมุนบูตสแตรป แบบฟอร์มโมเดล คำแนะนำเครื่องมือ แท็บ ฯลฯ ไฟล์ bootstrap.min.js ขึ้นอยู่กับไฟล์ jquery.min.js คุณต้องโหลด ก่อนใช้ bootstrap js คุณสามารถสำรวจเพิ่มเติมเกี่ยวกับไฟล์ไลบรารี bootstrap js ได้ที่นี่
  • ไฟล์ HTML (multiple-bootstrap-carousels.html) มีการออกแบบและส่วนโค้ดทั้งหมดของตัวเลื่อนแบบวงล้อหลายตัว

มาเรียนรู้เพิ่มเติมเกี่ยวกับไฟล์ multiple-bootstrap-carousels.html กัน

คุณควรเปิดไฟล์ HTML ในตัวแก้ไขโค้ดใดๆ หากคุณไม่ได้ติดตั้งเครื่องมือแก้ไขโค้ดบนคอมพิวเตอร์ จากนั้นให้ดาวน์โหลดเครื่องมือแก้ไขโค้ดค่าธรรมเนียม ดาวน์โหลดและติดตั้งเครื่องมือแก้ไขโค้ดใดก็ได้:

โน้ตแพดพลัส +
ดาวน์โหลด EditPlus +

ในส่วนหัว เราได้โหลดไฟล์ CSS & js ที่จำเป็นทั้งหมดและโค้ด JS แบบหมุนสี่รายการดังนี้:

รหัส

 <head>
 <title>ตัวอย่างสไลด์โชว์ Bootstrap Carousel หลายตัว</title>
 <meta charset="utf-8">
 <meta name="viewport" content="width=device-width, initial-scale=1">
 
 <!-- bootstrap css library -->
 <link rel="stylesheet" href="css/bootstrap.min.css">
 
 <!-- jQuery ไลบรารี่ล่าสุด (โหลดไลบรารีนี้ก่อน) -->
 <script src="js/jquery.min.js"></script>
 
 <!-- ไลบรารี bootstrap js -->
 <script src="js/bootstrap.min.js"></script>
 
 <!-- การปรับแต่งโค้ด css แบบหมุน -->
 <style>
 .carousel {
 /* คุณสามารถเพิ่มการปรับแต่ง css ได้ที่นี่ เช่น ความกว้างของความสูงของตัวเลื่อน */
 }
 </style>
 
 <!-- รหัส js แบบหมุน -->
 <script>

 /* สไลด์โชว์ภาพหมุนครั้งแรก */
 $('#carousel-1').carousel({
      // ระยะเวลาในการหน่วงเวลาระหว่างสไลด์ปั่นจักรยาน หากเป็นเท็จ จะไม่มีรอบ
      ช่วงเวลา: 500,

      // หยุดการเลื่อนเมาส์เพื่อเข้าสู่และดำเนินการต่อใน mouseleave
      หยุดชั่วคราว: "โฮเวอร์",

      // ว่าวงล้อควรวนต่อเนื่องหรือมีฮาร์ดสต็อปหรือไม่
      ห่อ: จริง

      // ว่าภาพหมุนควรตอบสนองต่อเหตุการณ์แป้นพิมพ์หรือไม่
      แป้นพิมพ์: จริง
 });
 
 
 /* สไลด์โชว์ภาพหมุนที่สอง */
 $('#carousel-2').carousel({
      ช่วงเวลา: 1,000,
      ห่อ: จริง
      แป้นพิมพ์: จริง
 });
 
 
 /* สไลด์โชว์ภาพหมุนที่สาม */
 $('#carousel-3').carousel({
     ช่วงเวลา: 2000,
     ห่อ: จริง
     แป้นพิมพ์: จริง
 });
 
 
 /* สไลด์โชว์ภาพหมุนที่ออกมา */
 $('#carousel-4').carousel({
     ช่วงเวลา: 3000,
     ห่อ: จริง
     แป้นพิมพ์: จริง
 });
 </script>
 </head>

ในส่วนเนื้อหา เรากำลังกำหนดโค้ด HTML แบบหมุนสองโค้ด ตอนนี้ อธิบายการทำงานของโค้ดตัวเลื่อนแรก เราได้แบ่งคลาสแถว div ออกเป็นสองคอลัมน์โดยใช้คลาส col-md-6 และในคอลัมน์แรก เราได้เพิ่มโค้ด HTML ของตัวเลื่อนแบบวงล้อตัวแรกเหมือนกับด้านล่าง

 <div class="row">
 <! -------------- เริ่มคอลัมน์แรก -------------->
 <div class="col-md-6">
  <div class="jumbotron">
   <center><h3>Carousel One</h3></center>
   <! -------------- เริ่มสไลด์โชว์ภาพสไลด์ครั้งแรก -------------->
   <div class="carousel slide" data-ride="carousel">
   <!-- สไลด์หัวข้อย่อย -->
   <ol class="carousel-indicators">
    <li data-target="#carousel-1" data-slide-to="0" class="active"></li>
    <li data-target="#carousel-1" data-slide-to="1"></li>
    <li data-target="#carousel-1" data-slide-to="2"></li>
   </ol>

   <!-- เสื้อคลุมสำหรับสไลด์ -->
   <div class="carousel-inner" role="listbox">
    
    <!-- สไลด์ 1 -->
    <div class="item active">
     <img src="images/girl-1.jpg" alt="ชาเนีย">
    </div>
 
    <!-- สไลด์ 2 -->
    <div class="item">
     <img src="images/girl-2.jpg" alt="ชาเนีย">
    </div>
 
    <!-- สไลด์ 3 -->
    <div class="item">
     <img src="images/girl-3.jpg" alt="ดอกไม้">
    </div>

   </div>

   <!-- ลูกศรควบคุมสไลด์ซ้ายและขวา -->
   <a class="left carousel-control" href="#carousel-1" role="button" data-slide="prev">
    <span class="glyphicon glyphicon-chevron-left" aria-hidden="true"></span>
    <span class="sr-only">ก่อนหน้า</span>
   </a>
   <a class="right carousel-control" href="#carousel-1" role="button" data-slide="next">
    <span class="glyphicon glyphicon-chevron-right" aria-hidden="true"></span>
    <span class="sr-only">ถัดไป</span>
   </a>
  </div>
  <!-------------- การแสดงภาพสไลด์แบบหมุนรอบแรก -------------->
  </div>
 </div>
 <!-------------- สิ้นสุดคอลัมน์แรก -------------->
</row>

มีตัวเลื่อนแบบหมุนสามส่วนในโค้ด HTML ด้านบน

  • กระสุนเลื่อน
  • สไลด์รูปภาพ
  • การนำทางด้วยแถบเลื่อน

ส่วน Slider Bullets นั้นสร้างโดยใช้แท็กรายการคำสั่งซื้อของ HTML <ol> ใช้คลาสชื่อ carousel-indicators ซึ่งกำหนดไว้ในไฟล์ CSS บูตสแตรป และแท็ก <li> แต่ละแท็กมีแอตทริบิวต์ data-target=”#carousel-1″ โดยที่ #carousel-1 เป็น ID เดียวกับที่เราใช้ในโค้ด js ของ carousel แรกในโค้ดตัวอย่าง

ส่วน Slider Image Slide มี div พร้อม รายการ คลาส ในแต่ละ div เราได้เพิ่มแท็กรูปภาพเพื่อโหลดภาพสไลด์

Slider Navigation ใช้เพื่อเลื่อนสไลด์ภาพไปทางซ้ายหรือทางขวา ลูกศรนำทางถูกสร้างขึ้นโดยไอคอนกราฟิกบูตสแตรปที่เรียกว่า Glyphicon ปุ่มนาวิเกตถูกรวมไว้ในแท็ก <a> สมอที่มีฟังก์ชันแอททริบิวต์ข้อมูลแบบวงล้อบูตสแตรปและคลาส การควบคุมแบบ วงล้อ ในแท็ก <a> ในแอตทริบิวต์ href เราได้เพิ่ม ID เดียวกัน ( #carousel-1 ) ตามที่เราเพิ่มไว้ก่อนหน้านี้ในส่วนสัญลักษณ์แสดงหัวข้อย่อย รหัสนี้ใช้ในโค้ด js ของสไลด์โชว์ภาพหมุนชุดแรกเพื่อเปิดใช้งานฟังก์ชันตัวเลื่อนตัวแรกในโค้ด HTML ของตัวเลื่อนตัวแรก

ในโค้ดตัวเลื่อนที่สอง เราได้กำหนด ID อื่น #carousel-2 สำหรับโค้ดตัวเลื่อนทั้งสามส่วน เช่น โค้ด js ของตัวเลื่อนตัวที่สอง สัญลักษณ์แสดงหัวข้อย่อยของตัวเลื่อนที่สอง และโค้ด HTML การนำทาง

ดาวน์โหลดโค้ดตัวอย่าง

หวัง! พวกคุณพบว่ารหัสการสอนและตัวอย่างนั้นอธิบายและใช้งานได้สำหรับคุณ เราได้แสดงความคิดเห็นในแต่ละส่วนของโค้ดในตัวอย่าง ดังนั้นคุณจึงสามารถเข้าใจโค้ดแต่ละโค้ดได้อย่างง่ายดาย

ถ้าคุณมีข้อเสนอแนะเกี่ยวกับภาษาการสอนและโค้ดตัวอย่างที่ดาวน์โหลดได้ โปรดเขียนถึงเราที่อีเมลของเรา ที่อยู่อีเมลของเราคือ awordpresslife{at}gmail{dot}com

ขอบคุณที่อ่าน ใช้ และสนับสนุนบทช่วยสอนนี้

ค้นหาลิงค์อ้างอิงที่เป็นประโยชน์ด้านล่างซึ่งเราต้องการเขียนบทช่วยสอนนี้ให้คุณ:

รับ Bootstrap
jQuery
W3Schools