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

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

ꯄꯦꯖ ꯑꯁꯤꯗꯥ ꯌꯥꯑꯣꯔꯤ꯫

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

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

ꯄꯦꯖ ꯚꯤꯖꯤꯕꯤꯂꯤꯇꯤ API ꯁꯄꯣꯔꯠ ꯇꯧꯕꯥ ꯕ꯭ꯔꯥꯎꯖꯔꯁꯤꯡꯗꯥ , ꯋꯦꯕꯄꯦꯖ ꯑꯗꯨ ꯌꯨꯖꯔꯅꯥ ꯎꯕꯥ ꯐꯪꯗꯕꯥ ꯃꯇꯃꯗꯥ (ꯕ꯭ꯔꯥꯎꯖꯔ ꯇꯦꯕ ꯑꯗꯨ ꯏꯅꯑꯦꯛꯇꯤꯚ ꯑꯣꯏꯕꯥ ꯃꯇꯃꯗꯥ, ꯕ꯭ꯔꯥꯎꯖꯔ ꯎꯏꯟꯗꯣ ꯑꯗꯨ ꯃꯤꯅꯤꯃꯝ ꯑꯣꯏꯕꯥ ꯃꯇꯃꯗꯥ, ꯑꯁꯤꯅꯆꯤꯡꯕꯥ) ꯀꯦꯔꯣꯁꯤꯜ ꯑꯗꯨꯅꯥ ꯁ꯭ꯂꯥꯏꯗ ꯇꯧꯕꯥ ꯊꯤꯡꯒꯅꯤ꯫

ꯀꯝꯄꯣꯅꯦꯟꯇ ꯑꯁꯤꯒꯤ ꯑꯦꯅꯤꯃꯦꯁꯟ ꯏꯐꯦꯛꯇ ꯑꯁꯤ prefers-reduced-motionꯃꯦꯗꯤꯌꯥ ꯀ꯭ꯕꯦꯔꯤꯒꯤ ꯃꯈꯥ ꯄꯣꯜꯂꯤ꯫ ꯑꯩꯈꯣꯌꯒꯤ ꯑꯦꯛꯁꯦꯁꯤꯕꯤꯂꯤꯇꯤ ꯗꯣꯀꯨꯃꯦꯟꯇꯦꯁꯅꯒꯤ ꯍꯟꯊꯔꯀꯄꯥ ꯃꯣꯁꯟ ꯁꯦꯛꯁꯟ ꯑꯗꯨ ꯌꯦꯡꯕꯤꯌꯨ .

ꯆꯥꯅꯕꯤꯗꯨꯅꯥ ꯈꯪꯖꯤꯅꯕꯤꯌꯨ ꯃꯗꯨꯗꯤ ꯅꯦꯁ꯭ꯇꯦꯗ ꯀꯦꯔꯣꯁꯤꯜ ꯑꯁꯤ ꯁꯄꯣꯔꯠ ꯇꯧꯗꯦ, ꯑꯃꯁꯨꯡ ꯀꯦꯔꯣꯁꯤꯜ ꯑꯁꯤ ꯃꯍꯧꯁꯥꯅꯥ ꯑꯦꯛꯁꯦꯁꯤꯕꯤꯂꯤꯇꯤ ꯁ꯭ꯇꯦꯟꯗꯔꯗꯁꯤꯡꯒꯥ ꯃꯥꯟꯅꯗꯦ꯫

ꯈꯨꯗꯝ

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

