ม้าหมุนบูต (หมุน) วิดเจ็ต

ก่อนหน้านี้: Bootstrap เท่า (ยุบ) วิดเจ็ต

ถัดไป: Bootstrap นำทางเพิ่มเติม (ติด) วิดเจ็ต

บูตม้าหมุน (Carousel) plug-in ที่มีการตอบสนองความยืดหยุ่นในการเพิ่มเว็บไซต์ลักษณะเลื่อนสไตล์ นอกจากนี้เนื้อหามีความยืดหยุ่นเพียงพออาจจะเป็นภาพกรอบฝังวิดีโอหรือชนิดอื่น ๆ ของเนื้อหาที่คุณต้องการที่จะวาง

หากคุณต้องการที่จะอ้างถึงบุคคล Plug-in คุณสมบัติที่คุณจะต้องอ้างอิงcarousel.jsหรือเป็น เงินทุนปลั๊กอินภาพรวม บทที่กล่าวถึงคุณสามารถดูbootstrap.jsหรือเวอร์ชันบีบอัดbootstrap.min.js

ตัวอย่าง

นี่คือสไลด์ง่ายโดยใช้เงินทุนม้าหมุน (Carousel) plug-in ที่แสดงให้เห็นถึงองค์ประกอบห่วงของส่วนประกอบที่พบบ่อย เพื่อให้บรรลุการหมุนคุณจะต้องเพิ่มโค้ดที่มีแท็กที่ ไม่จำเป็นต้องใช้คุณลักษณะของข้อมูลจะต้องพัฒนาระดับตามง่ายสามารถ

ตัวอย่าง

ลอง»

ผลมีดังนี้

ชื่อตัวเลือก

คุณสามารถเพิ่มคำอธิบายภาพสไลด์โดยองค์ประกอบ.carousel-คำบรรยายใต้ภาพ .itemภายใน เพียง แต่คุณต้องวาง HTML ไม่จำเป็นใด ๆ ที่ที่มันจะถูกจัดตำแหน่งและจัดรูปแบบอัตโนมัติ ตัวอย่างต่อไปนี้แสดงให้เห็นถึงจุดนี้:

ตัวอย่าง

<div id = "myCarousel" class = "ม้าหมุนสไลด์"> <! - ม้าหมุน (Carousel) ดัชนี -> <ol class = "ม้าหมุน-หุ้น"> <li ข้อมูล target = "#myCarousel" ข้อมูลสไลด์ไป = "0 " class = "ใช้งาน"> </ li> <li ข้อมูล target = "#myCarousel" ข้อมูลสไลด์ไป = "1 "> </ li> <li ข้อมูล target = "#myCarousel" ข้อมูลสไลด์ไป = "2 "> </ li> </ ol> <! - ม้าหมุน (Carousel) โครงการ -> <div class = "ม้าหมุน-ภายใน"> <div class = "รายการที่ใช้งาน"> <img src = "/wp-content/uploads/2014/07/slide1.png" alt = "ภาพนิ่งแรก"> <div class = "ม้าหมุน-คำบรรยายใต้ภาพ"> ชื่อ 1 </ div> </ div> <div class = "รายการ"> <img src = "/wp-content/uploads/2014/07/slide2.png" alt = "ภาพนิ่งที่สอง"> <div class = "ม้าหมุน-คำบรรยายใต้ภาพ"> ชื่อ 2 </ div> </ div> <div class = "รายการ"> <img src = "/wp-content/uploads/2014/07/slide3.png" alt = "ภาพนิ่งที่สาม"> <div class = "ม้าหมุน-คำบรรยายใต้ภาพ"> ชื่อ 3 </ div> </ div> </ div> <! - ม้าหมุน (Carousel) Navigation -> <a class = "ม้าหมุนควบคุมซ้าย" href = "#myCarousel" ข้อมูลภาพนิ่ง = "ย้อนกลับ"> & lsaquo; </ A> <a class = "ม้าหมุนควบคุมที่ถูกต้อง" href = "#myCarousel" ข้อมูลภาพนิ่ง = "ถัดไป"> & rsaquo; </ A> </ div>

