ꯃꯔꯨꯑꯣꯏꯕꯥ ꯀꯟꯇꯦꯟꯇ ꯑꯗꯨꯗꯥ ꯆꯠꯂꯨ꯫ ꯗꯣꯛꯌꯨꯃꯦꯟꯇꯁꯤꯡ ꯅꯦꯚꯤꯒꯦꯁꯅꯗꯥ ꯆꯠꯂꯨ꯫
Check
in English

ꯀꯦꯔꯣꯁꯤꯜ ꯇꯧꯕꯥ꯫

ꯑꯦꯂꯤꯃꯦꯟꯇꯁꯤꯡꯒꯤ ꯈꯨꯠꯊꯥꯡꯗꯥ ꯁꯥꯏꯀꯜ ꯇꯧꯅꯕꯒꯤꯗꯃꯛ ꯁ꯭ꯂꯥꯏꯗꯁꯣ ꯀꯝꯄꯣꯅꯦꯟꯇ ꯑꯃꯥ-ꯏꯃꯦꯖꯁꯤꯡ ꯅꯠꯠꯔꯒꯥ ꯇꯦꯛꯁꯇꯀꯤ ꯁ꯭ꯂꯥꯏꯗꯁꯤꯡ-ꯀꯦꯔꯣꯁꯦꯂꯒꯨꯝꯕꯥ꯫

ꯃꯁꯤ ꯀꯔꯝꯅꯥ ꯊꯕꯛ ꯇꯧꯕꯒꯦ꯫

ꯀꯦꯔꯣꯁꯤꯜ ꯑꯁꯤ ꯀꯟꯇꯦꯟꯇꯁꯤꯡꯒꯤ ꯁꯤꯔꯤꯖ ꯑꯃꯒꯤ ꯈꯨꯠꯊꯥꯡꯗꯥ ꯁꯥꯏꯛꯂꯤꯡ ꯇꯧꯅꯕꯒꯤꯗꯃꯛ ꯁ꯭ꯂꯥꯏꯗꯁꯣ ꯑꯃꯅꯤ, ꯃꯁꯤ ꯁꯤ.ꯑꯦꯁ.ꯑꯦꯁ.꯳ꯗꯤ ꯇ꯭ꯔꯥꯟꯁꯐꯣꯔꯃꯁꯤꯡ ꯑꯃꯁꯨꯡ ꯖꯥꯚꯥꯁ꯭ꯛꯔꯤꯞꯇ ꯈꯔꯒꯥ ꯂꯣꯌꯅꯅꯥ ꯁꯦꯃꯈꯤꯕꯅꯤ꯫ ꯃꯁꯤꯅꯥ ꯏꯃꯦꯖꯁꯤꯡ, ꯇꯦꯛꯁꯠ ꯅꯠꯠꯔꯒꯥ ꯀꯁ꯭ꯇꯝ ꯃꯥꯔꯀꯑꯥꯄꯀꯤ ꯁꯤꯔꯤꯖ ꯑꯃꯒꯥ ꯂꯣꯌꯅꯅꯥ ꯊꯕꯛ ꯇꯧꯏ꯫ ꯃꯁꯤꯗꯥ ꯃꯃꯥꯡꯒꯤ/ꯃꯊꯪꯒꯤ ꯀꯟꯠꯔꯣꯂꯁꯤꯡ ꯑꯃꯁꯨꯡ ꯏꯟꯗꯤꯀꯦꯇꯔꯁꯤꯡꯒꯤ ꯁꯄꯣꯔꯇꯁꯨ ꯌꯥꯑꯣꯔꯤ꯫

ꯄꯦꯖ ꯚꯤꯖꯤꯕꯤꯂꯤꯇꯤ 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>

ꯀ꯭ꯔꯣꯁꯐꯦꯗ ꯇꯧꯕꯥ꯫

