in English

ม้าหมุน

ส่วนประกอบสไลด์โชว์สำหรับการวนไปตามองค์ประกอบต่างๆ เช่น รูปภาพหรือสไลด์ข้อความ เช่น ภาพหมุน

มันทำงานอย่างไร

ภาพหมุนเป็นสไลด์โชว์สำหรับการวนดูเนื้อหาต่างๆ ที่สร้างขึ้นด้วยการแปลง CSS 3D และ JavaScript เล็กน้อย ใช้งานได้กับชุดรูปภาพ ข้อความ หรือมาร์กอัปที่กำหนดเอง นอกจากนี้ยังรองรับการควบคุมและตัวบ่งชี้ก่อนหน้า/ถัดไป

ในเบราว์เซอร์ที่รองรับPage Visibility APIภาพหมุนจะหลีกเลี่ยงการเลื่อนเมื่อผู้ใช้มองไม่เห็นหน้าเว็บ (เช่น เมื่อแท็บเบราว์เซอร์ไม่ทำงาน หน้าต่างเบราว์เซอร์จะถูกย่อให้เล็กสุด เป็นต้น)

เอฟเฟกต์ภาพเคลื่อนไหวของส่วนประกอบนี้ขึ้นอยู่กับ prefers-reduced-motionคิวรีสื่อ ดู ส่วนการเคลื่อนไหวที่ลดลงของเอกสารการช่วยสำหรับการเข้าถึงของเรา

โปรดทราบว่าไม่รองรับภาพหมุนที่ซ้อนกัน และโดยทั่วไปแล้ว ภาพหมุนไม่สอดคล้องกับมาตรฐานการช่วยสำหรับการเข้าถึง

สุดท้ายนี้ หากคุณกำลังสร้าง JavaScript จากแหล่งที่มา มันต้องใช้util.js .

ตัวอย่าง

ภาพหมุนจะไม่ทำให้ขนาดสไลด์เป็นมาตรฐานโดยอัตโนมัติ ดังนั้น คุณอาจต้องใช้ยูทิลิตี้เพิ่มเติมหรือสไตล์ที่กำหนดเองเพื่อปรับขนาดเนื้อหาให้เหมาะสม แม้ว่าภาพหมุนจะสนับสนุนการควบคุมและตัวบ่งชี้ก่อนหน้า/ถัดไป แต่ก็ไม่ได้บังคับอย่างชัดเจน เพิ่มและปรับแต่งตามที่เห็นสมควร

.activeต้องเพิ่มชั้นเรียนลงในสไลด์ใดสไลด์หนึ่งมิฉะนั้น ภาพหมุนจะไม่ปรากฏให้เห็น นอกจากนี้ อย่าลืมตั้งค่าเฉพาะidสำหรับ.carouselการควบคุมเพิ่มเติม โดยเฉพาะอย่างยิ่งหากคุณใช้หลายภาพหมุนในหน้าเดียว องค์ประกอบการควบคุมและตัวบ่งชี้ต้องมีdata-targetแอตทริบิวต์ (หรือhrefสำหรับลิงก์) ที่ตรงกับidของ.carouselองค์ประกอบ

สไลด์เท่านั้น

นี่คือภาพหมุนที่มีสไลด์เท่านั้น สังเกตการมีอยู่ของ รูปภาพแบบหมุน .d-blockและ.w-100บนเพื่อป้องกันการจัดแนวรูปภาพเริ่มต้นของเบราว์เซอร์

<div id="carouselExampleSlidesOnly" class="carousel slide" data-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-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-target="#carouselExampleControls" data-slide="prev">
    <span class="carousel-control-prev-icon" aria-hidden="true"></span>
    <span class="sr-only">Previous</span>
  </button>
  <button class="carousel-control-next" type="button" data-target="#carouselExampleControls" data-slide="next">
    <span class="carousel-control-next-icon" aria-hidden="true"></span>
    <span class="sr-only">Next</span>
  </button>
</div>

พร้อมอินดิเคเตอร์

คุณยังสามารถเพิ่มตัวบ่งชี้ไปยังวงล้อควบคู่ไปกับตัวควบคุมได้อีกด้วย

<div id="carouselExampleIndicators" class="carousel slide" data-ride="carousel">
  <ol class="carousel-indicators">
    <li data-target="#carouselExampleIndicators" data-slide-to="0" class="active"></li>
    <li data-target="#carouselExampleIndicators" data-slide-to="1"></li>
    <li data-target="#carouselExampleIndicators" data-slide-to="2"></li>
  </ol>
  <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-target="#carouselExampleIndicators" data-slide="prev">
    <span class="carousel-control-prev-icon" aria-hidden="true"></span>
    <span class="sr-only">Previous</span>
  </button>
  <button class="carousel-control-next" type="button" data-target="#carouselExampleIndicators" data-slide="next">
    <span class="carousel-control-next-icon" aria-hidden="true"></span>
    <span class="sr-only">Next</span>
  </button>
</div>

พร้อมแคปชั่น

