JS ม้าหมุน (carousel.js)
ปลั๊กอินม้าหมุนเป็นส่วนประกอบสำหรับการขี่จักรยานผ่านองค์ประกอบเช่นม้าหมุน (สไลด์โชว์)
สำหรับการสอนเกี่ยวกับ Carousels อ่านของเรา Bootstrap หมุนกวดวิชา
หมายเหตุ: Carousels ยังไม่ได้รับการสนับสนุนอย่างถูกต้องใน Internet Explorer 9 และก่อนหน้านี้ (เพราะพวกเขาใช้การเปลี่ยน CSS3 และภาพเคลื่อนไหวเพื่อให้บรรลุผลภาพนิ่ง)
เรียน Carousel ปลั๊กอิน
| ชั้น | ลักษณะ |
|---|---|
| .carousel | สร้างม้าหมุน |
| .slide | เพิ่มการเปลี่ยนแปลง CSS และผลภาพเคลื่อนไหวเมื่อเลื่อนจากหนึ่งในรายการต่อไป นำระดับนี้หากคุณไม่ต้องการผลกระทบนี้ |
| .carousel-indicators | เพิ่มตัวชี้วัดม้าหมุน เหล่านี้เป็นจุดเล็ก ๆ ที่ด้านล่างของแต่ละสไลด์ (ซึ่งแสดงจำนวนภาพนิ่งที่มีอยู่ในม้าหมุนและเลื่อนที่ผู้ใช้กำลังดู) |
| .carousel-inner | เพิ่มสไลด์เพื่อม้าหมุน |
| .item | ระบุเนื้อหาของแต่ละสไลด์ |
| .left carousel-control | เพิ่มปุ่มซ้ายเพื่อหมุนซึ่งจะช่วยให้ผู้ใช้ที่จะกลับไประหว่างภาพนิ่ง |
| .right carousel-control | เพิ่มปุ่มขวาเพื่อหมุนซึ่งจะช่วยให้ผู้ใช้ที่จะก้าวไปข้างหน้าระหว่างภาพนิ่ง |
| .carousel-caption | ระบุคำอธิบายสำหรับม้าหมุน |
ผ่าน data-* แอตทริบิวต์
data-ride="carousel" แอตทริบิวต์ป็ม้าหมุน
data-slide และ data-slide-to แอตทริบิวต์ที่ระบุซึ่งเลื่อนที่จะไป
data-slide แอตทริบิวต์รับสองค่า: ย้อนกลับหรือถัดไปในขณะที่ data-slide-to ยอมรับตัวเลข
ตัวอย่าง
<!--
Carousel -->
<div id="myCarousel" class="carousel slide" data-ride="carousel">
<!--
Carousel Indicators -->
<li data-target="#myCarousel" data-slide-to="1"></li>
<!--
Carousel Controls -->
<a
class="left carousel-control" href="#myCarousel" data-slide="prev">
ลองตัวเอง» ผ่านทางจาวาสคริปต์
เปิดใช้งานด้วยตนเอง:
ตัวอย่าง
// Activate Carousel
$("#myCarousel").carousel();
// Enable
Carousel Indicators
$(".item").click(function(){
$("#myCarousel").carousel(1);
});
// Enable Carousel Controls
$(".left").click(function(){
$("#myCarousel").carousel("prev");
});
ลองตัวเอง» ตัวเลือกม้าหมุน
ตัวเลือกที่สามารถส่งผ่านข้อมูลผ่านทางคุณลักษณะหรือ JavaScript สำหรับแอตทริบิวต์ข้อมูลผนวกชื่อตัวเลือกในการ DATA- เช่นเดียวกับในช่วงข้อมูล = ""
| ชื่อ | ชนิด | ค่าเริ่มต้น | ลักษณะ | ลองมัน |
|---|---|---|---|---|
| interval | number, or the boolean false | 5000 | ระบุความล่าช้า (มิลลิวินาที) ระหว่างแต่ละสไลด์ หมายเหตุ: การตั้งค่าช่วงเวลาที่เป็นเท็จเพื่อหยุดรายการจากการเลื่อนอัตโนมัติ | ใช้ JS การใช้ข้อมูล |
| pause | string, or the boolean false | "hover" | หยุดม้าหมุนจะผ่านจากภาพนิ่งถัดไปเมื่อตัวชี้เมาส์เข้าม้าหมุนและเลื่อนการดำเนินการต่อเมื่อตัวชี้เมาส์ออกจากม้าหมุน หมายเหตุ: การตั้งค่าการหยุดชั่วคราวเป็นเท็จเพื่อหยุดความสามารถในการหยุดการทำงานชั่วคราวในโฉบ | ใช้ JS การใช้ข้อมูล |
| wrap | boolean | true | ระบุว่าม้าหมุนควรไปถึงภาพนิ่งทั้งหมดอย่างต่อเนื่องหรือหยุดที่สไลด์สุดท้าย
| ใช้ JS การใช้ข้อมูล |
วิธีม้าหมุน
ตารางต่อไปนี้แสดงวิธีม้าหมุนที่มีอยู่ทั้งหมด
| วิธี | ลักษณะ | ลองมัน |
|---|---|---|
| .carousel( options ) | ป็ม้าหมุนที่มีตัวเลือก ดูตัวเลือกข้างต้นสำหรับค่าที่ถูกต้อง | ลองมัน |
| .carousel("cycle") | ไปผ่านรายการม้าหมุนจากซ้ายไปขวา | ลองมัน |
| .carousel("pause") | หยุดม้าหมุนจากไปผ่านรายการ | ลองมัน |
| .carousel(number) | ไปที่รายการที่ระบุ (zero-based: รายการแรกคือ 0, รายการที่สองคือ 1, ฯลฯ .. ) | ลองมัน |
| .carousel("prev") | ไปที่รายการก่อนหน้า | ลองมัน |
| .carousel("next") | ไปยังรายการถัดไป | ลองมัน |
เหตุการณ์ม้าหมุน
ตารางต่อไปนี้แสดงเหตุการณ์ม้าหมุนที่มีอยู่ทั้งหมด
| เหตุการณ์ | ลักษณะ | ลองมัน |
|---|---|---|
| slide.bs.carousel | เกิดขึ้นเมื่อม้าหมุนเป็นเรื่องเกี่ยวกับที่จะเลื่อนจากที่หนึ่งไปอีกที่หนึ่ง | ลองมัน |
| slid.bs.carousel | เกิดขึ้นเมื่อม้าหมุนได้เสร็จสิ้นการเลื่อนจากที่หนึ่งไปอีกที่หนึ่ง | ลองมัน |
ตัวอย่าง
คำอธิบายภาพสไลด์
เพิ่ม <div class="carousel-caption"> ในแต่ละ <div class="item"> การสร้างคำบรรยายใต้ภาพสำหรับแต่ละภาพนิ่ง:
ตัวอย่าง
<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>
<li data-target="#myCarousel" data-slide-to="3"></li>
</ol>
<!-- Wrapper for slides -->
<div class="carousel-inner"
role="listbox">
<div class="item active">
<img src="img_chania.jpg" alt="Chania">
<div class="carousel-caption">
<h3>Chania</h3>
<p>The
atmosphere in Chania has a touch of Florence and Venice.</p>
</div>
</div>
<div
class="item">
<img src="img_chania2.jpg"
alt="Chania">
<div
class="carousel-caption">
<h3>Chania</h3>
<p>The atmosphere in Chania has a touch of Florence and Venice.</p>
</div>
</div>
<div
class="item">
<img src="img_flower.jpg"
alt="Flower">
<div
class="carousel-caption">
<h3>Flowers</h3>
<p>Beatiful
flowers in Kolymbari, Crete.</p>
</div>
</div>
<div class="item">
<img src="img_flower2.jpg" alt="Flower">
<div class="carousel-caption">
<h3>Flowers</h3>
<p>Beatiful
flowers in Kolymbari, Crete.</p>
</div>
</div>
</div>
<!-- Left and right controls -->
<a
class="left carousel-control" href="#myCarousel" role="button" data-slide="prev">
<span class="glyphicon glyphicon-chevron-left" aria-hidden="true"></span>
<span class="sr-only">Previous</span>
</a>
<a
class="right carousel-control" href="#myCarousel" role="button"
data-slide="next">
<span class="glyphicon glyphicon-chevron-right"
aria-hidden="true"></span>
<span class="sr-only">Next</span>
</a>
</div>
ลองตัวเอง»