ꯀ꯭ꯂꯥꯁ .activeꯑꯗꯨ ꯁ꯭ꯂꯥꯏꯗ ꯑꯃꯗꯥ ꯍꯥꯄꯆꯤꯅꯕꯥ ꯃꯊꯧ ꯇꯥꯏ ꯅꯠꯔꯕꯗꯤ ꯀꯦꯔꯣꯁꯤꯜ ꯑꯗꯨ ꯎꯕꯥ ꯐꯪꯂꯣꯏ꯫ ꯃꯁꯤꯗꯁꯨ ꯅꯠꯇꯅꯥ ꯑꯣꯄꯁꯅꯦꯜ ꯀꯟꯠꯔꯣꯂꯁꯤꯡꯒꯤꯗꯃꯛ ꯑꯈꯟꯅꯕꯥ ꯑꯃꯥ ꯁꯣꯏꯗꯅꯥ ꯁꯦꯠ ꯇꯧꯕꯤꯌꯨ id, .carouselꯃꯔꯨꯑꯣꯏꯅꯥ ꯀꯔꯤꯒꯨꯝꯕꯥ ꯅꯍꯥꯛꯅꯥ ꯄꯦꯖ ꯑꯃꯗꯥ ꯃꯁꯤꯡ ꯌꯥꯝꯂꯕꯥ ꯀꯦꯔꯣꯁꯤꯜꯁꯤꯡ ꯁꯤꯖꯤꯟꯅꯔꯕꯗꯤ꯫ ꯀꯟꯠꯔꯣꯜ ꯑꯃꯁꯨꯡ ꯏꯟꯗꯤꯀꯦꯇꯔ ꯑꯦꯂꯤꯃꯦꯟꯇꯁꯤꯡꯗꯥ ꯑꯦꯂꯤꯃꯦꯟꯇ ꯑꯗꯨꯒꯥ ꯃꯥꯟꯅꯕꯥ ꯑꯦꯠꯔꯤꯕꯤꯎꯠ ꯑꯃꯥ ( data-bs-targetꯅꯠꯠꯔꯒꯥ hrefꯂꯤꯉ꯭ꯀꯁꯤꯡꯒꯤꯗꯃꯛꯇꯥ) ꯂꯩꯒꯗꯕꯅꯤ꯫id.carousel

ꯁ꯭ꯂꯥꯏꯗꯁꯤꯡ ꯈꯛꯇꯃꯛ꯫

ꯃꯐꯝ ꯑꯁꯤꯗꯥ ꯁ꯭ꯂꯥꯏꯗ ꯈꯛꯇꯒꯥ ꯂꯣꯌꯅꯅꯥ ꯀꯦꯔꯣꯁꯤꯜ ꯑꯃꯥ ꯌꯥꯑꯣꯔꯤ꯫ ꯕ꯭ꯔꯥꯎꯖꯔ ꯗꯤꯐꯣꯜꯇ ꯏꯃꯦꯖ ꯑꯦꯂꯥꯏꯅꯃꯦꯟꯇ ꯊꯤꯡꯅꯕꯥ ꯀꯦꯔꯣꯁꯤꯜ ꯏꯃꯦꯖꯁꯤꯡꯗꯥ .d-blockꯑꯃꯁꯨꯡ ꯂꯩꯕꯥ ꯑꯗꯨ ꯅꯣꯠ ꯇꯧꯕꯤꯌꯨ꯫.w-100

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

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

ꯏꯟꯗꯤꯀꯦꯇꯔꯁꯤꯡꯒꯥ ꯂꯣꯌꯅꯅꯥ꯫

ꯅꯍꯥꯛꯅꯥ ꯏꯟꯗꯤꯀꯦꯇꯔꯁꯤꯡ ꯑꯗꯨ ꯀꯦꯔꯣꯁꯤꯜ ꯑꯗꯨꯗꯥ ꯍꯥꯄꯆꯤꯅꯕꯁꯨ ꯌꯥꯏ, ꯀꯟꯠꯔꯣꯂꯁꯤꯡꯒꯥ ꯂꯣꯌꯅꯅꯥ, ꯃꯗꯨꯁꯨ꯫

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

ꯑꯍꯥꯅꯕꯥ ꯁ꯭ꯂꯥꯏꯗ ꯂꯦꯕꯦꯜ꯫

ꯑꯍꯥꯅꯕꯥ ꯁ꯭ꯂꯥꯏꯗꯀꯤꯗꯃꯛ ꯔꯤꯞꯔꯖꯦꯟꯇꯦꯇꯤꯕ ꯄ꯭ꯂꯦꯁꯍꯣꯜꯗꯔ ꯀꯟꯇꯦꯟꯇ ꯈꯔꯥ꯫

ꯑꯅꯤꯁꯨꯕꯥ ꯁ꯭ꯂꯥꯏꯗ ꯂꯦꯕꯦꯜ꯫

ꯑꯅꯤꯁꯨꯕꯥ ꯁ꯭ꯂꯥꯏꯗꯀꯤꯗꯃꯛ ꯔꯤꯞꯔꯖꯦꯟꯇꯦꯇꯤꯕ ꯄ꯭ꯂꯦꯁꯍꯣꯜꯗꯔ ꯀꯟꯇꯦꯟꯇ ꯈꯔꯥ꯫

ꯑꯍꯨꯃꯁꯨꯕꯥ ꯁ꯭ꯂꯥꯏꯗ ꯂꯦꯕꯦꯜ꯫

