ဝိုင်းလေး

စက်ဘီးစီးခြင်းအတွက် စက်ဘီးစီးခြင်းအတွက် စလိုက်ရှိုးအစိတ်အပိုင်း—အဝိုင်းလေးကဲ့သို့ ရုပ်ပုံများ သို့မဟုတ် စာသားဆလိုက်များ—။

ဤစာမျက်နှာတွင်

ဘယ်လိုအလုပ်လုပ်လဲ

အဝိုင်းလေးသည် CSS 3D အသွင်ပြောင်းခြင်းနှင့် JavaScript အနည်းငယ်ဖြင့် တည်ဆောက်ထားသော အကြောင်းအရာများစွာကို စက်ဘီးစီးရန်အတွက် ဆလိုက်ရှိုးတစ်ခုဖြစ်သည်။ ၎င်းသည် ပုံများ၊ စာသားများ သို့မဟုတ် စိတ်ကြိုက် markup အတွဲများဖြင့် အလုပ်လုပ်ပါသည်။ ၎င်းတွင် ယခင်/နောက်တစ်ခု ထိန်းချုပ်မှုများနှင့် ညွှန်ကိန်းများအတွက် ပံ့ပိုးမှုလည်း ပါဝင်သည်။

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။ ၎င်းတို့ကို ရွေးချယ်နိုင်သော display utilities များ ဖြင့် အောက်ဖော်ပြပါအတိုင်း သေးငယ်သော viewport များတွင် အလွယ်တကူ ဝှက်ထားနိုင်ပါသည် ။ ကျွန်ုပ်တို့သည် ၎င်းတို့ကို အစပိုင်းတွင် ဝှက်ထားပြီး .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>