.carousel-fadeꯁ꯭ꯂꯥꯏꯗ ꯑꯃꯒꯤ ꯃꯍꯨꯠꯇꯥ ꯐꯦꯗ ꯇ꯭ꯔꯥꯟꯁꯤꯁꯟ ꯑꯃꯒꯥ ꯂꯣꯌꯅꯅꯥ ꯁ꯭ꯂꯥꯏꯗꯁꯤꯡ ꯑꯦꯅꯤꯃꯦꯠ ꯇꯧꯅꯕꯥ ꯅꯍꯥꯛꯀꯤ ꯀꯦꯔꯣꯁꯦꯂꯗꯥ ꯍꯥꯄꯆꯤꯜꯂꯨ꯫ ꯅꯍꯥꯛꯀꯤ ꯀꯦꯔꯣꯁꯤꯜ ꯀꯟꯇꯦꯟꯇꯀꯤ ꯃꯇꯨꯡ ꯏꯟꯅꯥ (ꯈꯨꯗꯝ ꯑꯣꯏꯅꯥ, ꯇꯦꯛꯁꯠ ꯈꯛꯇꯒꯤ ꯁ꯭ꯂꯥꯏꯗꯁꯤꯡ), ꯅꯍꯥꯛꯅꯥ ꯃꯑꯣꯡ ꯆꯨꯝꯅꯥ ꯀ꯭ꯔꯣꯁꯐꯦꯗꯤꯡ ꯇꯧꯅꯕꯒꯤꯗꯃꯛ s ꯗꯥ .bg-bodyꯅꯠꯠꯔꯒꯥ ꯀꯁ꯭ꯇꯝ CSS ꯈꯔꯥ ꯍꯥꯄꯆꯤꯅꯕꯥ ꯄꯥꯝꯂꯕꯁꯨ ꯌꯥꯏ꯫.carousel-item

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>

ꯃꯊꯪꯒꯤ ꯑꯥꯏꯇꯦꯝ ꯑꯗꯨꯗꯥ ꯑꯣꯇꯣꯃꯦꯇꯤꯛ ꯑꯣꯏꯅꯥ ꯁꯥꯏꯛꯂꯤꯡ ꯇꯧꯕꯒꯤ ꯃꯔꯛꯇꯥ ꯊꯦꯡꯊꯕꯒꯤ ꯃꯇꯃꯒꯤ ꯆꯥꯡ ꯑꯗꯨ ꯍꯣꯡꯗꯣꯛꯅꯕꯥ 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ꯀꯦꯄꯁꯟ ꯑꯃꯁꯨꯡ ꯀꯟꯠꯔꯣꯂꯁꯤꯡꯗꯥ ꯑꯍꯦꯅꯕꯥ ꯁꯥꯁ ꯚꯦꯔꯤꯑꯦꯕꯂꯁꯤꯡ ꯂꯩ ꯃꯗꯨꯅꯥ 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ꯅꯠꯠꯔꯒꯥ ꯀꯔꯤꯒꯨꯝꯕꯥ ꯅꯍꯥꯛꯅꯥ ꯀꯝꯄꯥꯏꯜ ꯇꯧꯔꯕꯥ 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ꯑꯁꯤ ꯌꯥꯔꯦ , ꯃꯁꯤꯅꯥ ꯃꯁꯤꯒꯤ ꯍꯧꯖꯤꯛ ꯂꯩꯔꯤꯕꯥ ꯄꯣꯖꯤꯁꯟ ꯑꯁꯤꯒꯥ ꯆꯥꯡꯗꯝꯅꯕꯗꯥ ꯁ꯭ꯂꯥꯏꯗꯀꯤ ꯄꯣꯖꯤꯁꯟ ꯑꯗꯨ ꯍꯣꯡꯗꯣꯀꯏ꯫ ꯅꯠꯠꯔꯒꯥ, ꯀꯦꯔꯣꯁꯦꯂꯗꯥ ꯔꯣ ꯁ꯭ꯂꯥꯏꯗ ꯏꯟꯗꯦꯛꯁ ꯑꯃꯥ ꯄꯥꯁ ꯇꯧꯅꯕꯥ ꯁꯤꯖꯤꯟꯅꯧ , ꯃꯁꯤꯅꯥ ꯁ꯭ꯂꯥꯏꯗꯀꯤ ꯄꯣꯖꯤꯁꯟ ꯑꯗꯨ .prevnextdata-bs-slide-todata-bs-slide-to="2"0