ꯑꯍꯨꯃꯁꯨꯕꯥ ꯁ꯭ꯂꯥꯏꯗꯀꯤꯗꯃꯛ ꯔꯤꯞꯔꯖꯦꯟꯇꯦꯇꯤꯕ ꯄ꯭ꯂꯦꯁꯍꯣꯜꯗꯔ ꯀꯟꯇꯦꯟꯇ ꯈꯔꯥ꯫

<div id="carouselExampleCaptions" class="carousel slide" data-bs-ride="carousel">
  <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ꯁ꯭ꯂꯥꯏꯗ ꯑꯃꯒꯤ ꯃꯍꯨꯠꯇꯥ ꯐꯦꯗ ꯇ꯭ꯔꯥꯟꯁꯤꯁꯟ ꯑꯃꯒꯥ ꯂꯣꯌꯅꯅꯥ ꯁ꯭ꯂꯥꯏꯗꯁꯤꯡ ꯑꯦꯅꯤꯃꯦꯠ ꯇꯧꯅꯕꯥ ꯅꯍꯥꯛꯀꯤ ꯀꯦꯔꯣꯁꯦꯂꯗꯥ ꯍꯥꯄꯆꯤꯜꯂꯨ꯫

<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

<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ꯃꯈꯥꯗꯥ ꯄꯤꯔꯤꯕꯥ ꯈꯨꯗꯝ ꯑꯁꯤꯅꯥ ꯑꯦꯠꯔꯤꯕꯤꯎꯠ ꯑꯁꯤꯁꯨ ꯌꯥꯑꯣꯗꯦ ꯑꯃꯁꯨꯡ ꯂꯩꯔꯤ data-bs-interval="false"ꯃꯔꯝ ꯑꯗꯨꯅꯥ ꯃꯁꯤꯅꯥ ꯑꯣꯇꯣꯞꯂꯦ ꯇꯧꯗꯦ꯫

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

ꯑꯍꯥꯅꯕꯥ ꯁ꯭ꯂꯥꯏꯗ ꯂꯦꯕꯦꯜ꯫

ꯑꯍꯥꯅꯕꯥ ꯁ꯭ꯂꯥꯏꯗꯀꯤꯗꯃꯛ ꯔꯤꯞꯔꯖꯦꯟꯇꯦꯇꯤꯕ ꯄ꯭ꯂꯦꯁꯍꯣꯜꯗꯔ ꯀꯟꯇꯦꯟꯇ ꯈꯔꯥ꯫

ꯑꯅꯤꯁꯨꯕꯥ ꯁ꯭ꯂꯥꯏꯗ ꯂꯦꯕꯦꯜ꯫

ꯑꯅꯤꯁꯨꯕꯥ ꯁ꯭ꯂꯥꯏꯗꯀꯤꯗꯃꯛ ꯔꯤꯞꯔꯖꯦꯟꯇꯦꯇꯤꯕ ꯄ꯭ꯂꯦꯁꯍꯣꯜꯗꯔ ꯀꯟꯇꯦꯟꯇ ꯈꯔꯥ꯫

ꯑꯍꯨꯃꯁꯨꯕꯥ ꯁ꯭ꯂꯥꯏꯗ ꯂꯦꯕꯦꯜ꯫

ꯑꯍꯨꯃꯁꯨꯕꯥ ꯁ꯭ꯂꯥꯏꯗꯀꯤꯗꯃꯛ ꯔꯤꯞꯔꯖꯦꯟꯇꯦꯇꯤꯕ ꯄ꯭ꯂꯦꯁꯍꯣꯜꯗꯔ ꯀꯟꯇꯦꯟꯇ ꯈꯔꯥ꯫

<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", ꯅꯍꯥꯛꯅꯥ ꯃꯁꯥꯅꯥ ꯏꯅꯤꯁꯤꯑꯦꯂꯥꯏꯖ ꯇꯧꯒꯗꯕꯅꯤ꯫ ꯃꯁꯤ ꯆꯞ ꯃꯥꯟꯅꯕꯥ ꯀꯦꯔꯣꯁꯦꯂꯒꯤ (ꯔꯤꯗꯟꯗꯦꯟꯇ ꯑꯃꯁꯨꯡ ꯃꯊꯧ ꯇꯥꯗꯕꯥ) ꯃꯌꯦꯛ ꯁꯦꯡꯕꯥ ꯖꯥꯚꯥꯁ꯭ꯛꯔꯤꯞꯇ ꯏꯅꯤꯁꯤꯑꯦꯂꯥꯏꯖꯦꯁꯅꯒꯥ ꯂꯣꯌꯅꯅꯥ ꯁꯤꯖꯤꯟꯅꯕꯥ ꯌꯥꯗꯦ꯫

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

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

