ม้าหมุน

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

ในหน้านี้

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

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

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

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

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

ตัวอย่าง

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

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

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

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

html

<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".

html

<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>

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

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

html

<div id="carouselExampleIndicators" class="carousel slide" data-bs-ride="true">
  <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.

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

เนื้อหาตัวแทนบางส่วนสำหรับสไลด์แรก

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

เนื้อหาตัวแทนบางส่วนสำหรับสไลด์ที่สอง

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

เนื้อหาตัวแทนบางส่วนสำหรับสไลด์ที่สาม

html

<div id="carouselExampleCaptions" class="carousel slide" data-bs-ride="false">
  <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ไปยังภาพหมุนของคุณเพื่อทำให้สไลด์เคลื่อนไหวด้วยการเปลี่ยนการค่อยๆ จางแทนที่จะเป็นสไลด์ ขึ้นอยู่กับเนื้อหาภาพหมุนของคุณ (เช่น สไลด์ข้อความเท่านั้น) คุณอาจต้องการเพิ่ม.bg-bodyหรือ CSS แบบกำหนดเองบางอย่างใน.carousel-items สำหรับการครอสเฟดที่เหมาะสม

html

<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เพื่อเปลี่ยนระยะเวลาในการหน่วงเวลาระหว่างการปั่นจักรยานไปยังรายการถัดไปโดยอัตโนมัติ

html

<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แอตทริบิวต์ดังนั้นจึงไม่เล่นอัตโนมัติ

html

<div id="carouselExampleControlsNoTouching" class="carousel slide" data-bs-touch="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.

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

เนื้อหาตัวแทนบางส่วนสำหรับสไลด์แรก

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

เนื้อหาตัวแทนบางส่วนสำหรับสไลด์ที่สอง

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

เนื้อหาตัวแทนบางส่วนสำหรับสไลด์ที่สาม

html

<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 ที่ชัดเจน (ซ้ำซ้อนและไม่จำเป็น) ของภาพหมุนเดียวกัน

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

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

const carousel = new bootstrap.Carousel('#myCarousel')

ตัวเลือก

เนื่องจากตัวเลือกสามารถส่งผ่านแอตทริบิวต์ข้อมูลหรือ JavaScript คุณจึงเพิ่มชื่อตัวเลือกต่อท้ายได้ เช่น เดียวdata-bs-กับใน data-bs-animation="{value}"ตรวจสอบให้แน่ใจว่าได้เปลี่ยนประเภทเคสของชื่อตัวเลือกจาก “ camelCase ” เป็น “ kebab-case ” เมื่อส่งตัวเลือกผ่านแอตทริบิวต์ data เช่น ใช้data-bs-custom-class="beautifier"แทนdata-bs-customClass="beautifier".

ใน Bootstrap 5.2.0 ส่วนประกอบทั้งหมดสนับสนุนแอตทริบิวต์ข้อมูลที่สงวนไว้สำหรับทดลองdata-bs-configซึ่งสามารถจัดเก็บการกำหนดค่าส่วนประกอบอย่างง่ายเป็นสตริง JSON เมื่อองค์ประกอบมีdata-bs-config='{"delay":0, "title":123}'และdata-bs-title="456"แอตทริบิวต์ ค่าสุดท้ายtitleจะเป็น456และแอตทริบิวต์ข้อมูลที่แยกจากกันจะแทนที่ค่าที่ให้ไว้data-bs-configใน นอกจากนี้ แอตทริบิวต์ข้อมูลที่มีอยู่ยังสามารถเก็บค่า JSON เช่นdata-bs-delay='{"show":0,"hide":150}'.

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

วิธีการ

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

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

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

คุณสามารถสร้างอินสแตนซ์ภาพหมุนด้วยตัวสร้างภาพหมุนได้ เช่น เพื่อเริ่มต้นด้วยตัวเลือกเพิ่มเติมและเริ่มวนรอบรายการ:

const myCarouselElement = document.querySelector('#myCarousel')
const carousel = new bootstrap.Carousel(myCarouselElement, {
  interval: 2000,
  wrap: false
})