เพิ่มคำอธิบายภาพให้กับสไลด์ของคุณได้อย่างง่ายดายด้วย.carousel-captionองค์ประกอบภายใน.carousel-itemไฟล์ . สามารถซ่อนไว้บนวิวพอร์ตขนาดเล็กได้อย่างง่ายดาย ดังที่แสดงด้านล่าง พร้อมยูทิลิตี้การแสดงผล ที่เป็น ตัว เลือก เราซ่อนไว้ตั้งแต่แรก.d-noneและนำกลับมาไว้ในอุปกรณ์ขนาดกลางที่มี.d-md-block.

<div id="carouselExampleCaptions" class="carousel slide" data-ride="carousel">
  <ol class="carousel-indicators">
    <li data-target="#carouselExampleCaptions" data-slide-to="0" class="active"></li>
    <li data-target="#carouselExampleCaptions" data-slide-to="1"></li>
    <li data-target="#carouselExampleCaptions" data-slide-to="2"></li>
  </ol>
  <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-target="#carouselExampleCaptions" data-slide="prev">
    <span class="carousel-control-prev-icon" aria-hidden="true"></span>
    <span class="sr-only">Previous</span>
  </button>
  <button class="carousel-control-next" type="button" data-target="#carouselExampleCaptions" data-slide="next">
    <span class="carousel-control-next-icon" aria-hidden="true"></span>
    <span class="sr-only">Next</span>
  </button>
</div>

Crossfade

เพิ่ม.carousel-fadeไปยังภาพหมุนของคุณเพื่อทำให้สไลด์เคลื่อนไหวด้วยการเปลี่ยนการค่อยๆ จางแทนที่จะเป็นสไลด์ ขึ้นอยู่กับเนื้อหาภาพหมุนของคุณ (เช่น สไลด์ข้อความเท่านั้น) คุณอาจต้องการเพิ่ม.bg-bodyหรือ CSS แบบกำหนดเองบางอย่างใน.carousel-items สำหรับการครอสเฟดที่เหมาะสม

<div id="carouselExampleFade" class="carousel slide carousel-fade" data-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-target="#carouselExampleFade" data-slide="prev">
    <span class="carousel-control-prev-icon" aria-hidden="true"></span>
    <span class="sr-only">Previous</span>
  </button>
  <button class="carousel-control-next" type="button" data-target="#carouselExampleFade" data-slide="next">
    <span class="carousel-control-next-icon" aria-hidden="true"></span>
    <span class="sr-only">Next</span>
  </button>
</div>

เพิ่มdata-interval=""ไปยัง a .carousel-itemเพื่อเปลี่ยนระยะเวลาในการหน่วงเวลาระหว่างการปั่นจักรยานไปยังรายการถัดไปโดยอัตโนมัติ

<div id="carouselExampleInterval" class="carousel slide" data-ride="carousel">
  <div class="carousel-inner">
    <div class="carousel-item active" data-interval="10000">
      <img src="..." class="d-block w-100" alt="...">
    </div>
    <div class="carousel-item" data-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-target="#carouselExampleInterval" data-slide="prev">
    <span class="carousel-control-prev-icon" aria-hidden="true"></span>
    <span class="sr-only">Previous</span>
  </button>
  <button class="carousel-control-next" type="button" data-target="#carouselExampleInterval" data-slide="next">
    <span class="carousel-control-next-icon" aria-hidden="true"></span>
    <span class="sr-only">Next</span>
  </button>
</div>

ปิดใช้งานการปัดแบบสัมผัส

ม้าหมุนรองรับการเลื่อนไปทางซ้าย/ขวาบนอุปกรณ์หน้าจอสัมผัสเพื่อเลื่อนไปมาระหว่างสไลด์ ซึ่งสามารถปิดใช้งานได้โดยใช้data-touchแอตทริบิวต์ ตัวอย่างด้านล่างยังไม่มีdata-rideแอตทริบิวต์และมีdata-interval="false"ดังนั้นจึงไม่เล่นอัตโนมัติ

<div id="carouselExampleControlsNoTouching" class="carousel slide" data-touch="false" data-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-target="#carouselExampleControlsNoTouching" data-slide="prev">
    <span class="carousel-control-prev-icon" aria-hidden="true"></span>
    <span class="sr-only">Previous</span>
  </button>
  <button class="carousel-control-next" type="button" data-target="#carouselExampleControlsNoTouching" data-slide="next">
    <span class="carousel-control-next-icon" aria-hidden="true"></span>
    <span class="sr-only">Next</span>
  </button>
</div>

การใช้งาน

ผ่านแอตทริบิวต์ข้อมูล

ใช้แอตทริบิวต์ข้อมูลเพื่อควบคุมตำแหน่งของวงล้อได้อย่างง่ายดาย data-slideยอมรับคำหลักprevหรือnextซึ่งเปลี่ยนตำแหน่งสไลด์ที่สัมพันธ์กับตำแหน่งปัจจุบัน อีกวิธีหนึ่ง ใช้data-slide-toเพื่อส่งดัชนีสไลด์ดิบไปยังภาพหมุนdata-slide-to="2"ซึ่งจะเลื่อนตำแหน่งสไลด์ไปที่ดัชนีเฉพาะที่ขึ้นต้น0ด้วย