var myCarousel = document.querySelector('#myCarousel')
var carousel = new bootstrap.Carousel(myCarousel)

ꯑꯣꯄꯁꯅꯁꯤꯡ ꯂꯩ꯫

ꯑꯣꯄꯁꯅꯁꯤꯡ ꯑꯁꯤ ꯗꯦꯇꯥ ꯑꯦꯠꯔꯤꯕꯤꯎꯇꯁꯤꯡ ꯅꯠꯠꯔꯒꯥ ꯖꯥꯚꯥꯁ꯭ꯛꯔꯤꯞꯇꯀꯤ ꯈꯨꯠꯊꯥꯡꯗꯥ ꯄꯥꯁ ꯇꯧꯕꯥ ꯌꯥꯏ꯫ ꯗꯦꯇꯥ ꯑꯦꯠꯔꯤꯕꯤꯎꯇꯁꯤꯡꯒꯤ ꯑꯣꯏꯅꯗꯤ, ꯑꯣꯄꯁꯅꯒꯤ ꯃꯃꯤꯡ ꯑꯗꯨ data-bs-, data-bs-interval="".

ꯃꯤꯡ	ꯃꯈꯜ	ꯀꯥꯡꯂꯣꯟ ꯏꯟꯗꯕ	ꯋꯥꯔꯣꯜ
`interval`	ꯃꯁꯤꯡ	`5000`	ꯑꯥꯏꯇꯦꯝ ꯑꯃꯕꯨ ꯑꯣꯇꯣꯃꯦꯇꯤꯛ ꯑꯣꯏꯅꯥ ꯁꯥꯏꯀꯜ ꯊꯧꯕꯒꯤ ꯃꯔꯛꯇꯥ ꯊꯦꯡꯊꯒꯗꯕꯥ ꯃꯇꯃꯒꯤ ꯆꯥꯡ꯫ ꯀꯔꯤꯒꯨꯝꯕꯥ `false`, ꯀꯦꯔꯣꯁꯤꯜ ꯑꯁꯤ ꯃꯁꯥ ꯃꯊꯟꯇꯥ ꯁꯥꯏꯀꯜ ꯇꯧꯔꯣꯏ꯫
`keyboard`	ꯕꯨꯂꯦꯅꯒꯤ ꯑꯣꯏꯕꯥ꯫	`true`	ꯀꯦꯔꯣꯁꯤꯜ ꯑꯗꯨꯅꯥ ꯀꯤꯕꯣꯔꯗꯀꯤ ꯊꯧꯗꯣꯀꯁꯤꯡꯗꯥ ꯔꯤꯑꯦꯛꯇ ꯇꯧꯒꯗ꯭ꯔꯥ ꯍꯥꯌꯕꯗꯨ꯫
`pause`	ꯁ꯭ꯠꯔꯤꯡ \| ꯕꯨꯂꯦꯅꯒꯤ ꯑꯣꯏꯕꯥ꯫	`'hover'`	ꯀꯔꯤꯒꯨꯝꯕꯥ ꯁꯦꯠ ꯇꯧꯔꯕꯗꯤ `'hover'`, ꯀꯦꯔꯣꯁꯤꯜ ꯑꯗꯨꯒꯤ ꯁꯥꯏꯛꯂꯤꯡ ꯑꯗꯨ ꯑꯣꯟꯊꯣꯀꯏ `mouseenter`ꯑꯃꯁꯨꯡ ꯀꯦꯔꯣꯁꯤꯜ ꯑꯗꯨꯒꯤ ꯁꯥꯏꯛꯂꯤꯡ ꯑꯗꯨ ꯑꯣꯟ `mouseleave`. ꯀꯔꯤꯒꯨꯝꯕꯥ ,ꯗꯥ ꯁꯦꯠ ꯇꯧꯔꯕꯗꯤ `false`, ꯀꯦꯔꯣꯁꯤꯜ ꯑꯗꯨꯒꯤ ꯃꯊꯛꯇꯥ ꯍꯣꯚꯔ ꯇꯧꯕꯅꯥ ꯃꯗꯨ ꯊꯤꯡꯖꯤꯜꯂꯣꯏ꯫ ꯇꯆ-ꯏꯅꯦꯕꯜ ꯗꯤꯚꯥꯏꯁꯁꯤꯡꯗꯥ, ꯗꯥ ꯁꯦꯠ ꯇꯧꯕꯥ ꯃꯇꯃꯗꯥ `'hover'`, ꯁꯥꯏꯛꯂꯤꯡ ꯑꯁꯤ `touchend`ꯑꯣꯇꯣꯃꯦꯇꯤꯛ ꯑꯣꯏꯅꯥ ꯑꯃꯨꯛ ꯍꯟꯅꯥ ꯍꯧꯗ꯭ꯔꯤꯉꯩꯒꯤ ꯃꯃꯥꯡꯗꯥ, ꯏꯟꯇꯔꯚꯦꯜ ꯑꯅꯤꯒꯤ ꯑꯣꯏꯅꯥ (ꯌꯨꯖꯔ ꯑꯗꯨꯅꯥ ꯀꯦꯔꯣꯁꯦꯂꯒꯥ ꯏꯟꯇꯔꯦꯛꯇ ꯇꯧꯕꯥ ꯂꯣꯌꯔꯕꯥ ꯃꯇꯨꯡꯗꯥ) ꯊꯃꯒꯅꯤ꯫ ꯃꯁꯤ ꯃꯊꯛꯇꯥ ꯄꯅꯈ꯭ꯔꯤꯕꯥ ꯃꯥꯎꯁꯀꯤ ꯂꯃꯆꯠ-ꯁꯥꯖꯠ ꯑꯁꯤꯒꯤ ꯃꯊꯛꯇꯥ ꯂꯩ ꯍꯥꯌꯕꯁꯤ ꯈꯪꯖꯤꯅꯕꯤꯌꯨ꯫
`ride`	ꯁ꯭ꯠꯔꯤꯡ \| ꯕꯨꯂꯦꯅꯒꯤ ꯑꯣꯏꯕꯥ꯫	`false`	ꯌꯨꯖꯔꯅꯥ ꯑꯍꯥꯅꯕꯥ ꯑꯥꯏꯇꯦꯝ ꯑꯗꯨ ꯃꯦꯅꯨꯑꯦꯜ ꯑꯣꯏꯅꯥ ꯁꯥꯏꯀꯜ ꯇꯧꯔꯕꯥ ꯃꯇꯨꯡꯗꯥ ꯀꯦꯔꯣꯁꯤꯜ ꯑꯗꯨ ꯑꯣꯇꯣꯞꯂꯦ ꯇꯧꯏ꯫ ꯀꯔꯤꯒꯨꯝꯕꯥ ,ꯗꯥ ꯁꯦꯠ ꯇꯧꯔꯕꯗꯤ `'carousel'`, ꯂꯣꯗ ꯇꯧꯕꯥ ꯃꯇꯃꯗꯥ ꯀꯦꯔꯣꯁꯤꯜ ꯑꯗꯨ ꯑꯣꯇꯣꯞꯂꯦ ꯇꯧꯏ꯫
`wrap`	ꯕꯨꯂꯦꯅꯒꯤ ꯑꯣꯏꯕꯥ꯫	`true`	ꯀꯦꯔꯣꯁꯤꯜ ꯑꯗꯨ ꯂꯦꯞꯇꯅꯥ ꯁꯥꯏꯀꯜ ꯊꯧꯒꯗ꯭ꯔꯥ ꯅꯠꯠꯔꯒꯥ ꯍꯥꯔꯗ ꯁ꯭ꯇꯣꯞ ꯂꯩꯒꯗ꯭ꯔꯥ ꯍꯥꯌꯕꯗꯨ꯫
`touch`	ꯕꯨꯂꯦꯅꯒꯤ ꯑꯣꯏꯕꯥ꯫	`true`	ꯀꯦꯔꯣꯁꯤꯜ ꯑꯁꯤꯅꯥ ꯇꯆꯁ꯭ꯛꯔꯤꯟ ꯗꯤꯚꯥꯏꯁꯁꯤꯡꯗꯥ ꯂꯦꯞꯇꯅꯥ/ꯔꯥꯏꯠ ꯁ꯭ꯕꯥꯏꯞ ꯏꯟꯇꯔꯦꯛꯁꯅꯁꯤꯡ ꯁꯄꯣꯔꯠ ꯇꯧꯒꯗ꯭ꯔꯥ ꯍꯥꯌꯕꯗꯨ꯫