ꯑꯦꯠꯔꯤꯕꯤꯎꯠ ꯑꯁꯤ data-bs-ride="carousel"ꯄꯦꯖ ꯂꯣꯗꯇꯒꯤ ꯍꯧꯔꯒꯥ ꯀꯦꯔꯣꯁꯤꯜ ꯑꯃꯥ ꯑꯦꯅꯤꯃꯦꯇꯦꯗ ꯑꯣꯏꯅꯥ ꯃꯥꯔꯛ ꯇꯧꯕꯗꯥ ꯁꯤꯖꯤꯟꯅꯩ꯫ ꯀꯔꯤꯒꯨꯝꯕꯥ ꯅꯍꯥꯛꯅꯥ ꯅꯍꯥꯛꯀꯤ ꯀꯦꯔꯣꯁꯤꯜ ꯑꯗꯨ ꯏꯅꯤꯁꯤꯑꯦꯂꯥꯏꯖ ꯇꯧꯕꯗꯥ ꯁꯤꯖꯤꯟꯅꯗ꯭ꯔꯕꯗꯤ data-bs-ride="carousel", ꯅꯍꯥꯛꯅꯥ ꯃꯁꯥꯅꯥ ꯏꯅꯤꯁꯤꯑꯦꯂꯥꯏꯖ ꯇꯧꯒꯗꯕꯅꯤ꯫ ꯃꯁꯤ ꯆꯞ ꯃꯥꯟꯅꯕꯥ ꯀꯦꯔꯣꯁꯦꯂꯒꯤ (ꯔꯤꯗꯟꯗꯦꯟꯇ ꯑꯃꯁꯨꯡ ꯃꯊꯧ ꯇꯥꯗꯕꯥ) ꯃꯌꯦꯛ ꯁꯦꯡꯕꯥ ꯖꯥꯚꯥꯁ꯭ꯛꯔꯤꯞꯇ ꯏꯅꯤꯁꯤꯑꯦꯂꯥꯏꯖꯦꯁꯅꯒꯥ ꯂꯣꯌꯅꯅꯥ ꯁꯤꯖꯤꯟꯅꯕꯥ ꯌꯥꯗꯦ꯫

ꯖꯥꯚꯥꯁ꯭ꯛꯔꯤꯞꯇꯀꯤ ꯈꯨꯠꯊꯥꯡꯗꯥ꯫

ꯀꯦꯔꯣꯁꯤꯜ ꯃꯦꯅꯨꯑꯦꯜ ꯑꯣꯏꯅꯥ ꯀꯜ ꯇꯧꯕꯤꯌꯨ:

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

ꯑꯣꯄꯁꯅꯁꯤꯡ ꯂꯩ꯫

ꯑꯣꯄꯁꯅꯁꯤꯡ ꯑꯁꯤ ꯗꯦꯇꯥ ꯑꯦꯠꯔꯤꯕꯤꯎꯇꯁꯤꯡ ꯅꯠꯠꯔꯒꯥ ꯖꯥꯚꯥꯁ꯭ꯛꯔꯤꯞꯇꯀꯤ ꯈꯨꯠꯊꯥꯡꯗꯥ ꯄꯥꯁ ꯇꯧꯕꯥ ꯌꯥꯕꯅꯥ, ꯅꯍꯥꯛꯅꯥ ꯑꯣꯄꯁꯅꯒꯤ ꯃꯃꯤꯡ ꯑꯃꯥ data-bs-, data-bs-animation="{value}". ꯗꯦꯇꯥ ꯑꯦꯠꯔꯤꯕꯤꯎꯇꯁꯤꯡꯒꯤ ꯈꯨꯠꯊꯥꯡꯗꯥ ꯑꯣꯄꯁꯅꯁꯤꯡ ꯄꯥꯁ ꯇꯧꯕꯥ ꯃꯇꯃꯗꯥ ꯑꯣꯄꯁꯅꯒꯤ ꯃꯃꯤꯡꯒꯤ ꯀꯦꯁ ꯃꯈꯜ ꯑꯗꯨ “ camelCase ” ꯗꯒꯤ “ kebab -case ”ꯗꯥ ꯍꯣꯡꯗꯣꯀꯄꯥ ꯁꯣꯌꯗꯅꯥ ꯇꯧꯕꯤꯌꯨ꯫ ꯈꯨꯗꯝ ꯑꯣꯏꯅꯥ, data-bs-custom-class="beautifier"ꯃꯗꯨꯒꯤ ꯃꯍꯨꯠꯇꯥ ꯁꯤꯖꯤꯟꯅꯧ data-bs-customClass="beautifier".

