ปลั๊กอิน Bootstrap Carousel เป็นวิธีที่ยืดหยุ่นและตอบสนองได้ในการเพิ่มแถบเลื่อนลงในเว็บไซต์ของคุณ นอกจากนั้นเนื้อหามีความยืดหยุ่นพอที่จะเป็นภาพเฟรมที่ฝังตัววิดีโอหรือเนื้อหาประเภทอื่น ๆ ที่คุณต้องการวาง
หากคุณต้องการอ้างอิงฟังก์ชั่นของปลั๊กอินแยกกันคุณต้องอ้างอิง carousel.js หรือตามที่กล่าวไว้ในบท ภาพรวมปลั๊กอิน Bootstrap คุณสามารถอ้างถึง bootstrap.js หรือรุ่นบีบอัดของ bootstrap.min.js
1. ตัวอย่าง
ด้านล่างเป็นสไลด์ง่าย ๆ ที่แสดงส่วนประกอบทั่วไปขององค์ประกอบการวนรอบโดยใช้ปลั๊กอิน Bootstrap Carousel ในการใช้ Carousel คุณเพียงแค่ต้องเพิ่มรหัสด้วยเครื่องหมายนั้น ไม่จำเป็นต้องใช้แอตทริบิวต์ข้อมูลเพียงแค่การพัฒนาตามคลาสอย่างง่าย
<! doctype html> <html> <head> <dite> อินสแตนซ์บูทสแตนซ์- ปลั๊กอินม้าหมุนง่าย </title> <link href = "/bootstrap/css/bootstrap.min.css" rel = "stylesheet"> <script src = "/scripts/jquery.min.min.min.min.min.min.min src = "/bootstrap/js/bootstrap.min.js"> </script> <body> <div id = "mycarousel"> <!-ตัวบ่งชี้ Carousel-> <ol> <li data-target = "#mycarousel" data-slide-to = "0" data-target = "#mycarousel" data-slide-to = "2"> </li> </ol> <!-โครงการ Carousel-> <div> <img src = "/media/uploads/2014/07/slide1.png"> </div> <img src = "/media/uploads/2014/07/slide3.png"> </div> </div> <!-การนำทางม้าหมุน-> <a href = "#mycarousel" data-slide = "prev"> </body> </html>
ผลลัพธ์มีดังนี้:
ปลั๊กอินม้าหมุนง่ายๆ
2. ชื่อเสริม
คุณสามารถเพิ่มชื่อลงในสไลด์ผ่านองค์ประกอบ. carousel-caption ภายใน. item เพียงแค่ใส่ HTML เสริมใด ๆ ที่นั่นและจะได้รับการจัดตำแหน่งและจัดรูปแบบโดยอัตโนมัติ ตัวอย่างต่อไปนี้แสดงสิ่งนี้:
<! doctype html> <html> <head> <title> อินสแตนซ์ bootstrap - ชื่อเรื่องของปลั๊กอิน Carousel </title> <link href = "/bootstrap/css/bootstrap.min.css" rel = "Stylesheet"> <script src = "/scripts/jquery.min.min src = "/bootstrap/js/bootstrap.min.js"> </script> <body> <div id = "mycarousel"> <!-ตัวบ่งชี้ Carousel-> <ol> <li data-target = "#mycarousel" data-slide-to = "0" data-target = "#mycarousel" data-slide-to = "2"> </li> </ol> <!-โครงการ Carousel-> <div> <img src = "/media/uploads/2014/07/slide1.png" src = "/media/uploads/2014/07/slide2.png"> <div> title 2 </div> </div> <div> <img src = "/media/uploads/2014/07/slide3.png"> <div> data-slide = "prev"> ‹</a> <a href = "#mycarousel" data-slide = "next"> </a> </div> </body> </html>
ผลลัพธ์มีดังนี้:
ชื่อปลั๊กอินม้าหมุน
3. การใช้งาน
ผ่านแอตทริบิวต์ข้อมูล: การใช้แอตทริบิวต์ข้อมูลเป็นเรื่องง่ายที่จะควบคุมตำแหน่งของม้าหมุน
สไลด์ข้อมูลคุณสมบัติยอมรับคำหลัก PREV หรือถัดไปเพื่อเปลี่ยนตำแหน่งของสไลด์ที่สัมพันธ์กับตำแหน่งปัจจุบัน
ใช้สไลด์ข้อมูลเพื่อดัชนีเลื่อนดิบที่ด้านล่างของเตียงหมุน data-slide-to = "2" จะย้ายตัวเลื่อนไปยังดัชนีเฉพาะและดัชนีนับตั้งแต่ 0
คุณสมบัติ Data-Ride = "Carousel" ใช้เพื่อทำเครื่องหมายม้าหมุนที่เริ่มเล่นแอนิเมชั่นเมื่อโหลดหน้าเว็บ
ผ่าน JavaScript: Carousel สามารถเรียกได้ด้วยตนเองผ่าน JavaScript ดังที่แสดงด้านล่าง:
$ ('. Carousel'). Carousel ()
4. ตัวเลือก
มีตัวเลือกบางอย่างที่ผ่านคุณสมบัติข้อมูลหรือ JavaScript ตารางต่อไปนี้แสดงรายการตัวเลือกเหล่านี้:
V. วิธีการ
นี่คือวิธีการที่มีประโยชน์ในปลั๊กอินม้าหมุน:
VI. ตัวอย่าง
ตัวอย่างต่อไปนี้แสดงให้เห็นถึงการใช้วิธี:
<! doctype html> <html> <head> <mheat> อินสแตนซ์ bootstrap - วิธีปลั๊กอิน Carousel </title> <link href = "/bootstrap/css/bootstrap.min.css" rel = "stylesheet"> <script src = "/scripts/jquery.min.min.min.min.min.min.min.min src = "/bootstrap/js/bootstrap.min.js"> </script> <body> <div id = "mycarousel"> <!-ตัวบ่งชี้ Carousel-> <ol> <li data-target = "#mycarousel" data-slide-to = "0" data-target = "#mycarousel" data-slide-to = "2"> </li> </ol> <!-โครงการ Carousel-> <div> <img src = "/media/uploads/2014/07/slide1.png"> </div> <img src = "/media/uploads/2014/07/slide3.png"> </div> </div> <!-การนำทางม้าหมุน-> <a href = "#mycarousel" data-slide = "prev"> style = "text-allign: center;"> <input type = "button" value = "start"> <input type = "button" value = "Pause"> <input type = "button" value = "slide ก่อนหน้า"> <input type = "ปุ่ม" value = "slide next"> </div> </div> <script> $ (function () {// เริ่มต้น Carousel $ (". start-slide") คลิก (ฟังก์ชั่น () {$ ("#mycarousel") carousel ('cycle');}); // carousel $ (" }; $ (". slide next") คลิก (function () {$ ("#mycarousel") carousel ('next');}); $ ("#mycarousel") Carousel (1);}); }); </script> </body> </html>ผลลัพธ์มีดังนี้:
วิธีปลั๊กอินม้าหมุน
7. เหตุการณ์
ตารางต่อไปนี้แสดงรายการเหตุการณ์ที่จะใช้ในปลั๊กอิน Carousel เหตุการณ์เหล่านี้สามารถใช้เป็นตะขอในฟังก์ชั่น
ตัวอย่าง
ตัวอย่างต่อไปนี้แสดงให้เห็นถึงการใช้งานเหตุการณ์:
<! doctype html> <html> <head> <head> <title> bootstrap อินสแตนซ์- เหตุการณ์ปลั๊กอินม้าหมุน </title> <link href = "/bootstrap/css/bootstrap.min.css" rel = "stylesheet"> <script src = "/scripts/jquery.min.min.min.min.min.min.min src = "/bootstrap/js/bootstrap.min.js"> </script> <body> <div id = "mycarousel"> <!-Carousel Metric-> <ol> <li data-target = "#mycarousel" data-slide-to = "0" data-target = "#mycarousel" data-slide-to = "2"> </li> </ol> <!-โครงการ Carousel-> <div> <img src = "/media/uploads/2014/07/slide1.png"> </div> <img src = "/media/uploads/2014/07/slide3.png"> </div> </div> <!-การนำทางม้าหมุน-> <a href = "#mycarousel" data-slide = "prev"> $ ('#mycarousel') บน ('slide.bs.carousel', function () {alert ("กะพริบเหตุการณ์ทันทีเมื่อมีการเรียกวิธีสไลด์อินสแตนซ์");});}); - </script> </body> </html>ผลลัพธ์มีดังนี้:
กิจกรรมปลั๊กอินม้าหมุน
ตามบทช่วยสอนข้างต้นฉันทำตัวอย่างของตัวเอง:
ปลั๊กอินม้าหมุนเล่นภาพขนาดใหญ่หลายขนาดเท่ากันตามลำดับ
// ตัวอย่างพื้นฐาน <div id = "mycarousel"> <ol> <li data-target = "#mycarousel" data slide-to = "0"> </li> <li data-target = "#mycarousel" data-slide-to = "1"> </li> src = "img/slide1.png"> </div> <div> <img src = "img/slide2.png"> </div> <div> <img src = "img/slide2.png"> </div> <div> data-slide = "prev"> ‹</a> <a href = "#mycarousel" data-slide = "next"> </a> </div>
คุณลักษณะข้อมูลคำอธิบาย:
1.Data-Slide ยอมรับคำหลัก PREV หรือถัดไปเพื่อเปลี่ยนตำแหน่งของสไลด์ที่สัมพันธ์กับตำแหน่งปัจจุบัน
2.Data-slide-to สร้างดัชนีเลื่อนดั้งเดิมที่ด้านล่างของม้าหมุน data-slide-to = "2" จะย้ายตัวเลื่อนไปยังดัชนีเฉพาะและดัชนีนับตั้งแต่ 0
3.Data-Ride = "Carousel" แท็กผู้ใช้แท็ก Carousel เริ่มเล่นแอนิเมชั่นเมื่อโหลดหน้าเว็บ
หากคุณเรียกมันใน JavaScript ให้ใช้วิธีการจับคู่คีย์-ค่าโดยตรงและลบ data-;
// ตั้งค่าคุณสมบัติที่กำหนดเอง
$ ('#mycarousel') carousel ({// ตั้งค่าการเล่นอัตโนมัติ/2 วินาทีช่วงเวลา: 2000, // ตั้งค่าเหตุการณ์หยุดชั่วคราว: 'hover', // เล่นเพียงครั้งเดียว wrap: false,});ปลั๊กอิน Carousel ยังมีวิธีการบางอย่างดังนี้:
// คลิกปุ่มเพื่อเรียกใช้งาน $ ('ปุ่ม') บน ('คลิก', function () {// หลังจากคลิก, $ ('#mycarousel'). Carousel ('cycle'); // อื่น ๆ ที่คล้ายกัน});เหตุการณ์
$ ('#mycarousel'). on ('slide.bs.carousel', function () {Alert ('ฟรีทันทีเมื่อโหมดอินสแตนซ์สไลด์เรียกว่า');}); $ ('#mycarousel'). on ('slid.bs.carousel', function () {Alert ('ฟรีเมื่อม้าหมุนเสร็จสไลด์');});สำหรับเนื้อหาเพิ่มเติมโปรดดูที่: การสอนการเรียนรู้ bootstrap
ข้างต้นเป็นเรื่องเกี่ยวกับบทความนี้ ฉันหวังว่ามันจะเป็นประโยชน์สำหรับทุกคนในการเรียนรู้ปลั๊กอิน Bootstrap Carousel