ꯄꯥꯝꯕꯩꯁꯤꯡ꯫

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

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

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

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

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

ꯊꯧꯑꯪꯡ	ꯋꯥꯔꯣꯜ
`cycle`	ꯀꯦꯔꯣꯁꯤꯜ ꯑꯥꯏꯇꯦꯃꯁꯤꯡꯒꯤ ꯃꯔꯛꯇꯥ ꯂꯦꯃꯍꯧꯔꯤꯕꯥ ꯑꯗꯨꯗꯒꯤ ꯑꯔꯣꯏꯕꯥ ꯐꯥꯑꯣꯕꯥ ꯁꯥꯏꯀꯜ ꯇꯧꯏ꯫
`pause`	ꯑꯥꯏꯇꯦꯃꯁꯤꯡꯒꯤ ꯈꯨꯠꯊꯥꯡꯗꯥ ꯀꯦꯔꯣꯁꯤꯜ ꯑꯁꯤ ꯁꯥꯏꯀꯜ ꯊꯧꯕꯗꯒꯤ ꯊꯤꯡꯏ꯫
`prev`	ꯃꯃꯥꯡꯒꯤ ꯑꯥꯏꯇꯦꯝ ꯑꯗꯨꯗꯥ ꯁꯥꯏꯀꯜ ꯇꯧꯏ꯫ ꯃꯃꯥꯡꯒꯤ ꯑꯥꯏꯇꯦꯝ ꯑꯗꯨ ꯎꯠꯂꯕꯥ ꯃꯇꯨꯡꯗꯥ (ꯈꯨꯗꯝ ꯑꯣꯏꯅꯥ, `slid.bs.carousel`ꯊꯧꯗꯣꯛ ꯑꯗꯨ ꯊꯣꯛꯂꯛꯠꯔꯤꯉꯩꯒꯤ ꯃꯃꯥꯡꯗꯥ) ꯀꯣꯜ ꯇꯧꯔꯤꯕꯥ ꯃꯤꯑꯣꯏ ꯑꯗꯨꯗꯥ ꯍꯜꯂꯀꯏ꯫
`next`	ꯃꯊꯪꯒꯤ ꯑꯥꯏꯇꯦꯝ ꯑꯗꯨꯗꯥ ꯁꯥꯏꯀꯜ ꯇꯧꯏ꯫ ꯃꯊꯪꯒꯤ ꯑꯥꯏꯇꯦꯝ ꯑꯗꯨ ꯎꯠꯂꯕꯥ ꯃꯇꯨꯡꯗꯥ (ꯈꯨꯗꯝ ꯑꯣꯏꯅꯥ, `slid.bs.carousel`ꯊꯧꯗꯣꯛ ꯑꯗꯨ ꯊꯣꯛꯂꯛꯠꯔꯤꯉꯩꯒꯤ ꯃꯃꯥꯡꯗꯥ) ꯀꯣꯜ ꯇꯧꯔꯤꯕꯥ ꯃꯤꯑꯣꯏ ꯑꯗꯨꯗꯥ ꯍꯜꯂꯀꯏ꯫
`nextWhenVisible`	ꯄꯦꯖ ꯑꯗꯨ ꯎꯕꯥ ꯐꯪꯗꯕꯥ ꯅꯠꯠꯔꯒꯥ ꯀꯦꯔꯣꯁꯤꯜ ꯅꯠꯠꯔꯒꯥ ꯃꯁꯤꯒꯤ ꯃꯃꯥ-ꯃꯄꯥ ꯑꯗꯨ ꯎꯕꯥ ꯐꯪꯗꯕꯥ ꯃꯇꯃꯗꯥ ꯀꯦꯔꯣꯁꯤꯜ ꯑꯗꯨ ꯃꯊꯪꯒꯤ ꯃꯐꯃꯗꯥ ꯁꯥꯏꯀꯜ ꯇꯧꯒꯅꯨ꯫ ꯇꯥꯔꯒꯦꯠ ꯑꯥꯏꯇꯦꯝ ꯑꯗ�� ꯎꯠꯂꯕꯥ ꯃꯇꯨꯡꯗꯥ ꯀꯣꯜ ꯇꯧꯔꯤꯕꯥ ꯃꯤꯑꯣꯏ ꯑꯗꯨꯗꯥ ꯍꯜꯂꯀꯏ꯫
`to`	ꯀꯦꯔꯣꯁꯤꯜ ꯑꯗꯨ ꯑꯀꯛꯅꯕꯥ ꯐ꯭ꯔꯦꯝ ꯑꯃꯗꯥ (0ꯗꯥ ꯌꯨꯝꯐꯝ ꯑꯣꯏꯕꯥ, ꯑꯦꯔꯦ ꯑꯃꯒꯥ ꯃꯥꯟꯅꯕꯥ) ꯁꯥꯏꯀꯜ ꯇꯧꯏ꯫ ꯇꯥꯔꯒꯦꯠ ꯑꯥꯏꯇꯦꯝ ꯑꯗꯨ ꯎꯠꯂꯕꯥ ꯃꯇꯨꯡꯗꯥ (ꯈꯨꯗꯝ ꯑꯣꯏꯅꯥ, `slid.bs.carousel`ꯊꯧꯗꯣꯛ ꯑꯗꯨ ꯊꯣꯛꯂꯛꯠꯔꯤꯉꯩꯒꯤ ꯃꯃꯥꯡꯗꯥ) ꯀꯣꯂꯔ ꯑꯗꯨꯗꯥ ꯍꯜꯂꯀꯏ꯫
`dispose`	ꯑꯦꯂꯤꯃꯦꯟꯇ ꯑꯃꯒꯤ ꯀꯦꯔꯣꯁꯤꯜ ꯃꯥꯡꯍꯜꯂꯤ꯫ (ꯗꯤ.ꯑꯣ.ꯑꯦꯝ.ꯒꯤ ꯑꯦꯂꯤꯃꯦꯟꯇꯇꯥ ꯊꯝꯂꯤꯕꯥ ꯗꯦꯇꯥ ꯑꯗꯨ ꯂꯧꯊꯣꯀꯏ)
`getInstance`	DOM ꯑꯦꯂꯤꯃꯦꯟꯇ ꯑꯃꯒꯥ ꯃꯔꯤ ꯂꯩꯅꯕꯥ ꯀꯦꯔꯣꯁꯤꯜ ꯏꯟꯁꯇꯦꯟꯁ ꯑꯗꯨ ꯐꯪꯍꯅꯕꯥ ꯉꯝꯕꯥ ꯁ꯭ꯇꯦꯇꯤꯛ ꯃꯦꯊꯗ, ꯅꯍꯥꯛꯅꯥ ꯃꯁꯤ ꯑꯁꯤꯒꯨꯝꯅꯥ ꯁꯤꯖꯤꯟꯅꯕꯥ ꯌꯥꯏ:`bootstrap.Carousel.getInstance(element)`
`getOrCreateInstance`	DOM ꯑꯦꯂꯤꯃꯦꯟꯇ ꯑꯃꯒꯥ ꯃꯔꯤ ꯂꯩꯅꯕꯥ ꯀꯦꯔꯣꯁꯤꯜ ꯏꯟꯁꯇꯦꯟꯁ ꯑꯃꯥ ꯔꯤꯇꯔꯟ ꯇꯧꯕꯥ ꯅꯠꯠꯔꯒꯥ ꯃꯁꯤ ꯏꯅꯤꯁꯤꯑꯦꯂꯥꯏꯖ ꯇꯧꯗꯕꯥ ꯃꯇꯃꯗꯥ ꯑꯅꯧꯕꯥ ꯑꯃꯥ ꯁꯦꯝꯕꯥ ꯁ꯭ꯇꯦꯇꯤꯛ ꯃꯦꯊꯗ꯫ ꯅꯍꯥꯛꯅꯥ ꯃꯁꯤ ꯃꯈꯥꯒꯤ ꯑꯁꯤꯒꯨꯝꯅꯥ ꯁꯤꯖꯤꯟꯅꯕꯥ ꯌꯥꯏ:`bootstrap.Carousel.getOrCreateInstance(element)`

