ปลั๊กอินม้าหมุน
ปลั๊กอินม้าหมุนเป็นส่วนประกอบสำหรับการขี่จักรยานผ่านองค์ประกอบเช่นม้าหมุน (สไลด์โชว์)
เคล็ดลับ: ปลั๊กอินสามารถรวมเป็นรายบุคคล (โดยใช้ Bootstrap's แต่ละบุคคล "carousel.js" ไฟล์) หรือทั้งหมดในครั้งเดียว (โดยใช้ "bootstrap.js" หรือ "bootstrap.min.js" )
ตัวอย่างม้าหมุน
ชาเนีย
บรรยากาศในเนียมีสัมผัสของฟลอเรนซ์และเวนิส
ชาเนีย
บรรยากาศในเนียมีสัมผัสของฟลอเรนซ์และเวนิส
ดอกไม้
ดอกไม้ที่สวยงามใน Kolymbari ครีต
ดอกไม้
ดอกไม้ที่สวยงามใน Kolymbari ครีต
หมายเหตุ: Carousels ยังไม่ได้รับการสนับสนุนอย่างถูกต้องใน Internet Explorer 9 และก่อนหน้านี้ (เพราะพวกเขาใช้การเปลี่ยน CSS3 และภาพเคลื่อนไหวเพื่อให้บรรลุผลภาพนิ่ง)
วิธีการสร้างม้าหมุน
ตัวอย่างต่อไปนี้แสดงให้เห็นถึงวิธีการสร้างม้าหมุนพื้นฐาน
ตัวอย่าง
<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>
<div
class="item">
<img src="img_chania2.jpg"
alt="Chania">
</div>
<div
class="item">
<img src="img_flower.jpg"
alt="Flower">
</div>
<div class="item">
<img src="img_flower2.jpg" alt="Flower">
</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>
ลองตัวเอง» ตัวอย่างอธิบาย
สุด <div> :
คิวต้องใช้รหัส (ในกรณีนี้ id="myCarousel" ) สำหรับการควบคุมม้าหมุนทำงานอย่างถูกต้อง
class="carousel" ระบุว่านี้ <div> มีม้าหมุน
.slide ชั้นเพิ่มการเปลี่ยนแปลง CSS และภาพเคลื่อนไหวที่มีผลบังคับใช้ซึ่งจะทำให้รายการที่เลื่อนเมื่อแสดงรายการใหม่ งดระดับนี้หากคุณไม่ต้องการผลกระทบนี้
data-ride="carousel" แอตทริบิวต์บอกเงินทุนเพื่อเริ่มต้นการเคลื่อนไหวม้าหมุนทันทีเมื่อมีการโหลดหน้าเว็บ
ว่า "ตัวชี้วัด" ส่วนหนึ่ง:
ตัวชี้วัดที่เป็นจุดเล็ก ๆ ที่ด้านล่างของแต่ละสไลด์ (ซึ่งแสดงจำนวนภาพนิ่งที่มีอยู่ในม้าหมุนและเลื่อนที่ผู้ใช้กำลังดู)
ตัวชี้วัดที่ระบุไว้ในรายการสั่งซื้อที่มีระดับ .carousel-indicators
data-target แอตทริบิวต์ชี้ไปยัง ID ของม้าหมุนที่
data-slide-to แสดงที่มาระบุว่าเลื่อนไปถึงเมื่อคลิกที่จุดที่เฉพาะเจาะจง
"การ Wrapper สำหรับภาพนิ่ง" ส่วนหนึ่ง:
สไลด์ที่ระบุไว้ใน <div> กับชั้น .carousel-inner
เนื้อหาของแต่ละสไลด์ถูกกำหนดไว้ใน <div> กับชั้น .item นี้จะมีข้อความหรือภาพ
.active ระดับความต้องการที่จะเพิ่มให้เป็นหนึ่งในภาพนิ่ง มิฉะนั้นม้าหมุนจะมองไม่เห็น
"ซ้ายขวาและการควบคุม" ส่วนหนึ่ง:
รหัสนี้จะเพิ่ม "ซ้าย" และปุ่ม "สิทธิ" ที่ช่วยให้ผู้ใช้สามารถกลับไปมาระหว่างภาพนิ่งด้วยตนเอง
data-slide แอตทริบิวต์ยอมรับคำหลัก "prev" หรือ "next" ซึ่งจะเปลี่ยนแปลงตำแหน่งสไลด์เทียบกับตำแหน่งปัจจุบัน
เพิ่มคำอธิบายภาพสไลด์
เพิ่ม <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>
ลองตัวเอง» กรอก Bootstrap หมุนอ้างอิง
สำหรับการอ้างอิงสมบูรณ์ของตัวเลือกม้าหมุนทุกวิธีการและเหตุการณ์ที่เกิดขึ้นไปที่เรา Bootstrap JS Carousel อ้างอิง