ลอง»

ผลมีดังนี้

การใช้

ผ่านแอตทริบิวต์: ข้อมูลสถานที่ให้บริการสามารถควบคุมม้าหมุนตำแหน่ง (หมุน) ได้อย่างง่ายดาย
- ข้อมูลคุณลักษณะสไลด์ยอมรับก่อนหน้าคำหลักหรือถัดไปในการเปลี่ยนตำแหน่งของสไลด์เทียบกับตำแหน่งปัจจุบัน
- โดยใช้ข้อมูลที่สไลด์ที่จะผ่านสหายที่จะสไลด์เดิมดัชนีล้อข้อมูลสไลด์ไป = "2" จะเลื่อนตัวเลื่อนไปดัชนีเฉพาะดัชนีจาก 0 ถึงเริ่มนับ
- ข้อมูลนั่ง = แอตทริบิวต์ "ม้าหมุน"ถูกนำมาใช้ในการทำเครื่องหมายการหมุนเมื่อโหลดหน้าเว็บแล้วที่จะเริ่มต้นการเล่นภาพยนตร์
โดย javascript: ม้าหมุน (Carousel) สามารถเรียกตนเองผ่านทางจาวาสคริปต์ดังต่อไปนี้:
```
$ ( '. ม้าหมุน'). ม้าหมุน ()
```

ตัวเลือก

มีตัวเลือกบางอย่างจะผ่านข้อมูลแอตทริบิวต์หรือ JavaScript ที่จะผ่าน ตารางต่อไปนี้แสดงรายการตัวเลือกเหล่านี้:

选项名称	类型/默认值	Data 属性名称	描述
interval	number 默认值：5000	data-interval	自动循环每个项目之间延迟的时间量。如果为 false，轮播将不会自动循环。
pause	string 默认值："hover"	data-pause	鼠标进入时暂停轮播循环，鼠标离开时恢复轮播循环。
wrap	boolean 默认值：true	data-wrap	轮播是否连续循环。

ทาง

นี่คือบางส่วนของม้าหมุน (Carousel) plug-in วิธีที่มีประโยชน์:

方法	描述	实例
.carousel(options)	初始化轮播为可选的 options 对象，并开始循环项目。	$('#identifier').carousel({ interval: 2000 })
.carousel('cycle')	从左到右循环轮播项目。	$('#identifier').carousel('cycle')
.carousel('pause')	停止轮播循环项目。	$('#identifier').carousel('pause')
.carousel(number)	循环轮播到某个特定的帧（从 0 开始计数，与数组类似）。	$('#identifier').carousel(number)
.carousel('prev')	循环轮播到上一个项目。	$('#identifier').carousel('prev')
.carousel('next')	循环轮播到下一个项目。	$('#identifier').carousel('next')

ตัวอย่าง

ตัวอย่างต่อไปนี้แสดงให้เห็นถึงวิธีการ:

ตัวอย่าง