ꯊꯧꯔꯃꯁꯤꯡ꯫

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

direction: ꯀꯦꯔꯣꯁꯤꯜ ꯑꯗꯨꯅꯥ ꯁ꯭ꯂꯥꯏꯗ ꯇꯧꯔꯤꯕꯥ ꯃꯥꯌꯀꯩ ꯑꯗꯨ (ꯅꯠꯔꯒꯥ "left"ꯅꯠꯠꯔꯒꯥ "right")꯫
relatedTarget: ꯑꯦꯛꯇꯤꯕ ꯑꯥꯏꯇꯦꯝ ꯑꯣꯏꯅꯥ ꯃꯐꯝ ꯑꯗꯨꯗꯥ ꯁ꯭ꯂꯥꯏꯗ ꯇꯧꯔꯤꯕꯥ ꯗꯤ.ꯑꯣ.ꯑꯦꯝ.
from: ꯍꯧꯖꯤꯛ ꯂꯩꯔꯤꯕꯥ ꯑꯥꯏꯇꯦꯝ ꯑꯁꯤꯒꯤ ꯏꯟꯗꯦꯛꯁ꯫
to: ꯃꯊꯪꯒꯤ ꯑꯥꯏꯇꯦꯃꯒꯤ ꯏꯟꯗꯦꯛꯁ꯫