วิธี	คำอธิบาย
`cycle`	หมุนเวียนผ่านรายการแบบหมุนจากซ้ายไปขวา
`dispose`	ทำลายภาพหมุนขององค์ประกอบ (ลบข้อมูลที่เก็บไว้ในองค์ประกอบ DOM)
`getInstance`	วิธีสแตติกที่ช่วยให้คุณได้รับอินสแตนซ์ภาพหมุนที่เชื่อมโยงกับองค์ประกอบ DOM คุณสามารถใช้ได้ดังนี้`bootstrap.Carousel.getInstance(element)`:
`getOrCreateInstance`	เมธอดแบบคงที่ซึ่งส่งคืนอินสแตนซ์ภาพหมุนที่เชื่อมโยงกับองค์ประกอบ DOM หรือสร้างใหม่ในกรณีที่ไม่ได้เริ่มต้น คุณสามารถใช้สิ่งนี้: `bootstrap.Carousel.getOrCreateInstance(element)`.
`next`	วนไปยังรายการถัดไป กลับไปยังผู้โทรก่อนที่จะแสดงรายการถัดไป (เช่น ก่อนที่`slid.bs.carousel`เหตุการณ์จะเกิดขึ้น)
`nextWhenVisible`	อย่าวนวงล้อไปที่ถัดไปเมื่อเพจไม่สามารถมองเห็นได้ หรือวงล้อไม่สามารถมองเห็นได้ กลับไปยังผู้โทรก่อนที่จะแสดงรายการเป้าหมาย
`pause`	หยุดม้าหมุนจากการปั่นจักรยานผ่านรายการ
`prev`	วนไปยังรายการก่อนหน้า กลับไปยังผู้โทรก่อนที่จะแสดงรายการก่อนหน้า (เช่น ก่อนที่`slid.bs.carousel`เหตุการณ์จะเกิดขึ้น)
`to`	หมุนวงล้อไปที่เฟรมใดเฟรมหนึ่ง (อิงตาม 0 คล้ายกับอาร์เรย์) กลับไปยังผู้โทรก่อนที่จะแสดงรายการเป้าหมาย (เช่น ก่อนที่`slid.bs.carousel`เหตุการณ์จะเกิดขึ้น)

เหตุการณ์

คลาสม้าหมุนของ Bootstrap เปิดเผยสองเหตุการณ์สำหรับการเชื่อมต่อกับฟังก์ชันหมุน ทั้งสองเหตุการณ์มีคุณสมบัติเพิ่มเติมดังต่อไปนี้:

direction: ทิศทางที่วงล้อเลื่อน ( "left"หรือ"right")
relatedTarget: องค์ประกอบ DOM ที่กำลังถูกเลื่อนเข้าที่ในฐานะรายการที่ใช้งานอยู่
from: ดัชนีของรายการปัจจุบัน
to: ดัชนีของรายการถัดไป

เหตุการณ์ภาพหมุนทั้งหมดจะถูกไล่ออกที่ตัวหมุนเอง (เช่น ที่<div class="carousel">)

ประเภทงาน	คำอธิบาย
`slid.bs.carousel`	เริ่มทำงานเมื่อภาพหมุนเปลี่ยนสไลด์เสร็จ
`slide.bs.carousel`	เริ่มทำงานทันทีเมื่อมี`slide`การเรียกใช้เมธอดอินสแตนซ์

const myCarousel = document.getElementById('myCarousel')

myCarousel.addEventListener('slide.bs.carousel', event => {
  // do something...
})

ม้าหมุน

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

ตัวอย่าง

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

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

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

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

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

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

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

Crossfade

.carousel-itemช่วงเวลาส่วนบุคคล

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

ตัวแปรมืด

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

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

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

การเปลี่ยนแปลงที่กำหนดเอง

ซาส

ตัวแปร

การใช้งาน

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

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

ตัวเลือก

วิธีการ

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

เหตุการณ์

`.carousel-item`ช่วงเวลาส่วนบุคคล