တစ်ဦးချင်း `.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-rideattribute မပါဝင်သောကြောင့် ၎င်းသည် အလိုအလျောက်ဖွင့်ခြင်းမပြုပါ။

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ထိန်းချုပ်မှုများကို ၎င်းတို့၏မူလအဖြူရောင်ဖြည့်စွက်မှုမှ filterCSS ပိုင်ဆိုင်မှုကို ပြောင်းပြန်လှန်ထားသည်။ စာတန်းများနှင့် ထိန်းချုပ်မှုများတွင် 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>

စိတ်ကြိုက်အကူးအပြောင်း

သင်စုစည်းထားသော CSS ကိုအသုံးပြုနေပါက မစုစည်းမီ သို့မဟုတ် စိတ်ကြိုက်စတိုင်များကို မစုစည်းမီ Sass ကိန်းရှင် ဖြင့် ပြောင်းလဲနိုင်သော ကြာချိန်ကို .carousel-itemပြောင်းလဲနိုင်သည် ။ $carousel-transition-durationအသွင်ကူးပြောင်းမှုများစွာကို အသုံးချပါက၊ အသွင်ပြောင်းသည့်အကူးအပြောင်းကို ဦးစွာသတ်မှတ်ကြောင်း သေချာပါစေ။ (ဥပမာ 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);

အသုံးပြုမှု

ဒေတာဂုဏ်တော်များမှတဆင့်

အဝိုင်းလေး၏ တည်နေရာကို အလွယ်တကူ ထိန်းချုပ်နိုင်ရန် ဒေတာ attribute များကို သုံးပါ။ data-bs-slideသော့ချက်စကားလုံးများကို လက်ခံသည် prevသို့မဟုတ် next၎င်း၏လက်ရှိအနေအထားနှင့် သက်ဆိုင်သော slide အနေအထားကို ပြောင်းလဲပေးသည်။ တနည်းအားဖြင့်၊ data-bs-slide-toအကြမ်းဖျင်းဆလိုက်အညွှန်းကို အဝိုင်းလေးသို့ ဖြတ်ရန် data-bs-slide-to="2"၊ ဆလိုက်အနေအထားမှအစရှိသည့် သီးခြားအညွှန်းတစ်ခုသို့ ပြောင်းပေးသည့် အဝိုင်းလေးဆီသို့ အသုံးပြုပါ 0။

စာမျက်နှာအား စတင်ချိန်မှ စတင်ကာ လှုပ်ရှားသက်ဝင်နေသော အ data-bs-ride="carousel"ဝိုင်းလေးအဖြစ် အမှတ်အသားပြုရန် ရည်ညွှန်းချက်ကို အသုံးပြုသည်။ သင့်အဝိုင်းလေးကို အစပြုရန် အသုံးမပြုပါက data-bs-ride="carousel"၊ ၎င်းကို သင်ကိုယ်တိုင် စတင်လုပ်ဆောင်ရပါမည်။ တူညီသောအဝိုင်းလေး၏ ရှင်းလင်းပြတ်သားသော JavaScript အစပြုခြင်း (မလိုအပ်သောနှင့် မလိုအပ်ဘဲ) ပေါင်းစပ်အသုံးပြု၍မရပါ။

JavaScript မှတဆင့်

အဝိုင်းလေးအား ကိုယ်တိုင်ခေါ်ဆိုပါ-

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

ရွေးချယ်စရာများ

ရွေးချယ်မှုများကို ဒေတာ attributes သို့မဟုတ် JavaScript မှတဆင့် ကျော်ဖြတ်နိုင်သောကြောင့်၊ သင်သည် ရွေးချယ်မှုအမည်တစ်ခုအား ထည့်သွင်း data-bs-နိုင်သည် data-bs-animation="{value}"။ ဒေတာ attribute များမှတစ်ဆင့် ရွေးချယ်မှုများကို ဖြတ်သန်းသည့်အခါ “ camelCase ” မှ “ kebab-case ” သို့ ရွေးချယ်မှုအမည်၏ case အမျိုးအစားကို ပြောင်းလဲရန် သေချာပါစေ ။ ဥပမာအားဖြင့်၊ data-bs-custom-class="beautifier"အစားကို သုံးပါ data-bs-customClass="beautifier"။

Bootstrap 5.2.0 အရ၊ အစိတ်အပိုင်းအားလုံးသည် JSON စာကြောင်းကဲ့သို့ ရိုးရှင်းသော အစိတ်အပိုင်းဖွဲ့စည်းမှုပုံစံကို ထားရှိပေးနိုင်သည့် စမ်းသပ် လက်ဝယ်ထားသော ဒေတာ attribute ကို ပံ့ပိုးပေးပါသည်။ data-bs-configဒြပ်စင်တစ်ခုတွင် ရည်ညွှန်းချက်ပါရှိသည့်အခါ ၊ နောက်ဆုံး တန်ဖိုးသည် ဖြစ်မည်ဖြစ်ပြီး သီးခြားဒေ data-bs-config='{"delay":0, "title":123}'တာ attribute များသည် ပေးထားသောတန်ဖိုးများကို အစားထိုးမည်ဖြစ်သည် ။ ထို့အပြင်၊ ရှိပြီးသားဒေတာ attribute များသည် JSON တန်ဖိုးများကဲ့သို့ နေရာယူနိုင်သည် ။data-bs-title="456"title456data-bs-configdata-bs-delay='{"show":0,"hide":150}'

နာမည်	ရိုက်ပါ။	ပုံသေ	ဖော်ပြချက်
`interval`	နံပါတ်	`5000`	ပစ္စည်းတစ်ခု အလိုအလျောက် စက်ဘီးစီးခြင်းကြားတွင် နှောင့်နှေးရမည့် အချိန်ပမာဏ။
`keyboard`	ဘူလီယံ	`true`	အဝိုင်းလေးသည် ကီးဘုတ်ဖြစ်ရပ်များကို တုံ့ပြန်သင့်သလား။
`pause`	string, boolean	`"hover"`	သတ်မှတ်ထားပါက `"hover"`၊ စက်ဘီးဝိုင်းလေး၏ စက်ဘီးစီးခြင်းကို ခေတ္တရပ်ပြီး စက်ဘီးဝိုင်းလေးတွင် `mouseenter`စက်ဘီးစီးခြင်းကို ပြန်လည်စတင်ပါ `mouseleave`။ သတ်မှတ်ထားပါက `false`၊ အဝိုင်းလေးပေါ်တွင် ပျံဝဲနေပါက ၎င်းကို ရပ်မည်မဟုတ်ပါ။ ထိတွေ့အသုံးပြုနိုင်သည့် စက်များတွင်၊ အလိုအလျောက်ပြန်မစမီ နှစ်ပိုင်းခြားပြီး `"hover"`စက်ဘီးစီးခြင်းအား (အသုံးပြုသူသည် စက်ဝိုင်းနှင့် အပြန်အလှန်တုံ့ပြန်မှုပြီးသည်နှင့်) တွင် ခေတ္တရပ်ပါမည် ။ `touchend`ဒါက mouse ရဲ့အပြုအမူအပြင်။
`ride`	string, boolean	`false`	သတ်မှတ်ထားပါက `true`၊ အသုံးပြုသူသည် ပထမအရာအား ကိုယ်တိုင်လည်ပတ်ပြီးနောက် အဝိုင်းလေးအား အလိုအလျောက်ဖွင့်သည်။ သတ်မှတ်ထားပါက `"carousel"`၊ ဝိုင်းလေးအား Load တွင် အလိုအလျောက်ဖွင့်သည်။
`touch`	ဘူလီယံ	`true`	အဝိုင်းလေးသည် ထိတွေ့မျက်နှာပြင် စက်ပစ္စည်းများတွင် ဘယ်/ညာ ပွတ်ဆွဲခြင်းဖြင့် အပြန်အလှန်တုံ့ပြန်မှုများကို ပံ့ပိုးပေးနိုင်မလား။
`wrap`	ဘူလီယံ	`true`	ဝိုင်းလေးသည် အဆက်မပြတ် လည်ပတ်သင့်သည်ဖြစ်စေ သို့မဟုတ် ရပ်တန့်ရန်ခက်ခဲသည်ဖြစ်စေ။

နည်းလမ်းများ

Asynchronous နည်းလမ်းများနှင့် အသွင်ကူးပြောင်းမှုများ

API နည်းလမ်းအားလုံးသည် အ ညီအမျှ ဖြစ်ပြီး အသွင်ကူးပြောင်းမှု ကို စတင်သည် ။ အကူးအပြောင်းစတင်သည်နှင့် မပြီးဆုံးမီတွင် ၎င်းတို့သည် ခေါ်ဆိုသူထံသို့ ပြန်သွားကြသည် ။ ထို့အပြင်၊ transitioning component တစ်ခုပေါ်ရှိ method ခေါ်ဆိုမှုကို လျစ်လျူရှု ပါမည်။

နောက်ထပ်အချက်အလက်များအတွက် ကျွန်ုပ်တို့၏ JavaScript စာရွက်စာတမ်းကို ကြည့်ပါ ။

ဥပမာအားဖြင့်၊ သင်သည် နောက်ထပ်ရွေးချယ်စရာများဖြင့် အစပြု၍ အရာများမှတစ်ဆင့် စက်ဘီးစီးခြင်းကို စတင်ရန် ဥပမာအားဖြင့်၊

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

နည်းလမ်း	ဖော်ပြချက်
`cycle`	ဘယ်မှညာမှ အရာများ အဝိုင်းလေးကို ဖြတ်သန်းပါ။
`dispose`	ဒြပ်စင်တစ်ခု၏ အဝိုင်းကို ဖျက်သည်။ (DOM ဒြပ်စင်ပေါ်ရှိ သိမ်းဆည်းထားသည့် ဒေတာကို ဖယ်ရှားသည်)
`getInstance`	DOM ဒြပ်စင်တစ်ခုနှင့် ဆက်စပ်နေသော အဝိုင်းလေးအား သင်ရနိုင်စေမည့် Static method ၊ သင်သည် ၎င်းကို ဤကဲ့သို့ အသုံးပြုနိုင်သည် `bootstrap.Carousel.getInstance(element)`။
`getOrCreateInstance`	DOM ဒြပ်စင်တစ်ခုနှင့်ဆက်စပ်နေသော အဝိုင်းလေးအား ပြန်ပေးသည့် သို့မဟုတ် အစပျိုးမလုပ်��ောင်ပါက အသစ်ဖန်တီးသည့် ပုံသေနည်းလမ်း။ သင်ဤကဲ့သို့အသုံးပြုနိုင်သည် `bootstrap.Carousel.getOrCreateInstance(element)`။
`next`	သံသရာလည်ရမယ့်အရာ။ နောက်အကြောင်းအရာကို မပြသမီ ခေါ်ဆိုသူထံ ပြန်လည်ရောက်ရှိသည် (ဥပမာ၊ `slid.bs.carousel`ဖြစ်ရပ်မဖြစ်ပေါ်မီ)။
`nextWhenVisible`	စာမျက်နှာကို မမြင်ရသောအခါ သို့မဟုတ် အဝိုင်းလေး သို့မဟုတ် ၎င်း၏မိဘကို မမြင်နိုင်သောအခါတွင် အဝိုင်းလေးအား နောက်သို့ မလှည့်ပါနှင့်။ ပစ်မှတ်ကို မပြမီ ခေါ်ဆိုသူထံ ပြန်သွားပါ ။
`pause`	စက်ဘီးဝိုင်းလေးအား အရာများမှတဆင့် စက်ဘီးစီးခြင်းမှ ရပ်တန့်စေပါသည်။
`prev`	ယခင်အကုသိုလ်ကံမှ သံသရာ။ ယခင်အကြောင်းအရာကို မပြသမီ ခေါ်ဆိုသူထံ ပြန်လည်ရောက်ရှိသည် (ဥပမာ၊ `slid.bs.carousel`ပွဲမဖြစ်ပွားမီ)။
`to`	အဝိုင်းကို ဘောင်တစ်ခု (၀က်အခြေခံ၊ အခင်းအကျင်းတစ်ခုနှင့် ဆင်တူသည်) သို့ လည်ပတ်သည်။ ပစ်မှတ်ကို မပြမီ ခေါ်ဆိုသူထံ ပြန်သွားသည် (ဥပမာ၊ `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...
})