ꯀꯦꯔꯣꯁꯤꯜ ꯊꯧꯗꯣꯛ ꯄꯨꯝꯅꯃꯛ ꯀꯦꯔꯣꯁꯤꯜ ꯃꯁꯥꯃꯛꯇꯗꯥ (ꯑꯔꯕꯥꯟ <div class="carousel">) ꯐꯥꯏꯔ ꯇꯧꯏ꯫

ꯏꯚꯦꯟꯇ ꯃꯈꯜ꯫	ꯋꯥꯔꯣꯜ
`slide.bs.carousel`	`slide`ꯏꯟꯁꯇꯦꯟꯁ ꯃꯦꯊꯗ ꯑꯗꯨ ꯏꯅꯚꯣꯛ ꯇꯧꯕꯥ ꯃꯇꯃꯗꯥ ꯈꯨꯗꯛꯇꯥ ꯐꯥꯏꯔ ꯇꯧꯏ꯫
`slid.bs.carousel`	ꯀꯦꯔꯣꯁꯤꯜ ꯑꯗꯨꯅꯥ ꯃꯁꯥꯒꯤ ꯁ꯭ꯂꯥꯏꯗ ꯇ꯭ꯔꯥꯟꯁꯤꯁꯟ ꯑꯗꯨ ꯂꯣꯌꯔꯕꯥ ꯃꯇꯨꯡꯗꯥ ꯐꯥꯏꯔ ꯇꯧꯈꯤ꯫