ꯕꯨꯇꯁ꯭ꯠꯔꯥꯞ 5.2.0ꯗꯒꯤ ꯍꯧꯅꯥ, ꯀꯝꯄꯣꯅꯦꯟꯇ ꯄꯨꯝꯅꯃꯛꯅꯥ JSON ꯁ꯭ꯠꯔꯤꯡ ꯑꯃꯥ ꯑꯣꯏꯅꯥ ꯏꯆꯝ ꯆꯝꯕꯥ ꯀꯝꯄꯣꯅꯦꯟꯇ ꯀꯅꯐꯤꯒꯔꯦꯁꯟ ꯊꯝꯕꯥ ꯌꯥꯕꯥ ꯑꯦꯛꯁꯄꯤꯔꯤꯃꯦꯟꯇ ꯔꯤꯖꯔꯚ ꯇꯧꯔꯕꯥ ꯗꯦꯇꯥ ꯑꯦꯠꯔꯤꯕꯤꯎꯠ ꯑꯃꯥ ꯁꯄꯣꯔꯠ ꯇꯧꯏ꯫ data-bs-configꯑꯦꯂꯤꯃꯦꯟꯇ ꯑꯃꯅꯥ data-bs-config='{"delay":0, "title":123}'ꯑꯃꯁꯨꯡ data-bs-title="456"ꯑꯦꯠꯔꯤꯕꯤꯎꯇꯁꯤꯡ ꯂꯩꯕꯥ ꯃꯇꯃꯗꯥ, ꯑꯔꯣꯏꯕꯥ titleꯚꯦꯜꯌꯨ ꯑꯗꯨ ꯑꯣꯏꯒꯅꯤ 456ꯑꯃꯁꯨꯡ ꯇꯣꯉꯥꯅꯕꯥ ꯗꯦꯇꯥ ꯑꯦꯠꯔꯤꯕꯤꯎꯇꯁꯤꯡꯅꯥ data-bs-config. ꯃꯁꯤꯒꯤ ꯃꯊꯛꯇꯥ, ꯍꯧꯖꯤꯛ ꯂꯩꯔꯤꯕꯥ ꯗꯦꯇꯥ ꯑꯦꯠꯔꯤꯕ꯭ꯌꯨꯠꯁꯤꯡꯅꯥ 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 ꯀꯦꯔꯣꯁꯤꯜ ꯑꯗꯨ ꯂꯦꯞꯇꯅꯥ ꯁꯥꯏꯀꯜ ꯊꯧꯒꯗ꯭ꯔꯥ ꯅꯠꯠꯔꯒꯥ ꯍꯥꯔꯗ ꯁ꯭ꯇꯣꯞ ꯂꯩꯒꯗ꯭ꯔꯥ ꯍꯥꯌꯕꯗꯨ꯫

ꯄꯥꯝꯕꯩꯁꯤꯡ꯫

ꯑꯦꯁꯤꯅꯛꯔꯣꯅꯣꯁ ꯃꯦꯊꯗꯁꯤꯡ ꯑꯃꯁꯨꯡ ꯇ꯭ꯔꯥꯟꯁꯤꯁꯅꯁꯤꯡ꯫

ꯑꯦ.ꯄꯤ.ꯑꯥꯏ.ꯒꯤ ꯃꯦꯊꯗ ꯄꯨꯝꯅꯃꯛ ꯑꯁꯤ ꯑꯦꯁꯤꯅꯛꯔꯣꯅꯣꯁ ꯑꯣꯏ ꯑꯃꯁꯨꯡ ꯇ꯭ꯔꯥꯟꯁꯤꯁꯟ ꯑꯃꯥ ꯍꯧꯏ . ꯃꯈꯣꯌꯅꯥ ꯇ꯭ꯔꯥꯟꯁꯤꯁꯟ ꯍꯧꯔꯀꯄꯥ ꯃꯇꯃꯗꯥ ꯑꯗꯨꯕꯨ ꯂꯣꯏꯗ꯭ꯔꯤꯉꯩꯒꯤ ꯃꯃꯥꯡꯗꯥ ꯀꯣꯜ ꯇꯧꯔꯤꯕꯥ ꯃꯤꯑꯣꯏ ꯑꯗꯨꯗꯥ ꯍꯜꯂꯀꯏ . ꯃꯁꯤꯒꯤ ꯃꯊꯛꯇꯥ, ꯇ꯭ꯔꯥꯟꯁꯤꯁꯟ ꯇꯧꯔꯤꯕꯥ ꯀꯝꯄꯣꯅꯦꯟꯇ ꯑꯃꯗꯥ ꯃꯦꯊꯗ ꯀꯣꯜ ꯑꯃꯥ ꯏꯒꯅꯣꯔ ꯇꯧꯒꯅꯤ .

ꯑꯍꯦꯅꯕꯥ ꯏꯅꯐꯣꯔꯃꯦꯁꯅꯒꯤꯗꯃꯛꯇꯥ ꯑꯩꯈꯣꯌꯒꯤ ꯖꯥꯚꯥꯁ꯭ꯛꯔꯤꯞꯇ ꯗꯣꯛꯌꯨꯃꯦꯟꯇꯦꯁꯟ ꯌꯦꯡꯕꯤꯌꯨ .

