ม้าหมุน
ส่วนประกอบสไลด์โชว์สำหรับการวนไปตามองค์ประกอบต่างๆ เช่น รูปภาพหรือสไลด์ข้อความ เช่น ภาพหมุน
มันทำงานอย่างไร
ภาพหมุนเป็นสไลด์โชว์สำหรับการวนดูเนื้อหาต่างๆ ที่สร้างขึ้นด้วยการแปลง CSS 3D และ JavaScript เล็กน้อย ใช้งานได้กับชุดรูปภาพ ข้อความ หรือมาร์กอัปที่กำหนดเอง นอกจากนี้ยังรองรับการควบคุมและตัวบ่งชี้ก่อนหน้า/ถัดไป
ในเบราว์เซอร์ที่รองรับPage Visibility APIภาพหมุนจะหลีกเลี่ยงการเลื่อนเมื่อผู้ใช้มองไม่เห็นหน้าเว็บ (เช่น เมื่อแท็บเบราว์เซอร์ไม่ทำงาน หน้าต่างเบราว์เซอร์จะถูกย่อให้เล็กสุด เป็นต้น)
เอฟเฟกต์ภาพเคลื่อนไหวของส่วนประกอบนี้ขึ้นอยู่กับprefers-reduced-motion
คิวรีสื่อ ดูส่วนการเคลื่อนไหวที่ลดลงของเอกสารการช่วยสำหรับการเข้าถึงของเรา
โปรดทราบว่าไม่รองรับภาพหมุนที่ซ้อนกัน และโดยทั่วไปแล้ว ภาพหมุนไม่สอดคล้องกับมาตรฐานการช่วยสำหรับการเข้าถึง
สุดท้ายนี้ หากคุณกำลังสร้าง JavaScript จากแหล่งที่มา มันต้องใช้util.js
.
ตัวอย่าง
ภาพหมุนจะไม่ทำให้ขนาดสไลด์เป็นมาตรฐานโดยอัตโนมัติ ดังนั้น คุณอาจต้องใช้ยูทิลิตี้เพิ่มเติมหรือสไตล์ที่กำหนดเองเพื่อปรับขนาดเนื้อหาให้เหมาะสม แม้ว่าภาพหมุนจะสนับสนุนการควบคุมและตัวบ่งชี้ก่อนหน้า/ถัดไป แต่ก็ไม่ได้บังคับอย่างชัดเจน เพิ่มและปรับแต่งตามที่เห็นสมควร
.active
ต้องเพิ่มชั้นเรียนลงในสไลด์ใดสไลด์หนึ่งมิฉะนั้น ภาพหมุนจะไม่ปรากฏให้เห็น นอกจากนี้ อย่าลืมตั้งค่า ID ที่ไม่ซ้ำกัน.carousel
สำหรับการควบคุมเพิ่มเติม โดยเฉพาะอย่างยิ่งหากคุณใช้ภาพหมุนหลายชุดในหน้าเดียว องค์ประกอบการควบคุมและตัวบ่งชี้ต้องมีdata-target
แอตทริบิวต์ (หรือhref
สำหรับลิงก์) ที่ตรงกับรหัสของ.carousel
องค์ประกอบ
สไลด์เท่านั้น
นี่คือภาพหมุนที่มีสไลด์เท่านั้น สังเกตการมีอยู่ของ รูปภาพแบบหมุน .d-block
และ.w-100
บนเพื่อป้องกันการจัดแนวรูปภาพเริ่มต้นของเบราว์เซอร์
ด้วยการควบคุม
เพิ่มในการควบคุมก่อนหน้าและถัดไป:
พร้อมอินดิเคเตอร์
คุณยังสามารถเพิ่มตัวบ่งชี้ไปยังวงล้อควบคู่ไปกับตัวควบคุมได้อีกด้วย
พร้อมแคปชั่น
เพิ่มคำอธิบายภาพให้กับสไลด์ของคุณได้อย่างง่ายดายด้วย.carousel-caption
องค์ประกอบภายใน.carousel-item
ไฟล์ . สามารถซ่อนไว้บนวิวพอร์ตขนาดเล็กได้อย่างง่ายดาย ดังที่แสดงด้านล่าง พร้อมยูทิลิตี้การแสดงผล ที่เป็น ตัว เลือก เราซ่อนไว้ตั้งแต่แรก.d-none
และนำกลับมาไว้ในอุปกรณ์ขนาดกลางที่มี.d-md-block
.
Crossfade
เพิ่ม.carousel-fade
ไปยังภาพหมุนของคุณเพื่อทำให้สไลด์เคลื่อนไหวด้วยการเปลี่ยนการค่อยๆ จางแทนที่จะเป็นสไลด์
.carousel-item
ช่วงเวลาส่วนบุคคล
เพิ่มdata-interval=""
ไปยัง a .carousel-item
เพื่อเปลี่ยนระยะเวลาในการหน่วงเวลาระหว่างการปั่นจักรยานไปยังรายการถัดไปโดยอัตโนมัติ
การใช้งาน
ผ่านแอตทริบิวต์ข้อมูล
ใช้แอตทริบิวต์ข้อมูลเพื่อควบคุมตำแหน่งของวงล้อได้อย่างง่ายดาย data-slide
ยอมรับคำหลักprev
หรือnext
ซึ่งเปลี่ยนตำแหน่งสไลด์ที่สัมพันธ์กับตำแหน่งปัจจุบัน อีกวิธีหนึ่ง ใช้data-slide-to
เพื่อส่งดัชนีสไลด์ดิบไปยังภาพหมุนdata-slide-to="2"
ซึ่งจะเลื่อนตำแหน่งสไลด์ไปที่ดัชนีเฉพาะที่ขึ้นต้น0
ด้วย
แอตทริบิวต์data-ride="carousel"
นี้ใช้เพื่อทำเครื่องหมายภาพหมุนเป็นภาพเคลื่อนไหวโดยเริ่มต้นเมื่อโหลดหน้าเว็บ หากคุณไม่ได้ใช้data-ride="carousel"
เพื่อเริ่มต้นภาพหมุน คุณต้องเริ่มต้นด้วยตัวเอง ไม่สามารถใช้ร่วมกับการเริ่มต้น JavaScript ที่ชัดเจน (ซ้ำซ้อนและไม่จำเป็น) ของภาพหมุนเดียวกัน
ผ่านจาวาสคริปต์
โทรแบบหมุนด้วยตนเองด้วย:
ตัวเลือก
ตัวเลือกสามารถส่งผ่านแอตทริบิวต์ข้อมูลหรือ JavaScript สำหรับแอ็ตทริบิวต์ data ให้ผนวกชื่ออ็อพชันต่อท้ายdata-
เช่นเดียวกับในdata-interval=""
.
ชื่อ | พิมพ์ | ค่าเริ่มต้น | คำอธิบาย |
---|---|---|---|
ช่วงเวลา | ตัวเลข | 5000 | ระยะเวลาที่จะหน่วงเวลาระหว่างการปั่นจักรยานรายการโดยอัตโนมัติ หากเป็นเท็จ ภาพหมุนจะไม่หมุนโดยอัตโนมัติ |
แป้นพิมพ์ | บูลีน | จริง | ว่าภาพหมุนควรตอบสนองต่อเหตุการณ์แป้นพิมพ์หรือไม่ |
หยุด | สตริง | บูลีน | "โฮเวอร์" | หากตั้งค่าเป็น จะ บนอุปกรณ์ที่เปิดใช้งานระบบสัมผัส เมื่อตั้งค่าเป็น การ |
ขี่ | สตริง | เท็จ | เล่นภาพหมุนอัตโนมัติหลังจากที่ผู้ใช้วนรอบรายการแรกด้วยตนเอง หาก "วงล้อ" เล่นภาพหมุนอัตโนมัติเมื่อโหลด |
ห่อ | บูลีน | จริง | ว่าวงล้อควรวนอย่างต่อเนื่องหรือหยุดยากหรือไม่ |
สัมผัส | บูลีน | จริง | ว่าภาพหมุนควรสนับสนุนการโต้ตอบการปัดไปทางซ้าย/ขวาบนอุปกรณ์หน้าจอสัมผัสหรือไม่ |
วิธีการ
วิธีการและการเปลี่ยนแบบอะซิงโครนัส
เมธอด API ทั้งหมดเป็นแบบอะซิงโครนัสและเริ่มต้นการเปลี่ยนแปลง พวกเขาจะกลับไปที่ผู้โทรทันทีที่เริ่มเปลี่ยน แต่ ก่อน ที่จะสิ้นสุด นอกจากนี้ การเรียกเมธอดบนคอมโพเนนต์การเปลี่ยนจะถูกละเว้น
.carousel(options)
เริ่มต้นวงล้อด้วยตัวเลือกเสริมobject
และเริ่มวนรอบรายการต่างๆ
.carousel('cycle')
หมุนเวียนผ่านรายการแบบหมุนจากซ้ายไปขวา
.carousel('pause')
หยุดม้าหมุนจากการปั่นจักรยานผ่านรายการ
.carousel(number)
หมุนวงล้อไปที่เฟรมใดเฟรมหนึ่ง (อิงตาม 0 คล้ายกับอาร์เรย์) กลับไปยังผู้โทรก่อนที่จะแสดงรายการเป้าหมาย (เช่น ก่อนslid.bs.carousel
เหตุการณ์จะเกิดขึ้น)
.carousel('prev')
วนไปยังรายการก่อนหน้า กลับไปยังผู้โทรก่อนที่จะแสดงรายการก่อนหน้า (เช่น ก่อนที่slid.bs.carousel
เหตุการณ์จะเกิดขึ้น)
.carousel('next')
วนไปยังรายการถัดไป กลับไปยังผู้โทรก่อนที่จะแสดงรายการถัดไป (กล่าวคือ ก่อนที่slid.bs.carousel
เหตุการณ์จะเกิดขึ้น)
.carousel('dispose')
ทำลายภาพหมุนขององค์ประกอบ
.carousel('nextWhenVisible')
อย่าวนวงล้อไปที่ถัดไปเมื่อเพจไม่สามารถมองเห็นได้ หรือวงล้อหรือพาเรนต์ไม่สามารถมองเห็นได้ กลับไปยังผู้โทรก่อนที่จะแสดงรายการถัดไป (กล่าวคือ ก่อนที่slid.bs.carousel
เหตุการณ์จะเกิดขึ้น)
.carousel('to')
หมุนวงล้อไปที่เฟรมใดเฟรมหนึ่ง (อิงตาม 0 คล้ายกับอาร์เรย์) กลับไปยังผู้โทรก่อนที่จะแสดงรายการถัดไป (กล่าวคือ ก่อนที่slid.bs.carousel
เหตุการณ์จะเกิดขึ้น)
เหตุการณ์
คลาสม้าหมุนของ Bootstrap เปิดเผยสองเหตุการณ์สำหรับการเชื่อมต่อกับฟังก์ชันหมุน ทั้งสองเหตุการณ์มีคุณสมบัติเพิ่มเติมดังต่อไปนี้:
direction
: ทิศทางที่วงล้อเลื่อน ("left"
หรือ"right"
)relatedTarget
: องค์ประกอบ DOM ที่กำลังถูกเลื่อนเข้าที่ในฐานะรายการที่ใช้งานอยู่from
: ดัชนีของรายการปัจจุบันto
: ดัชนีของรายการถัดไป
เหตุการณ์ภาพหมุนทั้งหมดจะถูกไล่ออกที่ตัวหมุนเอง (เช่น ที่<div class="carousel">
)
ประเภทงาน | คำอธิบาย |
---|---|
slide.bs.carousel | เหตุการณ์นี้จะเริ่มทำงานทันทีเมื่อมีslide การเรียกใช้เมธอดของอินสแตนซ์ |
slid.bs.carousel | เหตุการณ์นี้เริ่มทำงานเมื่อภาพหมุนเสร็จสิ้นการเปลี่ยนสไลด์ |
เปลี่ยนระยะเวลาการเปลี่ยนแปลง
ระยะเวลาการเปลี่ยนแปลงของ.carousel-item
สามารถเปลี่ยนได้ด้วย$carousel-transition
ตัวแปร Sass ก่อนคอมไพล์หรือกำหนดสไตล์เอง หากคุณใช้ CSS ที่คอมไพล์แล้ว หากมีการใช้การเปลี่ยนหลายครั้ง ตรวจสอบให้แน่ใจว่าได้กำหนดการเปลี่ยนรูปแบบก่อน (เช่นtransition: transform 2s ease, opacity .5s ease-out
)