var myCarousel = document.getElementById('myCarousel')

myCarousel.addEventListener('slide.bs.carousel', function () {
  // do something...
})

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

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

ꯈꯨꯗꯝ

ꯁ꯭ꯂꯥꯏꯗꯁꯤꯡ ꯈꯛꯇꯃꯛ꯫

ꯀꯟꯠꯔꯣꯂꯁꯤꯡꯒꯥ ꯂꯣꯌꯅꯅꯥ꯫

ꯏꯟꯗꯤꯀꯦꯇꯔꯁꯤꯡꯒꯥ ꯂꯣꯌꯅꯅꯥ꯫

ꯀꯦꯄꯁꯅꯁꯤꯡꯒꯥ ꯂꯣꯌꯅꯅꯥ꯫

ꯑꯍꯥꯅꯕꯥ ꯁ꯭ꯂꯥꯏꯗ ꯂꯦꯕꯦꯜ꯫

ꯑꯅꯤꯁꯨꯕꯥ ꯁ꯭ꯂꯥꯏꯗ ꯂꯦꯕꯦꯜ꯫

ꯑꯍꯨꯃꯁꯨꯕꯥ ꯁ꯭ꯂꯥꯏꯗ ꯂꯦꯕꯦꯜ꯫

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

ꯃꯤꯑꯣꯏ ꯑꯃꯒꯤ .carousel-itemꯏꯟꯇꯔꯚꯜ꯫

ꯇꯆ ꯁꯨꯏꯄꯤꯡ ꯗꯤꯁꯦꯕꯜ ꯇꯧꯔꯣ꯫

ꯗꯥꯔꯛ ꯚꯦꯔꯤꯑꯦꯟꯇ꯫

ꯑꯍꯥꯅꯕꯥ ꯁ꯭ꯂꯥꯏꯗ ꯂꯦꯕꯦꯜ꯫

ꯑꯅꯤꯁꯨꯕꯥ ꯁ꯭ꯂꯥꯏꯗ ꯂꯦꯕꯦꯜ꯫

ꯑꯍꯨꯃꯁꯨꯕꯥ ꯁ꯭ꯂꯥꯏꯗ ꯂꯦꯕꯦꯜ꯫

ꯀꯁ꯭ꯇꯝ ꯇ꯭ꯔꯥꯟꯁꯤꯁꯟ ꯇꯧꯕꯥ꯫

ꯁꯥꯁꯁ ꯇꯧꯕꯥ꯫

ꯚꯦꯔꯤꯑꯦꯕꯂꯁꯤꯡ꯫

ꯁꯤꯖꯤꯟꯅꯕꯥ꯫

ꯗꯦꯇꯥ ꯑꯦꯠꯔꯤꯕꯤꯎꯇꯁꯤꯡꯒꯤ ꯈꯨꯠꯊꯥꯡꯗꯥ꯫

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

ꯑꯣꯄꯁꯅꯁꯤꯡ ꯂꯩ꯫

ꯄꯥꯝꯕꯩꯁꯤꯡ꯫

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

ꯊꯧꯔꯃꯁꯤꯡ꯫

ꯃꯤꯑꯣꯏ ꯑꯃꯒꯤ `.carousel-item`ꯏꯟꯇꯔꯚꯜ꯫