ꯀꯦꯔꯣꯁꯤꯜ ꯇꯧꯕꯥ꯫
ꯑꯦꯂꯤꯃꯦꯟꯇꯁꯤꯡꯒꯤ ꯈꯨꯠꯊꯥꯡꯗꯥ ꯁꯥꯏꯀꯜ ꯇꯧꯅꯕꯒꯤꯗꯃꯛ ꯁ꯭ꯂꯥꯏꯗꯁꯣ ꯀꯝꯄꯣꯅꯦꯟꯇ ꯑꯃꯥ-ꯏꯃꯦꯖꯁꯤꯡ ꯅꯠꯠꯔꯒꯥ ꯇꯦꯛꯁꯇꯀꯤ ꯁ꯭ꯂꯥꯏꯗꯁꯤꯡ-ꯀꯦꯔꯣꯁꯦꯂꯒꯨꯝꯕꯥ꯫
ꯃꯁꯤ ꯀꯔꯝꯅꯥ ꯊꯕꯛ ꯇꯧꯕꯒꯦ꯫
ꯀꯦꯔꯣꯁꯤꯜ ꯑꯁꯤ ꯀꯟꯇꯦꯟꯇꯁꯤꯡꯒꯤ ꯁꯤꯔꯤꯖ ꯑꯃꯒꯤ ꯈꯨꯠꯊꯥꯡꯗꯥ ꯁꯥꯏꯛꯂꯤꯡ ꯇꯧꯅꯕꯒꯤꯗꯃꯛ ꯁ꯭ꯂꯥꯏꯗꯁꯣ ꯑꯃꯅꯤ, ꯃꯁꯤ ꯁꯤ.ꯑꯦꯁ.ꯑꯦꯁ.꯳ꯗꯤ ꯇ꯭ꯔꯥꯟꯁꯐꯣꯔꯃꯁꯤꯡ ꯑꯃꯁꯨꯡ ꯖꯥꯚꯥꯁ꯭ꯛꯔꯤꯞꯇ ꯈꯔꯒꯥ ꯂꯣꯌꯅꯅꯥ ꯁꯦꯃꯈꯤꯕꯅꯤ꯫ ꯃꯁꯤꯅꯥ ꯏꯃꯦꯖꯁꯤꯡ, ꯇꯦꯛꯁꯠ ꯅꯠꯠꯔꯒꯥ ꯀꯁ꯭ꯇꯝ ꯃꯥꯔꯀꯑꯥꯄꯀꯤ ꯁꯤꯔꯤꯖ ꯑꯃꯒꯥ ꯂꯣꯌꯅꯅꯥ ꯊꯕꯛ ꯇꯧꯏ꯫ ꯃꯁꯤꯗꯥ ꯃꯃꯥꯡꯒꯤ/ꯃꯊꯪꯒꯤ ꯀꯟꯠꯔꯣꯂꯁꯤꯡ ꯑꯃꯁꯨꯡ ꯏꯟꯗꯤꯀꯦꯇꯔꯁꯤꯡꯒꯤ ꯁꯄꯣꯔꯇꯁꯨ ꯌꯥꯑꯣꯔꯤ꯫
ꯄꯦꯖ ꯚꯤꯖꯤꯕꯤꯂꯤꯇꯤ 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="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
.
<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
<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
ꯃꯔꯝ ꯑꯗꯨꯅꯥ ꯃꯁꯤꯅꯥ ꯑꯣꯇꯣꯞꯂꯦ ꯇꯧꯗꯦ꯫
<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
.
<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
ꯑꯁꯤ ꯌꯥꯔꯦ , ꯃꯁꯤꯅꯥ ꯃꯁꯤꯒꯤ ꯍꯧꯖꯤꯛ ꯂꯩꯔꯤꯕꯥ ꯄꯣꯖꯤꯁꯟ ꯑꯁꯤꯒꯥ ꯆꯥꯡꯗꯝꯅꯕꯗꯥ ꯁ꯭ꯂꯥꯏꯗꯀꯤ ꯄꯣꯖꯤꯁꯟ ꯑꯗꯨ ꯍꯣꯡꯗꯣꯀꯏ꯫ ꯅꯠꯠꯔꯒꯥ, ꯀꯦꯔꯣꯁꯦꯂꯗꯥ ꯔꯣ ꯁ꯭ꯂꯥꯏꯗ ꯏꯟꯗꯦꯛꯁ ꯑꯃꯥ ꯄꯥꯁ ꯇꯧꯅꯕꯥ ꯁꯤꯖꯤꯟꯅꯧ , ꯃꯁꯤꯅꯥ ꯁ꯭ꯂꯥꯏꯗꯀꯤ ꯄꯣꯖꯤꯁꯟ ꯑꯗꯨ .prev
next
data-bs-slide-to
data-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...
})