<div id = "myCarousel" class = "ม้าหมุนสไลด์"> <! - ม้าหมุน (Carousel) ดัชนี -> <ol class = "ม้าหมุน-หุ้น"> <li ข้อมูล target = "#myCarousel" ข้อมูลสไลด์ไป = "0 " class = "ใช้งาน"> </ li> <li ข้อมูล target = "#myCarousel" ข้อมูลสไลด์ไป = "1 "> </ li> <li ข้อมูล target = "#myCarousel" ข้อมูลสไลด์ไป = "2 "> </ li> </ ol> <! - ม้าหมุน (Carousel) โครงการ -> <div class = "ม้าหมุน-ภายใน"> <div class = "รายการที่ใช้งาน"> <img src = "/wp-content/uploads/2014/07/slide1.png" alt = "ภาพนิ่งแรก"> </ div> <div class = "รายการ"> <img src = "/wp-content/uploads/2014/07/slide2.png" alt = "ภาพนิ่งที่สอง"> </ div> <div class = "รายการ"> <img src = "/wp-content/uploads/2014/07/slide3.png" alt = "ภาพนิ่งที่สาม"> </ div> </ div> <! - ม้าหมุน (Carousel) Navigation -> <a class = "ม้าหมุนควบคุมซ้าย" href = "#myCarousel" ข้อมูลภาพนิ่ง = "ย้อนกลับ"> & lsaquo; </ a> <a class = "ม้าหมุนควบคุมที่ถูกต้อง" href = "#myCarousel" ข้อมูลภาพนิ่ง = "ถัดไป"> & rsaquo; </ a> <! - ปุ่มควบคุม -> <div style = "text-align: ศูนย์ ;"> <input type = "ปุ่ม" class = "BTN เริ่มสไลด์" value = "Start"> <input type = "ปุ่ม" class = "BTN หยุดสไลด์" value = "หยุด"> <input type = "ปุ่ม" class = "BTN ก่อนหน้าสไลด์" value = "สไลด์ก่อนหน้า"> <input type = "ปุ่ม" class = "btn ต่อไปสไลด์" value = "สไลด์ถัดไป"> <input type = "ปุ่ม" class = "BTN สไลด์หนึ่ง" value = "สไลด์ 1"> <input type = "ปุ่ม" class = "BTN สไลด์สอง" value = "Slide 2"> <input type = "ปุ่ม" class = "BTN สไลด์สาม" value = "สไลด์ 3"> </ div> </ div> <script>

$ (ฟังก์ชั่น () { // เตรียมม้าหมุน $ ( ".start สไลด์") คลิก (ฟังก์ชั่น () {$ ( "#myCarousel") ม้าหมุน (รอบ) ;. }) ;. // หมุนหยุด . $ ( ".pause สไลด์" ) คลิก (ฟังก์ชั่น () {. $ ( "#myCarousel") ม้าหมุน ( 'หยุด');}); // หมุนห่วงในโครงการ $ ( ".prev สไลด์") คลิก (ฟังก์ชั่น () {$ ( "#myCarousel") ม้าหมุน (ย้อนกลับ) ;. }) ;. // หมุนรอบรายการถัดไป $ ( ".next สไลด์") คลิก (ฟังก์ชั่น () {$ ( "#myCarousel") ม้าหมุน ( 'ถัดไป') ;. }) ;. // ห่วงหมุนกรอบที่เฉพาะเจาะจง $ ( ".slide-One") คลิก. (ฟังก์ชั่น () {$ ( "#myCarousel") ม้าหมุน (0) ;. }) ;. $ ( ".slide สอง") คลิก (ฟังก์ชั่น () {$ ( "#myCarousel") ม้าหมุน (1) .;}); $ ( ".slide สาม") คลิก (ฟังก์ชั่น () {$ ( "#myCarousel") ม้าหมุน (2); .. });});

</ script>

ลอง»

ผลมีดังนี้

เหตุการณ์

ตารางต่อไปนี้แสดงม้าหมุน (Carousel) plug-in ที่จะใช้ในกรณีที่ เหตุการณ์เหล่านี้สามารถนำมาใช้เมื่อฟังก์ชั่นเบ็ด

事件	描述	实例
slide.bs.carousel	当调用 slide 实例方法时立即触发该事件。	$('#identifier').on('slide.bs.carousel', function () { // 执行一些动作... })
slid.bs.carousel	当轮播完成幻灯片过渡效果时触发该事件。	$('#identifier').on('slid.bs.carousel', function () { // 执行一些动作... })

ตัวอย่าง

ตัวอย่างต่อไปนี้แสดงให้เห็นถึงการใช้งานของเหตุการณ์:

ตัวอย่าง

$ (ฟังก์ชั่น () {$ ( '#myCarousel'). เมื่อวันที่ ( 'slide.bs.carousel' ฟังก์ชั่น () { การแจ้งเตือน ( "เมื่อวิธีการเช่นภาพนิ่งเรียกทันทีเรียกเหตุการณ์นี้.");});});

</ script>

ลอง»

ผลมีดังนี้