แอตทริบิวต์data-ride="carousel"นี้ใช้เพื่อทำเครื่องหมายภาพหมุนเป็นภาพเคลื่อนไหวโดยเริ่มต้นเมื่อโหลดหน้าเว็บ หากคุณไม่ได้ใช้data-ride="carousel"เพื่อเริ่มต้นภาพหมุน คุณต้องเริ่มต้นด้วยตัวเอง ไม่สามารถใช้ร่วมกับการเริ่มต้น JavaScript ที่ชัดเจน (ซ้ำซ้อนและไม่จำเป็น) ของภาพหมุนเดียวกัน

ผ่านจาวาสคริปต์

โทรแบบหมุนด้วยตนเองด้วย:

$('.carousel').carousel()

ตัวเลือก

ตัวเลือกสามารถส่งผ่านแอตทริบิวต์ข้อมูลหรือ JavaScript สำหรับแอ็ตทริบิวต์ data ให้ผนวกชื่ออ็อพชันต่อท้ายdata-เช่นเดียวกับในdata-interval="".

ชื่อ พิมพ์ ค่าเริ่มต้น คำอธิบาย
ช่วงเวลา ตัวเลข 5000 ระยะเวลาที่จะหน่วงเวลาระหว่างการปั่นจักรยานรายการโดยอัตโนมัติ ถ้าfalse, ภาพหมุนจะไม่หมุนโดยอัตโนมัติ
แป้นพิมพ์ บูลีน จริง ว่าภาพหมุนควรตอบสนองต่อเหตุการณ์แป้นพิมพ์หรือไม่
หยุด สตริง | บูลีน 'โฮเวอร์'

หากตั้งค่าเป็น จะ'hover'หยุดการวนรอบของวงล้อชั่วคราวmouseenterและเปิดการวนต่อของวงล้อmouseleaveต่อ หากตั้งค่าเป็น การfalseวางเมาส์เหนือภาพหมุนจะไม่หยุดชั่วคราว

บนอุปกรณ์ที่เปิดใช้งานระบบสัมผัส เมื่อตั้งค่าเป็น การ'hover'ปั่นจักรยานจะหยุดชั่วคราวtouchend(เมื่อผู้ใช้โต้ตอบกับภาพหมุนเสร็จสิ้น) เป็นเวลาสองช่วงก่อนที่จะกลับมาทำงานต่อโดยอัตโนมัติ โปรดทราบว่านี่เป็นสิ่งที่เพิ่มเติมจากพฤติกรรมของเมาส์ด้านบน
ขี่ สตริง เท็จ เล่นภาพหมุนอัตโนมัติหลังจากที่ผู้ใช้วนรอบรายการแรกด้วยตนเอง หากตั้งค่าเป็น จะ'carousel'เล่นภาพหมุนอัตโนมัติเมื่อโหลด
ห่อ บูลีน จริง ว่าวงล้อควรวนอย่างต่อเนื่องหรือหยุดยากหรือไม่
สัมผัส บูลีน จริง ว่าภาพหมุนควรสนับสนุนการโต้ตอบการปัดไปทางซ้าย/ขวาบนอุปกรณ์หน้าจอสัมผัสหรือไม่

วิธีการ

วิธีการและการเปลี่ยนแบบอะซิงโครนัส

เมธอด API ทั้งหมดเป็นแบบอะซิงโครนัสและเริ่มต้นการเปลี่ยนแปลง พวกเขาจะกลับไปที่ผู้โทรทันทีที่เริ่มเปลี่ยน แต่ ก่อน ที่จะสิ้นสุด นอกจากนี้ การเรียกเมธอดบนคอมโพเนนต์การเปลี่ยนจะถูกละเว้น

ดูเอกสาร JavaScript ของเราสำหรับข้อมูลเพิ่มเติม

.carousel(options)

เริ่มต้นวงล้อด้วยตัวเลือกเสริมobjectและเริ่มวนรอบรายการต่างๆ

$('.carousel').carousel({
  interval: 2000
})

.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 เหตุการณ์นี้เริ่มทำงานเมื่อภาพหมุนเสร็จสิ้นการเปลี่ยนสไลด์ 
$('#myCarousel').on('slide.bs.carousel', function () {
  // do something...
})

เปลี่ยนระยะเวลาการเปลี่ยนแปลง

ระยะเวลาการเปลี่ยนแปลงของ.carousel-itemสามารถเปลี่ยนได้ด้วย$carousel-transitionตัวแปร Sass ก่อนคอมไพล์หรือกำหนดสไตล์เอง หากคุณใช้ CSS ที่คอมไพล์แล้ว หากมีการใช้การเปลี่ยนหลายครั้ง ตรวจสอบให้แน่ใจว่าได้กำหนดการเปลี่ยนรูปแบบก่อน (เช่นtransition: transform 2s ease, opacity .5s ease-out)