ม้าหมุน
ส่วนประกอบสไลด์โชว์สำหรับการวนไปตามองค์ประกอบต่างๆ เช่น รูปภาพหรือสไลด์ข้อความ เช่น ภาพหมุน
มันทำงานอย่างไร
ภาพหมุนเป็นสไลด์โชว์สำหรับการวนดูเนื้อหาต่างๆ ที่สร้างขึ้นด้วยการแปลง CSS 3D และ JavaScript เล็กน้อย ใช้งานได้กับชุดรูปภาพ ข้อความ หรือมาร์กอัปที่กำหนดเอง นอกจากนี้ยังรองรับการควบคุมและตัวบ่งชี้ก่อนหน้า/ถัดไป
ในเบราว์เซอร์ที่รองรับPage Visibility APIภาพหมุนจะหลีกเลี่ยงการเลื่อนเมื่อผู้ใช้มองไม่เห็นหน้าเว็บ (เช่น เมื่อแท็บเบราว์เซอร์ไม่ทำงาน หน้าต่างเบราว์เซอร์จะถูกย่อให้เล็กสุด เป็นต้น)
prefers-reduced-motion
คิวรีสื่อ ดู
ส่วนการเคลื่อนไหวที่ลดลงของเอกสารการช่วยสำหรับการเข้าถึงของเรา
โปรดทราบว่าไม่รองรับภาพหมุนที่ซ้อนกัน และโดยทั่วไปแล้ว ภาพหมุนไม่สอดคล้องกับมาตรฐานการช่วยสำหรับการเข้าถึง
ตัวอย่าง
ภาพหมุนจะไม่ทำให้ขนาดสไลด์เป็นมาตรฐานโดยอัตโนมัติ ดังนั้น คุณอาจต้องใช้ยูทิลิตี้เพิ่มเติมหรือสไตล์ที่กำหนดเองเพื่อปรับขนาดเนื้อหาให้เหมาะสม แม้ว่าภาพหมุนจะสนับสนุนการควบคุมและตัวบ่งชี้ก่อนหน้า/ถัดไป แต่ก็ไม่ได้บังคับอย่างชัดเจน เพิ่มและปรับแต่งตามที่เห็นสมควร
.active
ต้องเพิ่มชั้นเรียนลงในสไลด์ใดสไลด์หนึ่งมิฉะนั้น ภาพหมุนจะไม่ปรากฏให้เห็น นอกจากนี้ อย่าลืมตั้งค่าเฉพาะid
สำหรับ.carousel
การควบคุมเพิ่มเติม โดยเฉพาะอย่างยิ่งหากคุณใช้หลายภาพหมุนในหน้าเดียว องค์ประกอบการควบคุมและตัวบ่งชี้ต้องมีdata-bs-target
แอตทริบิวต์ (หรือhref
สำหรับลิงก์) ที่ตรงกับid
ของ.carousel
องค์ประกอบ
สไลด์เท่านั้น
นี่คือภาพหมุนที่มีสไลด์เท่านั้น สังเกตการมีอยู่ของ รูปภาพแบบหมุน .d-block
และ.w-100
บนเพื่อป้องกันการจัดแนวรูปภาพเริ่มต้นของเบราว์เซอร์
<div id="carouselExampleSlidesOnly" class="carousel slide" data-bs-ride="carousel">
<div class="carousel-inner">
<div class="carousel-item active">
<img src="..." class="d-block w-100" alt="...">
</div>
<div class="carousel-item">
<img src="..." class="d-block w-100" alt="...">
</div>
<div class="carousel-item">
<img src="..." class="d-block w-100" alt="...">
</div>
</div>
</div>
ด้วยการควบคุม
เพิ่มในการควบคุมก่อนหน้าและถัดไป เราแนะนำให้ใช้<button>
องค์ประกอบ แต่คุณยังสามารถใช้<a>
องค์ประกอบที่มีrole="button"
.
<div id="carouselExampleControls" class="carousel slide" data-bs-ride="carousel">
<div class="carousel-inner">
<div class="carousel-item active">
<img src="..." class="d-block w-100" alt="...">
</div>
<div class="carousel-item">
<img src="..." class="d-block w-100" alt="...">
</div>
<div class="carousel-item">
<img src="..." class="d-block w-100" alt="...">
</div>
</div>
<button class="carousel-control-prev" type="button" data-bs-target="#carouselExampleControls" data-bs-slide="prev">
<span class="carousel-control-prev-icon" aria-hidden="true"></span>
<span class="visually-hidden">Previous</span>
</button>
<button class="carousel-control-next" type="button" data-bs-target="#carouselExampleControls" data-bs-slide="next">
<span class="carousel-control-next-icon" aria-hidden="true"></span>
<span class="visually-hidden">Next</span>
</button>
</div>
พร้อมอินดิเคเตอร์
คุณยังสามารถเพิ่มตัวบ่งชี้ไปยังวงล้อควบคู่ไปกับตัวควบคุมได้อีกด้วย
<div id="carouselExampleIndicators" class="carousel slide" data-bs-ride="carousel">
<div class="carousel-indicators">
<button type="button" data-bs-target="#carouselExampleIndicators" data-bs-slide-to="0" class="active" aria-current="true" aria-label="Slide 1"></button>
<button type="button" data-bs-target="#carouselExampleIndicators" data-bs-slide-to="1" aria-label="Slide 2"></button>
<button type="button" data-bs-target="#carouselExampleIndicators" data-bs-slide-to="2" aria-label="Slide 3"></button>
</div>
<div class="carousel-inner">
<div class="carousel-item active">
<img src="..." class="d-block w-100" alt="...">
</div>
<div class="carousel-item">
<img src="..." class="d-block w-100" alt="...">
</div>
<div class="carousel-item">
<img src="..." class="d-block w-100" alt="...">
</div>
</div>
<button class="carousel-control-prev" type="button" data-bs-target="#carouselExampleIndicators" data-bs-slide="prev">
<span class="carousel-control-prev-icon" aria-hidden="true"></span>
<span class="visually-hidden">Previous</span>
</button>
<button class="carousel-control-next" type="button" data-bs-target="#carouselExampleIndicators" data-bs-slide="next">
<span class="carousel-control-next-icon" aria-hidden="true"></span>
<span class="visually-hidden">Next</span>
</button>
</div>
พร้อมแคปชั่น
เพิ่มคำอธิบายภาพให้กับสไลด์ของคุณได้อย่างง่ายดายด้วย.carousel-caption
องค์ประกอบภายใน.carousel-item
ไฟล์ . สามารถซ่อนไว้บนวิวพอร์ตขนาดเล็กได้อย่างง่ายดาย ดังที่แสดงด้านล่าง พร้อมยูทิลิตี้การแสดงผล ที่เป็น ตัว เลือก เราซ่อนไว้ตั้งแต่แรก.d-none
และนำกลับมาไว้ในอุปกรณ์ขนาดกลางที่มี.d-md-block
.
<div id="carouselExampleCaptions" class="carousel slide" data-bs-ride="carousel">
<div class="carousel-indicators">
<button type="button" data-bs-target="#carouselExampleCaptions" data-bs-slide-to="0" class="active" aria-current="true" aria-label="Slide 1"></button>
<button type="button" data-bs-target="#carouselExampleCaptions" data-bs-slide-to="1" aria-label="Slide 2"></button>
<button type="button" data-bs-target="#carouselExampleCaptions" data-bs-slide-to="2" aria-label="Slide 3"></button>
</div>
<div class="carousel-inner">
<div class="carousel-item active">
<img src="..." class="d-block w-100" alt="...">
<div class="carousel-caption d-none d-md-block">
<h5>First slide label</h5>
<p>Some representative placeholder content for the first slide.</p>
</div>
</div>
<div class="carousel-item">
<img src="..." class="d-block w-100" alt="...">
<div class="carousel-caption d-none d-md-block">
<h5>Second slide label</h5>
<p>Some representative placeholder content for the second slide.</p>
</div>
</div>
<div class="carousel-item">
<img src="..." class="d-block w-100" alt="...">
<div class="carousel-caption d-none d-md-block">
<h5>Third slide label</h5>
<p>Some representative placeholder content for the third slide.</p>
</div>
</div>
</div>
<button class="carousel-control-prev" type="button" data-bs-target="#carouselExampleCaptions" data-bs-slide="prev">
<span class="carousel-control-prev-icon" aria-hidden="true"></span>
<span class="visually-hidden">Previous</span>
</button>
<button class="carousel-control-next" type="button" data-bs-target="#carouselExampleCaptions" data-bs-slide="next">
<span class="carousel-control-next-icon" aria-hidden="true"></span>
<span class="visually-hidden">Next</span>
</button>
</div>
Crossfade
เพิ่ม.carousel-fade
ไปยังภาพหมุนของคุณเพื่อทำให้สไลด์เคลื่อนไหวด้วยการเปลี่ยนการค่อยๆ จางแทนที่จะเป็นสไลด์
<div id="carouselExampleFade" class="carousel slide carousel-fade" data-bs-ride="carousel">
<div class="carousel-inner">
<div class="carousel-item active">
<img src="..." class="d-block w-100" alt="...">
</div>
<div class="carousel-item">
<img src="..." class="d-block w-100" alt="...">
</div>
<div class="carousel-item">
<img src="..." class="d-block w-100" alt="...">
</div>
</div>
<button class="carousel-control-prev" type="button" data-bs-target="#carouselExampleFade" data-bs-slide="prev">
<span class="carousel-control-prev-icon" aria-hidden="true"></span>
<span class="visually-hidden">Previous</span>
</button>
<button class="carousel-control-next" type="button" data-bs-target="#carouselExampleFade" data-bs-slide="next">
<span class="carousel-control-next-icon" aria-hidden="true"></span>
<span class="visually-hidden">Next</span>
</button>
</div>
.carousel-item
ช่วงเวลาส่วนบุคคล
เพิ่มdata-bs-interval=""
ไปยัง a .carousel-item
เพื่อเปลี่ยนระยะเวลาในการหน่วงเวลาระหว่างการปั่นจักรยานไปยังรายการถัดไปโดยอัตโนมัติ
<div id="carouselExampleInterval" class="carousel slide" data-bs-ride="carousel">
<div class="carousel-inner">
<div class="carousel-item active" data-bs-interval="10000">
<img src="..." class="d-block w-100" alt="...">
</div>
<div class="carousel-item" data-bs-interval="2000">
<img src="..." class="d-block w-100" alt="...">
</div>
<div class="carousel-item">
<img src="..." class="d-block w-100" alt="...">
</div>
</div>
<button class="carousel-control-prev" type="button" data-bs-target="#carouselExampleInterval" data-bs-slide="prev">
<span class="carousel-control-prev-icon" aria-hidden="true"></span>
<span class="visually-hidden">Previous</span>
</button>
<button class="carousel-control-next" type="button" data-bs-target="#carouselExampleInterval" data-bs-slide="next">
<span class="carousel-control-next-icon" aria-hidden="true"></span>
<span class="visually-hidden">Next</span>
</button>
</div>
ปิดใช้งานการปัดแบบสัมผัส
ม้าหมุนรองรับการเลื่อนไปทางซ้าย/ขวาบนอุปกรณ์หน้าจอสัมผัสเพื่อเลื่อนไปมาระหว่างสไลด์ ซึ่งสามารถปิดใช้งานได้โดยใช้data-bs-touch
แอตทริบิวต์ ตัวอย่างด้านล่างยังไม่มีdata-bs-ride
แอตทริบิวต์และมีdata-bs-interval="false"
ดังนั้นจึงไม่เล่นอัตโนมัติ
<div id="carouselExampleControlsNoTouching" class="carousel slide" data-bs-touch="false" data-bs-interval="false">
<div class="carousel-inner">
<div class="carousel-item active">
<img src="..." class="d-block w-100" alt="...">
</div>
<div class="carousel-item">
<img src="..." class="d-block w-100" alt="...">
</div>
<div class="carousel-item">
<img src="..." class="d-block w-100" alt="...">
</div>
</div>
<button class="carousel-control-prev" type="button" data-bs-target="#carouselExampleControlsNoTouching" data-bs-slide="prev">
<span class="carousel-control-prev-icon" aria-hidden="true"></span>
<span class="visually-hidden">Previous</span>
</button>
<button class="carousel-control-next" type="button" data-bs-target="#carouselExampleControlsNoTouching" data-bs-slide="next">
<span class="carousel-control-next-icon" aria-hidden="true"></span>
<span class="visually-hidden">Next</span>
</button>
</div>
ตัวแปรมืด
เพิ่ม.carousel-dark
ไปยัง.carousel
ตัวควบคุม ตัวระบุ และคำอธิบายภาพที่เข้มขึ้น การควบคุมถูกเปลี่ยนจากการเติมสีขาวเริ่มต้นด้วยfilter
คุณสมบัติ CSS คำบรรยายและการควบคุมมีตัวแปร Sass เพิ่มเติมที่ปรับแต่งไฟล์color
และbackground-color
.
<div id="carouselExampleDark" class="carousel carousel-dark slide" data-bs-ride="carousel">
<div class="carousel-indicators">
<button type="button" data-bs-target="#carouselExampleDark" data-bs-slide-to="0" class="active" aria-current="true" aria-label="Slide 1"></button>
<button type="button" data-bs-target="#carouselExampleDark" data-bs-slide-to="1" aria-label="Slide 2"></button>
<button type="button" data-bs-target="#carouselExampleDark" data-bs-slide-to="2" aria-label="Slide 3"></button>
</div>
<div class="carousel-inner">
<div class="carousel-item active" data-bs-interval="10000">
<img src="..." class="d-block w-100" alt="...">
<div class="carousel-caption d-none d-md-block">
<h5>First slide label</h5>
<p>Some representative placeholder content for the first slide.</p>
</div>
</div>
<div class="carousel-item" data-bs-interval="2000">
<img src="..." class="d-block w-100" alt="...">
<div class="carousel-caption d-none d-md-block">
<h5>Second slide label</h5>
<p>Some representative placeholder content for the second slide.</p>
</div>
</div>
<div class="carousel-item">
<img src="..." class="d-block w-100" alt="...">
<div class="carousel-caption d-none d-md-block">
<h5>Third slide label</h5>
<p>Some representative placeholder content for the third slide.</p>
</div>
</div>
</div>
<button class="carousel-control-prev" type="button" data-bs-target="#carouselExampleDark" data-bs-slide="prev">
<span class="carousel-control-prev-icon" aria-hidden="true"></span>
<span class="visually-hidden">Previous</span>
</button>
<button class="carousel-control-next" type="button" data-bs-target="#carouselExampleDark" data-bs-slide="next">
<span class="carousel-control-next-icon" aria-hidden="true"></span>
<span class="visually-hidden">Next</span>
</button>
</div>
การเปลี่ยนแปลงที่กำหนดเอง
ระยะเวลาการเปลี่ยนแปลงของ.carousel-item
สามารถเปลี่ยนได้ด้วย$carousel-transition-duration
ตัวแปร Sass ก่อนคอมไพล์หรือกำหนดสไตล์เอง หากคุณใช้ CSS ที่คอมไพล์แล้ว หากมีการใช้การเปลี่ยนหลายครั้ง ตรวจสอบให้แน่ใจว่าได้กำหนดการเปลี่ยนรูปแบบก่อน (เช่นtransition: transform 2s ease, opacity .5s ease-out
)
ซาส
ตัวแปร
$carousel-control-color: $white;
$carousel-control-width: 15%;
$carousel-control-opacity: .5;
$carousel-control-hover-opacity: .9;
$carousel-control-transition: opacity .15s ease;
$carousel-indicator-width: 30px;
$carousel-indicator-height: 3px;
$carousel-indicator-hit-area-height: 10px;
$carousel-indicator-spacer: 3px;
$carousel-indicator-opacity: .5;
$carousel-indicator-active-bg: $white;
$carousel-indicator-active-opacity: 1;
$carousel-indicator-transition: opacity .6s ease;
$carousel-caption-width: 70%;
$carousel-caption-color: $white;
$carousel-caption-padding-y: 1.25rem;
$carousel-caption-spacer: 1.25rem;
$carousel-control-icon-width: 2rem;
$carousel-control-prev-icon-bg: url("data:image/svg+xml,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16' fill='#{$carousel-control-color}'><path d='M11.354 1.646a.5.5 0 0 1 0 .708L5.707 8l5.647 5.646a.5.5 0 0 1-.708.708l-6-6a.5.5 0 0 1 0-.708l6-6a.5.5 0 0 1 .708 0z'/></svg>");
$carousel-control-next-icon-bg: url("data:image/svg+xml,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16' fill='#{$carousel-control-color}'><path d='M4.646 1.646a.5.5 0 0 1 .708 0l6 6a.5.5 0 0 1 0 .708l-6 6a.5.5 0 0 1-.708-.708L10.293 8 4.646 2.354a.5.5 0 0 1 0-.708z'/></svg>");
$carousel-transition-duration: .6s;
$carousel-transition: transform $carousel-transition-duration ease-in-out; // Define transform transition first if using multiple transitions (e.g., `transform 2s ease, opacity .5s ease-out`)
$carousel-dark-indicator-active-bg: $black;
$carousel-dark-caption-color: $black;
$carousel-dark-control-icon-filter: invert(1) grayscale(100);
การใช้งาน
ผ่านแอตทริบิวต์ข้อมูล
ใช้แอตทริบิวต์ข้อมูลเพื่อควบคุมตำแหน่งของวงล้อได้อย่างง่ายดาย data-bs-slide
ยอมรับคำหลักprev
หรือnext
ซึ่งเปลี่ยนตำแหน่งสไลด์ที่สัมพันธ์กับตำแหน่งปัจจุบัน อีกวิธีหนึ่ง ใช้data-bs-slide-to
เพื่อส่งดัชนีสไลด์ดิบไปยังภาพหมุนdata-bs-slide-to="2"
ซึ่งจะเลื่อนตำแหน่งสไลด์ไปที่ดัชนีเฉพาะที่ขึ้นต้น0
ด้วย
แอตทริบิวต์data-bs-ride="carousel"
นี้ใช้เพื่อทำเครื่องหมายภาพหมุนเป็นภาพเคลื่อนไหวโดยเริ่มต้นเมื่อโหลดหน้าเว็บ หากคุณไม่ได้ใช้data-bs-ride="carousel"
เพื่อเริ่มต้นภาพหมุน คุณต้องเริ่มต้นด้วยตัวเอง ไม่สามารถใช้ร่วมกับการเริ่มต้น JavaScript ที่ชัดเจน (ซ้ำซ้อนและไม่จำเป็น) ของภาพหมุนเดียวกัน
ผ่านจาวาสคริปต์
โทรแบบหมุนด้วยตนเองด้วย:
var myCarousel = document.querySelector('#myCarousel')
var carousel = new bootstrap.Carousel(myCarousel)
ตัวเลือก
ตัวเลือกสามารถส่งผ่านแอตทริบิวต์ข้อมูลหรือ JavaScript สำหรับแอ็ตทริบิวต์ data ให้ผนวกชื่ออ็อพชันต่อท้ายdata-bs-
เช่นเดียวกับในdata-bs-interval=""
.
ชื่อ | พิมพ์ | ค่าเริ่มต้น | คำอธิบาย |
---|---|---|---|
interval |
ตัวเลข | 5000 |
ระยะเวลาที่จะหน่วงเวลาระหว่างการปั่นจักรยานรายการโดยอัตโนมัติ ถ้าfalse , ภาพหมุนจะไม่หมุนโดยอัตโนมัติ |
keyboard |
บูลีน | true |
ว่าภาพหมุนควรตอบสนองต่อเหตุการณ์แป้นพิมพ์หรือไม่ |
pause |
สตริง | บูลีน | 'hover' |
หากตั้งค่าเป็น จะ บนอุปกรณ์ที่เปิดใช้งานระบบสัมผัส เมื่อตั้งค่าเป็น การ |
ride |
สตริง | บูลีน | false |
เล่นภาพหมุนอัตโนมัติหลังจากที่ผู้ใช้วนรอบรายการแรกด้วยตนเอง หากตั้งค่าเป็น จะ'carousel' เล่นภาพหมุนอัตโนมัติเมื่อโหลด |
wrap |
บูลีน | true |
ว่าวงล้อควรวนอย่างต่อเนื่องหรือหยุดยากหรือไม่ |
touch |
บูลีน | true |
ว่าภาพหมุนควรสนับสนุนการโต้ตอบการปัดไปทางซ้าย/ขวาบนอุปกรณ์หน้าจอสัมผัสหรือไม่ |
วิธีการ
วิธีการและการเปลี่ยนแบบอะซิงโครนัส
เมธอด API ทั้งหมดเป็นแบบอะซิงโครนัสและเริ่มต้นการเปลี่ยนแปลง พวกเขาจะกลับไปที่ผู้โทรทันทีที่เริ่มเปลี่ยน แต่ ก่อน ที่จะสิ้นสุด นอกจากนี้ การเรียกเมธอดบนคอมโพเนนต์การเปลี่ยนจะถูกละเว้น
คุณสามารถสร้างอินสแตนซ์ภาพหมุนด้วยตัวสร้างภาพหมุนได้ เช่น เพื่อเริ่มต้นด้วยตัวเลือกเพิ่มเติมและเริ่มวนรอบรายการ:
var myCarousel = document.querySelector('#myCarousel')
var carousel = new bootstrap.Carousel(myCarousel, {
interval: 2000,
wrap: false
})
วิธี | คำอธิบาย |
---|---|
cycle |
หมุนเวียนผ่านรายการแบบหมุนจากซ้ายไปขวา |
pause |
หยุดม้าหมุนจากการปั่นจักรยานผ่านรายการ |
prev |
วนไปยังรายการก่อนหน้า กลับไปยังผู้โทรก่อนที่จะแสดงรายการก่อนหน้า (เช่น ก่อนที่slid.bs.carousel เหตุการณ์จะเกิดขึ้น) |
next |
วนไปยังรายการถัดไป กลับไปยังผู้โทรก่อนที่จะแสดงรายการถัดไป (เช่น ก่อนที่slid.bs.carousel เหตุการณ์จะเกิดขึ้น) |
nextWhenVisible |
อย่าวนวงล้อไปที่ถัดไปเมื่อเพจไม่สามารถมองเห็นได้ หรือวงล้อไม่สามารถมองเห็นได้ กลับไปยังผู้โทรก่อนที่จะแสดงรายการเป้าหมาย |
to |
หมุนวงล้อไปที่เฟรมใดเฟรมหนึ่ง (อิงตาม 0 คล้ายกับอาร์เรย์) กลับไปยังผู้โทรก่อนที่จะแสดงรายการเป้าหมาย (เช่น ก่อนที่slid.bs.carousel เหตุการณ์จะเกิดขึ้น) |
dispose |
ทำลายภาพหมุนขององค์ประกอบ (ลบข้อมูลที่เก็บไว้ในองค์ประกอบ DOM) |
getInstance |
วิธีสแตติกที่ช่วยให้คุณได้รับอินสแตนซ์ภาพหมุนที่เชื่อมโยงกับองค์ประกอบ DOM คุณสามารถใช้ได้ดังนี้:bootstrap.Carousel.getInstance(element) |
getOrCreateInstance |
เมธอดแบบคงที่ซึ่งส่งคืนอินสแตนซ์แบบหมุนที่เชื่อมโยงกับองค์ประกอบ DOM หรือสร้างใหม่ในกรณีที่ไม่ได้เริ่มต้น คุณสามารถใช้ได้ดังนี้:bootstrap.Carousel.getOrCreateInstance(element) |
เหตุการณ์
คลาสม้าหมุนของ Bootstrap เปิดเผยสองเหตุการณ์สำหรับการเชื่อมต่อกับฟังก์ชันหมุน ทั้งสองเหตุการณ์มีคุณสมบัติเพิ่มเติมดังต่อไปนี้:
direction
: ทิศทางที่วงล้อเลื่อน ("left"
หรือ"right"
)relatedTarget
: องค์ประกอบ DOM ที่กำลังถูกเลื่อนเข้าที่ในฐานะรายการที่ใช้งานอยู่from
: ดัชนีของรายการปัจจุบันto
: ดัชนีของรายการถัดไป
เหตุการณ์ภาพหมุนทั้งหมดจะถูกไล่ออกที่ตัวหมุนเอง (เช่น ที่<div class="carousel">
)
ประเภทงาน | คำอธิบาย |
---|---|
slide.bs.carousel |
เริ่มทำงานทันทีเมื่อมีslide การเรียกใช้เมธอดอินสแตนซ์ |
slid.bs.carousel |
เริ่มทำงานเมื่อภาพหมุนเปลี่ยนสไลด์เสร็จ |
var myCarousel = document.getElementById('myCarousel')
myCarousel.addEventListener('slide.bs.carousel', function () {
// do something...
})