ဝိုင်းလေး

ဘယ်လိုအလုပ်လုပ်လဲ

ဥပမာ

ဆလိုက်များသာ

ထိန်းချုပ်မှုများနှင့်အတူ

ညွှန်ကိန်းများနှင့်အတူ

စာတန်းများဖြင့်

ပထမဆလိုက်တံဆိပ်

ဒုတိယဆလိုက်တံဆိပ်

တတိယဆလိုက်တံဆိပ်

ကြက်ခြေခတ်

တစ်ဦးချင်း .carousel-itemကြားကာလ

ထိတွေ့ပွတ်ဆွဲခြင်းကို ပိတ်ပါ။

အမှောင်မူကွဲ

ပထမဆလိုက်တံဆိပ်

ဒုတိယဆလိုက်တံဆိပ်

တတိယဆလိုက်တံဆိပ်

စိတ်ကြိုက်အကူးအပြောင်း

ဆူး

ကိန်းရှင်များ

အသုံးပြုမှု

ဒေတာဂုဏ်တော်များမှတဆင့်

JavaScript မှတဆင့်

ရွေးချယ်စရာများ

နည်းလမ်းများ

Asynchronous နည်းလမ်းများနှင့် အသွင်ကူးပြောင်းမှုများ

အဲ့ဒါနဲ့

တစ်ဦးချင်း `.carousel-item`ကြားကာလ