ꯅꯍꯥꯛꯅꯥ ꯀꯦꯔꯣꯁꯤꯜ ꯀꯟꯁꯠꯔꯛꯁꯅꯒꯥ ꯂꯣꯌꯅꯅꯥ ꯀꯦꯔꯣꯁꯤꯜ ꯏꯟꯁꯇꯦꯟꯁ ꯑꯃꯥ ꯁꯦꯝꯕꯥ ꯌꯥꯏ, ꯈꯨꯗꯝ ꯑꯣꯏꯅꯥ, ꯑꯍꯦꯅꯕꯥ ꯑꯣꯄꯁꯅꯁꯤꯡꯒꯥ ꯂꯣꯌꯅꯅꯥ ꯏꯅꯤꯁꯤꯑꯦꯂꯥꯏꯖ ꯇꯧꯅꯕꯥ ꯑꯃꯁꯨꯡ ꯑꯥꯏꯇꯦꯃꯁꯤꯡꯒꯤ ꯈꯨꯠꯊꯥꯡꯗꯥ ꯁꯥꯏꯀꯜ ꯇꯧꯕꯥ ꯍꯧꯅꯕꯥ:

const myCarouselElement = document.querySelector('#myCarousel')
const carousel = new bootstrap.Carousel(myCarouselElement, {
  interval: 2000,
  wrap: false
})
ꯊꯧꯑꯪꯡ ꯋꯥꯔꯣꯜ
cycle ꯀꯦꯔꯣꯁꯤꯜ ꯑꯥꯏꯇꯦꯃꯁꯤꯡꯒꯤ ꯃꯔꯛꯇꯥ ꯂꯦꯃꯍꯧꯔꯤꯕꯥ ꯑꯗꯨꯗꯒꯤ ꯑꯔꯣꯏꯕꯥ ꯐꯥꯑꯣꯕꯥ ꯁꯥꯏꯀꯜ ꯇꯧꯏ꯫
dispose ꯑꯦꯂꯤꯃꯦꯟꯇ ꯑꯃꯒꯤ ꯀꯦꯔꯣꯁꯤꯜ ꯃꯥꯡꯍꯜꯂꯤ꯫ (ꯗꯤ.ꯑꯣ.ꯑꯦꯝ.ꯒꯤ ꯑꯦꯂꯤꯃꯦꯟꯇꯇꯥ ꯊꯝꯂꯤꯕꯥ ꯗꯦꯇꯥ ꯑꯗꯨ ꯂꯧꯊꯣꯀꯏ)
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ꯊꯧꯗꯣꯛ ꯑꯗꯨ ꯊꯣꯛꯂꯛꯠꯔꯤꯉꯩꯒꯤ ꯃꯃꯥꯡꯗꯥ) ꯀꯣꯂꯔ ꯑꯗꯨꯗꯥ ꯍꯜꯂꯀꯏ꯫

ꯊꯧꯔꯃꯁꯤꯡ꯫

ꯕꯨꯠꯁ꯭ꯠꯔꯥꯄꯀꯤ ꯀꯦꯔꯣꯁꯤꯜ ꯀ꯭ꯂꯥꯁ ꯑꯁꯤꯅꯥ ꯀꯦꯔꯣꯁꯤꯜ ꯐꯉ꯭ꯀꯁꯅꯦꯂꯤꯇꯤꯗꯥ ꯍꯨꯛ ꯇꯧꯅꯕꯒꯤꯗꯃꯛ ꯊꯧꯗꯣꯛ ꯑꯅꯤ ꯐꯣꯡꯗꯣꯛꯂꯤ꯫ ꯊꯧꯔꯝ ꯑꯅꯤꯃꯛꯇꯥ ꯃꯈꯥꯗꯥ ꯄꯤꯔꯤꯕꯥ ꯑꯍꯦꯅꯕꯥ ꯃꯒꯨꯅꯁꯤꯡ ꯑꯁꯤ ꯂꯩꯔꯤ:

  • direction: ꯀꯦꯔꯣꯁꯤꯜ ꯑꯗꯨꯅꯥ ꯁ꯭ꯂꯥꯏꯗ ꯇꯧꯔꯤꯕꯥ ꯃꯥꯌꯀꯩ ꯑꯗꯨ (ꯅꯠꯔꯒꯥ "left"ꯅꯠꯠꯔꯒꯥ "right")꯫
  • relatedTarget: ꯑꯦꯛꯇꯤꯕ ꯑꯥꯏꯇꯦꯝ ꯑꯣꯏꯅꯥ ꯃꯐꯝ ꯑꯗꯨꯗꯥ ꯁ꯭ꯂꯥꯏꯗ ꯇꯧꯔꯤꯕꯥ ꯗꯤ.ꯑꯣ.ꯑꯦꯝ.
  • 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...
})