ม้าหมุน

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

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

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

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

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

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

ตัวอย่าง

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

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

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

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

<div id="carouselExampleSlidesOnly" class="carousel slide" data-ride="carousel">
  <div class="carousel-inner">
    <div class="carousel-item active">
      <img class="d-block w-100" src=".../800x400?auto=yes&bg=777&fg=555&text=First slide" alt="First slide">
    </div>
    <div class="carousel-item">
      <img class="d-block w-100" src=".../800x400?auto=yes&bg=666&fg=444&text=Second slide" alt="Second slide">
    </div>
    <div class="carousel-item">
      <img class="d-block w-100" src=".../800x400?auto=yes&bg=555&fg=333&text=Third slide" alt="Third slide">
    </div>
  </div>
</div>

ด้วยการควบคุม

เพิ่มในการควบคุมก่อนหน้าและถัดไป:

<div id="carouselExampleControls" class="carousel slide" data-ride="carousel">
  <div class="carousel-inner">
    <div class="carousel-item active">
      <img class="d-block w-100" src=".../800x400?auto=yes&bg=777&fg=555&text=First slide" alt="First slide">
    </div>
    <div class="carousel-item">
      <img class="d-block w-100" src=".../800x400?auto=yes&bg=666&fg=444&text=Second slide" alt="Second slide">
    </div>
    <div class="carousel-item">
      <img class="d-block w-100" src=".../800x400?auto=yes&bg=555&fg=333&text=Third slide" alt="Third slide">
    </div>
  </div>
  <a class="carousel-control-prev" href="#carouselExampleControls" role="button" data-slide="prev">
    <span class="carousel-control-prev-icon" aria-hidden="true"></span>
    <span class="sr-only">Previous</span>
  </a>
  <a class="carousel-control-next" href="#carouselExampleControls" role="button" data-slide="next">
    <span class="carousel-control-next-icon" aria-hidden="true"></span>
    <span class="sr-only">Next</span>
  </a>
</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 class="d-block w-100" src=".../800x400?auto=yes&bg=777&fg=555&text=First slide" alt="First slide">
    </div>
    <div class="carousel-item">
      <img class="d-block w-100" src=".../800x400?auto=yes&bg=666&fg=444&text=Second slide" alt="Second slide">
    </div>
    <div class="carousel-item">
      <img class="d-block w-100" src=".../800x400?auto=yes&bg=555&fg=333&text=Third slide" alt="Third slide">
    </div>
  </div>
  <a class="carousel-control-prev" href="#carouselExampleIndicators" role="button" data-slide="prev">
    <span class="carousel-control-prev-icon" aria-hidden="true"></span>
    <span class="sr-only">Previous</span>
  </a>
  <a class="carousel-control-next" href="#carouselExampleIndicators" role="button" data-slide="next">
    <span class="carousel-control-next-icon" aria-hidden="true"></span>
    <span class="sr-only">Next</span>
  </a>
</div>

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

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

ป้ายสไลด์แรก

Nulla vitae elit libero, pharetra augue mollis interdum.

ป้ายสไลด์ที่สอง

Lorem ipsum dolor sit amet, consectetur adipiscing elit. โลเรม อิปซัม โดลอร์

ป้ายสไลด์ที่สาม

Praesent commodo cursus magna, vel scelerisque nisl consectetur.

<div class="carousel-item">
  <img src="..." alt="...">
  <div class="carousel-caption d-none d-md-block">
    <h5>...</h5>
    <p>...</p>
  </div>
</div>

Crossfade

เพิ่ม.carousel-fadeไปยังภาพหมุนของคุณเพื่อทำให้สไลด์เคลื่อนไหวด้วยการค่อยๆ เปลี่ยนแทนสไลด์

<div id="carouselExampleFade" class="carousel slide carousel-fade" data-ride="carousel">
  <div class="carousel-inner">
    <div class="carousel-item active">
      <img class="d-block w-100" src=".../800x400?auto=yes&bg=777&fg=555&text=First slide" alt="First slide">
    </div>
    <div class="carousel-item">
      <img class="d-block w-100" src=".../800x400?auto=yes&bg=666&fg=444&text=Second slide" alt="Second slide">
    </div>
    <div class="carousel-item">
      <img class="d-block w-100" src=".../800x400?auto=yes&bg=555&fg=333&text=Third slide" alt="Third slide">
    </div>
  </div>
  <a class="carousel-control-prev" href="#carouselExampleFade" role="button" data-slide="prev">
    <span class="carousel-control-prev-icon" aria-hidden="true"></span>
    <span class="sr-only">Previous</span>
  </a>
  <a class="carousel-control-next" href="#carouselExampleFade" role="button" data-slide="next">
    <span class="carousel-control-next-icon" aria-hidden="true"></span>
    <span class="sr-only">Next</span>
  </a>
</div>

การใช้งาน

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

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

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

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

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

$('.carousel').carousel()

ตัวเลือก

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

ชื่อ	พิมพ์	ค่าเริ่มต้น	คำอธิบาย
ช่วงเวลา	ตัวเลข	5000	ระยะเวลาที่จะหน่วงเวลาระหว่างการปั่นจักรยานรายการโดยอัตโนมัติ หากเป็นเท็จ ภาพหมุนจะไม่หมุนโดยอัตโนมัติ
แป้นพิมพ์	บูลีน	จริง	ว่าภาพหมุนควรตอบสนองต่อเหตุการณ์แป้นพิมพ์หรือไม่
หยุด	สตริง \| บูลีน	"โฮเวอร์"	หากตั้งค่าเป็น จะ`"hover"`หยุดการวนรอบของวงล้อชั่วคราว`mouseenter`และเปิดการวนต่อของวงล้อ`mouseleave`ต่อ หากตั้งค่าเป็น การ`false`วางเมาส์เหนือภาพหมุนจะไม่หยุดชั่วคราว บนอุปกรณ์ที่เปิดใช้งานระบบสัมผัส เมื่อตั้งค่าเป็น การ`"hover"`ปั่นจักรยานจะหยุดชั่วคราว`touchend`(เมื่อผู้ใช้โต้ตอบกับภาพหมุนเสร็จสิ้น) เป็นเวลาสองช่วงก่อนที่จะกลับมาทำงานต่อโดยอัตโนมัติ โปรดทราบว่านี่เป็นสิ่งที่เพิ่มเติมจากพฤติกรรมของเมาส์ด้านบน
ขี่	สตริง	เท็จ	เล่นภาพหมุนอัตโนมัติหลังจากที่ผู้ใช้วนรอบรายการแรกด้วยตนเอง หาก "วงล้อ" เล่นภาพหมุนอัตโนมัติเมื่อโหลด
ห่อ	บูลีน	จริง	ว่าวงล้อควรวนอย่างต่อเนื่องหรือหยุดยากหรือไม่

วิธีการ

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

เมธอด 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')`

ทำลายภาพหมุนขององค์ประกอบ

กิจกรรม

คลาสม้าหมุนของ 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)