Bootstrap เป็นเฟรมเวิร์กส่วนหน้าสำหรับการพัฒนาอย่างรวดเร็วของเว็บแอปพลิเคชันและเว็บไซต์ Bootstrap ขึ้นอยู่กับ HTML, CSS และ JavaScript
กรณี
ต่อไปนี้เป็นเคสม้าหมุนที่ทำโดยปลั๊กอินและส่วนประกอบที่เกี่ยวข้องนี้
<div id = "carousel-example-generic" data-ride = "Carousel"> <!-ตัวบ่งชี้-> <ol> <li data-target = "#carousel-example-generic" data-slide-to = "0"> </li> data-target = "#carousel-example-generic" data slide-to = "2"> </li> </ol> <!-wrapper สำหรับสไลด์-> <div> <div> <img src = "... "> <div> ... data-slide = "prev"> <span> </span> </a> <a href = "#carousel-example-generic" data-slide = "next"> <span> </span> </a> </div>
Internet Explorer 8 & 9 ไม่สนับสนุนเอฟเฟกต์ภาพเคลื่อนไหวการเปลี่ยนแปลง
Bootstrap ใช้เอฟเฟกต์แอนิเมชั่นตาม CSS3 แต่ Internet Explorer 8 & 9 ไม่รองรับคุณสมบัติ CSS ที่จำเป็นเหล่านี้ ดังนั้นเอฟเฟกต์ภาพเคลื่อนไหวการเปลี่ยนแปลงจะหายไปเมื่อใช้เบราว์เซอร์ทั้งสอง ยิ่งกว่านั้นเราไม่ได้ตั้งใจจะใช้การใช้งานตามฟังก์ชั่นทางเลือก
ตัวเลือกเสริม
ใน. item ใด ๆ คุณสามารถเพิ่ม. carousel-caption ลงในแต่ละสไลด์ นอกจากนี้คุณยังสามารถเพิ่มรหัส HTML ใด ๆ ซึ่งจะจัดเรียงและจัดรูปแบบโดยอัตโนมัติ
900x500
<div> <img src = "... "> <div> <h3> ... </h3> <p> ... </p> </div> </div>
ปัญหาการเข้าถึง
ส่วนประกอบม้าหมุนไม่สามารถใช้งานได้กับมาตรฐานการเข้าถึง หากจำเป็นต้องใช้ความเข้ากันได้ให้พิจารณาตัวเลือกอื่น ๆ สำหรับการนำเสนอสไลด์
การใช้งาน
ผ่านคุณลักษณะข้อมูล
แอตทริบิวต์ข้อมูลสามารถควบคุมตำแหน่งของม้าหมุนได้อย่างง่ายดาย สไลด์ข้อมูลสามารถยอมรับคำหลักก่อนหน้าหรือคำหลักถัดไปที่ควบคุมตำแหน่งการเล่น นอกจากนี้ตัวห้อยสไลด์ที่เริ่มต้นด้วย 0 ยังสามารถส่งผ่านข้อมูลสไลด์ไปยัง
แอตทริบิวต์ data-ride = "Carousel" ใช้เพื่อทำเครื่องหมายส่วนประกอบม้าหมุนที่เริ่มต้นหลังจากโหลดหน้าเว็บ
ผ่าน JavaScript
เริ่มต้นองค์ประกอบม้าหมุนด้วยตนเอง:
การคัดลอกรหัสมีดังนี้:
$ ('. Carousel'). Carousel ()
ตัวเลือก
ตัวเลือกสามารถส่งผ่านคุณสมบัติข้อมูลหรือ JavaScript สำหรับแอตทริบิวต์ข้อมูลคุณต้องใส่ชื่อตัวเลือกหลังจาก data- ตัวอย่างเช่น data-interval = ""
ชื่อ ประเภทชื่อ เริ่มต้น อธิบาย เวลารอคอยสำหรับ หมายเลข ช่วงเวลา 5000 การหมุนสไลด์ หากเท็จม้าหมุนจะไม่เริ่มวนรอบโดยอัตโนมัติ หยุด ชั่วคราวสตริง "โฮเวอร์" เมาส์อยู่ในพื้นที่สไลด์และหยุดหมุนม้าหมุนและหนูออกจากม้าหมุน ห่อ บูลีน จริง ว่าม้าหมุนยังคงวนอยู่หรือไม่
วิธี
.Carousel (ตัวเลือก)
เริ่มต้นส่วนประกอบ Carousel ยอมรับพารามิเตอร์ตัวเลือกประเภทวัตถุเสริมและเริ่มลูปสไลด์
$ ('. Carousel'). Carousel ({Interval: 2000}). Carousel ('Cycle')หมุนรอบแต่ละเฟรมจากซ้ายไปขวา
.Carousel ('หยุดชั่วคราว')
หยุดม้าหมุน
.Carousel (หมายเลข)
วางตำแหน่งม้าหมุนไปยังเฟรมที่ระบุ (เฟรมตัวห้อยเริ่มต้นด้วย 0 คล้ายกับอาร์เรย์)
.Carousel ('prev')
กลับไปที่เฟรมก่อนหน้า
.Carousel ('ถัดไป')
ไปที่เฟรมถัดไป
เหตุการณ์
ส่วนประกอบม้าหมุนของ Bootstrap เปิดเผยสองเหตุการณ์สำหรับการฟัง
| ประเภทเหตุการณ์ | อธิบาย |
|---|---|
| slide.bs.carousel | เหตุการณ์นี้เริ่มต้นทันทีหลังจากเรียกใช้วิธี slide |
| slid.bs.carousel | มันถูกกระตุ้นเมื่อเล่นสไลด์โชว์ทั้งหมด |
$ ('#mycarousel'). on ('slide.bs.carousel', function () {// ทำอะไรสักอย่าง…})ด้านบนเป็นคำอธิบายโดยละเอียดของเคส Bootstrap Carousel Effect ตามปลั๊กอิน JS ที่แนะนำโดยตัวแก้ไข ฉันหวังว่ามันจะช่วยคุณได้!