in English

ဝိုင်းလေး

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

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

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

Page Visibility API ကို ပံ့ပိုးပေးထား သည့် ဘရောက်ဆာများတွင် ဝဘ်စာမျက်နှာကို အသုံးပြုသူမှ မမြင်နိုင်သောအခါ (ဥပမာ ဘရောင်ဇာတက်ဘ်ကို အသုံးပြုခြင်းမရှိသည့်အခါ၊ ဘရောင်ဇာဝင်းဒိုးကို အနိမ့်ဆုံးဖြစ်စေခြင်း စသည်ဖြင့်) လှည့်ပတ်မှုကို ရှောင်ရှားပါမည်။

ဤအစိတ်အပိုင်း၏ ကာတွန်းအကျိုးသက်ရောက်မှုသည် prefers-reduced-motionမီဒီယာမေးမြန်းမှုအပေါ် မူတည်ပါသည်။ ကျွန်ုပ်တို့၏ဝင်ရောက်နိုင်မှုမှတ်တမ်း၏ လျှော့ချထားသောရွေ့လျားမှုအပိုင်းကို ကြည့်ပါ ။

အဝိုင်းလေးများကို ပံ့ပိုးမထားကြောင်းနှင့် ဝိုင်းလေးများသည် အများအားဖြင့် အသုံးပြုနိုင်မှုစံနှုန်းများနှင့် မကိုက်ညီကြောင်း ကျေးဇူးပြု၍ သတိပြုပါ။

နောက်ဆုံးအနေနဲ့၊ အကယ်၍ သင်သည် ကျွန်ုပ်တို့၏ JavaScript ကို အရင်းအမြစ်မှ တည်ဆောက်နေပါက၊ ၎င်းသည် လိုအပ်ပါသည်util.js ။

ဥပမာ

ချားရဟတ်များသည် ဆလိုက်အတိုင်းအတာများကို အလိုအလျောက် ပုံမှန်ဖြစ်အောင် မလုပ်ပါ။ ထို့ကြောင့်၊ အကြောင်းအရာကို သင့်လျော်စွာ အရွယ်အစားအတွက် အပိုအသုံးအဆောင်များ သို့မဟုတ် စိတ်ကြိုက်စတိုင်များကို အသုံးပြုရန် လိုအပ်နိုင်သည်။ အဝိုင်းလေးများသည် ယခင်/နောက်တစ်ခု ထိန်းချုပ်မှုများနှင့် အညွှန်းများကို ပံ့ပိုးပေးသော်လည်း ၎င်းတို့ကို အထူးတလည် မလိုအပ်ပါ။ စိတ်ကြိုက်ထည့်၍ စိတ်ကြိုက်ပြင်ဆင်ပါ။

အတန်းအား ဆ .activeလိုက်များထဲမှ တစ်ခုသို့ ပေါင်းထည့်ရန် လိုအပ်သည် မဟုတ်ပါက အဝိုင်းလေးအား မြင်နိုင်မည် မဟုတ်ပါ။ အထူးသဖြင့် သင်သည် စာမျက်နှာတစ်ခုတည်းတွင် အဝိုင်းအများအပြားကို အသုံးပြုနေပါက ရွေးချယ်နိုင်သော ထိန်းချုပ်မှုများအတွက် idထူးခြားသော အချက်ကို သတ်မှတ်ရန် သေချာ ပါစေ။ .carouselထိန်းချုပ်မှုနှင့် ညွှန်ပြသည့်ဒြပ်စင်များသည် ဒြပ်စင်၏ ကိုက်ညီသော ရည်ညွှန်း data-targetချက် (သို့မဟုတ် hrefလင့်ခ်များအတွက်) ရှိရပါမည် ။id.carousel

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

ဤနေရာတွင် ဆလိုက်များဖြင့်သာ အဝိုင်းလေးဖြစ်သည်။ ဘရောက်ဆာ၏ ပုံသေပုံချိန်ညှိခြင်းကို တားဆီးရန် ဘရောက်ဆာ၏ ပုံသေပုံချိန်ညှိမှုကို တားဆီးရန် အဝိုင်းလေးပုံများ .d-blockနှင့် အဝိုင်းပုံများ ရှိနေကြောင်း သတိပြုပါ ။.w-100

<div id="carouselExampleSlidesOnly" class="carousel slide" data-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-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-target="#carouselExampleControls" data-slide="prev">
    <span class="carousel-control-prev-icon" aria-hidden="true"></span>
    <span class="sr-only">Previous</span>
  </button>
  <button class="carousel-control-next" type="button" data-target="#carouselExampleControls" data-slide="next">
    <span class="carousel-control-next-icon" aria-hidden="true"></span>
    <span class="sr-only">Next</span>
  </button>
</div>

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

ထိန်းချုပ်မှုများနှင့်အတူ အဝိုင်းလေးသို့ ညွှန်ကိန်းများကို ပေါင်းထည့်နိုင်သည်။

<div id="carouselExampleIndicators" class="carousel slide" data-ride="carousel">
  <ol class="carousel-indicators">
    <li data-target="#carouselExampleIndicators" data-slide-to="0" class="active"></li>
    <li data-target="#carouselExampleIndicators" data-slide-to="1"></li>
    <li data-target="#carouselExampleIndicators" data-slide-to="2"></li>
  </ol>
  <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-target="#carouselExampleIndicators" data-slide="prev">
    <span class="carousel-control-prev-icon" aria-hidden="true"></span>
    <span class="sr-only">Previous</span>
  </button>
  <button class="carousel-control-next" type="button" data-target="#carouselExampleIndicators" data-slide="next">
    <span class="carousel-control-next-icon" aria-hidden="true"></span>
    <span class="sr-only">Next</span>
  </button>
</div>

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

.carousel-captionမည်သည့်အ ရာအတွင်းမှ အစိတ်အပိုင်းများ ဖြင့် သင့်ဆလိုက်များတွင် စာတန်းများ အလွယ်တကူထည့်ပါ .carousel-item။ ၎င်းတို့ကို ရွေးချယ်နိုင်သော display utilities များ ဖြင့် အောက်ဖော်ပြပါအတိုင်း သေးငယ်သော viewport များတွင် အလွယ်တကူ ဝှက်ထားနိုင်ပါသည် ။ ကျွန်ုပ်တို့သည် ၎င်းတို့ကို အစပိုင်းတွင် ဝှက်ထားပြီး .d-none၎င်းတို့ကို အလယ်အလတ်တန်းစား စက်ပစ္စည်းများဖြင့် ပြန်လည်ယူဆောင်လာပါသည် .d-md-block။

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

ပထမဆလိုက်အတွက် ကိုယ်စားလှယ်နေရာပေးသူ အကြောင်းအရာအချို့။

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

ဒုတိယဆလိုက်အတွက် ကိုယ်စားလှယ်နေရာပေးသူ အကြောင်းအရာအချို့။

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

တတိယဆလိုက်အတွက် ကိုယ်စားလှယ်နေရာပေးသူ အကြောင်းအရာအချို့။

<div id="carouselExampleCaptions" class="carousel slide" data-ride="carousel">
  <ol class="carousel-indicators">
    <li data-target="#carouselExampleCaptions" data-slide-to="0" class="active"></li>
    <li data-target="#carouselExampleCaptions" data-slide-to="1"></li>
    <li data-target="#carouselExampleCaptions" data-slide-to="2"></li>
  </ol>
  <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-target="#carouselExampleCaptions" data-slide="prev">
    <span class="carousel-control-prev-icon" aria-hidden="true"></span>
    <span class="sr-only">Previous</span>
  </button>
  <button class="carousel-control-next" type="button" data-target="#carouselExampleCaptions" data-slide="next">
    <span class="carousel-control-next-icon" aria-hidden="true"></span>
    <span class="sr-only">Next</span>
  </button>
</div>

ကြက်ခြေခတ်

.carousel-fadeဆလိုက်အစား မှိန်သောအကူးအပြောင်းဖြင့် သက်ဝင်လှုပ်ရှားနေသော ဆလိုက်များဆီသို့ သင့်အဝိုင်းလေး ထဲသို့ ပေါင်းထည့်ပါ ။ သင့်အဝိုင်းလေး၏ အကြောင်းအရာပေါ် မူတည်၍ (ဥပမာ၊ စာသားသပ်သပ် ဆလိုက်များ) ကို သင့်လျော်စွာ ဖြတ်ကျော်ရန်အတွက် s .bg-bodyသို့ စိတ်ကြိုက် CSS အချို့ကို ထည့်လိုပေမည်။.carousel-item

<div id="carouselExampleFade" class="carousel slide carousel-fade" data-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-target="#carouselExampleFade" data-slide="prev">
    <span class="carousel-control-prev-icon" aria-hidden="true"></span>
    <span class="sr-only">Previous</span>
  </button>
  <button class="carousel-control-next" type="button" data-target="#carouselExampleFade" data-slide="next">
    <span class="carousel-control-next-icon" aria-hidden="true"></span>
    <span class="sr-only">Next</span>
  </button>
</div>

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

အလိုအလျောက် စက်ဘီးစီးခြင်းကြားတွင် ကြန့်ကြာရန် အချိန်ပမာဏကို ပြောင်းရန် data-interval=""a သို့ ထည့်ပါ ။.carousel-item

<div id="carouselExampleInterval" class="carousel slide" data-ride="carousel">
  <div class="carousel-inner">
    <div class="carousel-item active" data-interval="10000">
      <img src="..." class="d-block w-100" alt="...">
    </div>
    <div class="carousel-item" data-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-target="#carouselExampleInterval" data-slide="prev">
    <span class="carousel-control-prev-icon" aria-hidden="true"></span>
    <span class="sr-only">Previous</span>
  </button>
  <button class="carousel-control-next" type="button" data-target="#carouselExampleInterval" data-slide="next">
    <span class="carousel-control-next-icon" aria-hidden="true"></span>
    <span class="sr-only">Next</span>
  </button>
</div>

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

ဆလိုက်များကြား ရွှေ့ရန် ခလုတ်များကြား ရွှေ့ရန် ထိတွေ့စခရင် ကိရိယာများပေါ်တွင် ဘယ်/ညာ ပွတ်ဆွဲခြင်းကို ဝိုင်းရံထားသည်။ data-touchရည်ညွှန်း ချက်ကို အသုံးပြု၍ ၎င်းကို ပိတ်နိုင်သည် ။ အောက်ဖော်ပြပါဥပမာတွင် data-rideattribute မပါဝင်သော data-interval="false"ကြောင့် ၎င်းသည် အလိုအလျောက်မကစားရပါ။

<div id="carouselExampleControlsNoTouching" class="carousel slide" data-touch="false" data-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-target="#carouselExampleControlsNoTouching" data-slide="prev">
    <span class="carousel-control-prev-icon" aria-hidden="true"></span>
    <span class="sr-only">Previous</span>
  </button>
  <button class="carousel-control-next" type="button" data-target="#carouselExampleControlsNoTouching" data-slide="next">
    <span class="carousel-control-next-icon" aria-hidden="true"></span>
    <span class="sr-only">Next</span>
  </button>
</div>

အသုံးပြုမှု

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

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

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

JavaScript မှတဆင့်

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

$('.carousel').carousel()

ရွေးချယ်မှုများ

ရွေးချယ်စရာများကို data attributes သို့မဟုတ် JavaScript မှတဆင့်ဖြတ်သန်းနိုင်သည်။ data-ဒေတာရည်ညွှန်းချက်များအတွက် ၊ တွင်ပါရှိသည့်အတိုင်း ရွေးချယ်စရာအမည်ကို ပေါင်းထည့် ပါ data-interval=""။

နာမည်	ရိုက်ပါ။	ပုံသေ	ဖော်ပြချက်
ကြားကာလ	နံပါတ်	၅၀၀၀	ပစ္စည်းတစ်ခု အလိုအလျောက် စက်ဘီးစီးခြင်းကြားတွင် နှောင့်နှေးရမည့် အချိန်ပမာဏ။ အကယ်၍ `false`ဝိုင်းလေးသည် အလိုအလျောက် လည်ပတ်နေမည်မဟုတ်ပါ။
ကီးဘုတ်	ဘူလီယံ	မှန်ပါတယ်။	အဝိုင်းလေးသည် ကီးဘုတ်ဖြစ်ရပ်များကို တုံ့ပြန်သင့်သလား။
ခေတ္တရပ်ပါ။	string \| ဘူလီယံ	'ပျံဝဲ'	သတ်မှတ်ထားပါက `'hover'`၊ စက်ဘီးဝိုင်းလေး၏ စက်ဘီးစီးခြင်းကို ခေတ္တရပ်ပြီး စက်ဘီးဝိုင်းလေးတွင် `mouseenter`စက်ဘီးစီးခြင်းကို ပြန်လည်စတင်ပါ `mouseleave`။ သတ်မှတ်ထားပါက `false`၊ အဝိုင်းလေးပေါ်တွင် ပျံဝဲနေပါက ၎င်းကို ရပ်မည်မဟုတ်ပါ။ ထိတွေ့အသုံးပြုနိုင်သည့် စက်များတွင်၊ အလိုအလျောက်ပြန်မစမီ နှစ်ပိုင်းခြားပြီး `'hover'`စက်ဘီးစီးခြင်းအား (အသုံးပြုသူသည် စက်ဝိုင်းနှင့် အပြန်အလှန်တုံ့ပြန်မှုပြီးသည်နှင့်) တွင် ခေတ္တရပ်ပါမည် ။ `touchend`၎င်းသည် အထက်ဖော်ပြပါ မောက်စ်အပြုအမူအပြင် သတိပြုပါ။
စီး	ကြိုးတစ်ချောင်း	အတုအယောင်	အသုံးပြုသူသည် ပထမအရာအား ကိုယ်တိုင်ပြုလုပ်ပြီးနောက် အဝိုင်းလေးအား အလိုအလျောက်ဖွင့်သည်။ သတ်မှတ်ထားပါက `'carousel'`၊ ဝိုင်းလေးအား Load တွင် အလိုအလျောက်ဖွင့်သည်။
ခြုံ	ဘူလီယံ	မှန်ပါတယ်။	ဝိုင်းလေးသည် အဆက်မပြတ် လည်ပတ်သင့်သည်ဖြစ်စေ သို့မဟုတ် ရပ်တန့်ရန်ခက်ခဲသည်ဖြစ်စေ။
ထိပါ။	ဘူလီယံ	မှန်ပါတယ်။	အဝိုင်းလေးသည် ထိတွေ့မျက်နှာပြင် စက်ပစ္စည်းများတွင် ဘယ်/ညာ ပွတ်ဆွဲခြင်းဖြင့် အပြန်အလှန်တုံ့ပြန်မှုများကို ပံ့ပိုးပေးနိုင်မလား။

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

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

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

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

`.carousel(options)`

စိတ်ကြိုက်ရွေးချယ်စရာတစ်ခုဖြင့် အဝိုင်းလေးကို objectစတင်ပြီး အရာများမှတစ်ဆင့် စက်ဘီးစီးခြင်းကို စတင်သည်။

$('.carousel').carousel({
  interval: 2000
})

`.carousel('cycle')`

ဘယ်မှညာမှ အရာများ အဝိုင်းလေးကို ဖြတ်သန်းပါ။

`.carousel('pause')`

စက်ဘီးဝိုင်းလေးအား အရာများမှတဆင့် စက်ဘီးစီးခြင်းမှ ရပ်တန့်စေပါသည်။

`.carousel(number)`

အဝိုင်းကို ဘောင်တစ်ခု (၀က်အခြေခံ၊ အခင်းအကျင်းတစ်ခုနှင့် ဆင်တူသည်) သို့ လည်ပတ်သည်။ ပစ်မှတ်ကို မပြမီ ခေါ်ဆိုသူထံ ပြန်သွားသည် (ဆိုလိုသည်မှာ slid.bs.carouselပွဲမစမီ)။

`.carousel('prev')`

ယခင်အကုသိုလ်ကံမှ သံသရာ။ ယခင်အရာအား မပြသမီ ခေါ်ဆိုသူထံ ပြန်လည်ရောက်ရှိသည် (ဆိုလိုသည်မှာ slid.bs.carouselပွဲမဖြစ်ပွားမီ)။

`.carousel('next')`

သံသရာလည်ရမယ့်အရာ။ နောက်အကြောင်းအရာကို မပြမီ ခေါ်ဆိုသူထံ ပြန်ပို့သည် (ဆိုလိုသည်မှာ slid.bs.carouselပွဲမစမီ)။

`.carousel('dispose')`

ဒြပ်စင်တစ်ခု၏ အဝိုင်းကို ဖျက်သည်။

`.carousel('nextWhenVisible')`

စာမျက်နှာကို မမြင်ရသောအခါ သို့မဟုတ် အဝိုင်းလေး သို့မဟုတ် ၎င်း၏မိဘကို မမြင်နိုင်သောအခါတွင် အဝိုင်းလေးအား နောက်သို့ မလှည့်ပါနှင့်။ နောက်အကြောင်းအရာကို မပြမီ ခေါ်ဆိုသူထံ ပြန်ပို့သည် (ဆိုလိုသည်မှာ slid.bs.carouselပွဲမစမီ)။

`.carousel('to')`

အဝိုင်းကို ဘောင်တစ်ခု (၀က်အခြေခံ၊ အခင်းအကျင်းတစ်ခုနှင့် ဆင်တူသည်) သို့ လည်ပတ်သည်။ နောက်အကြောင်းအရာကို မပြမီ ခေါ်ဆိုသူထံ ပြန်ပို့သည် (ဆိုလိုသည်မှာ slid.bs.carouselပွဲမစမီ)။

အဲ့ဒါနဲ့

Bootstrap ၏ အဝိုင်းလေးအတန်းသည် အဝိုင်းလေး၏ လုပ်ဆောင်နိုင်စွမ်းကို ချိတ်ဆက်ရန်အတွက် ဖြစ်ရပ်နှစ်ခုကို ဖော်ထုတ်ပေးပါသည်။ ဖြစ်ရပ်နှစ်ခုစလုံးတွင် အောက်ပါ အပိုဂုဏ်သတ္တိများ ရှိသည်။

direction: အဝိုင်းလေး လျှောကျနေသော လမ်းကြောင်း (သော်လည်းကောင်း "left") "right"။
relatedTarget: လက်ရှိအရာအဖြစ် နေရာသို့ လျှောကျနေသော DOM ဒြပ်စင်။
from: လက်ရှိအကြောင်းအရာ၏ အညွှန်း
to: နောက်အကြောင်းအရာ၏ အညွှန်း

အဝိုင်းလေး၏ အဖြစ်အပျက်အားလုံးကို ဝိုင်းလေးကိုယ်တိုင် (ဆိုလိုသည်မှာ <div class="carousel">) တွင် ပစ်ခတ်သည်။

ပွဲအမျိုးအစား	ဖော်ပြချက်
slide.bs.carousel	`slide`သာဓကနည်းလမ်းကို ခေါ်ဆို သောအခါ ဤဖြစ်ရပ်သည် ချက်ချင်း မီးလောင် ပါသည်။
slide.bs.carousel	အဝိုင်းလေးသည် ၎င်း၏လျှောအကူးအပြောင်းကို ပြီးမြောက်သောအခါတွင် ဤအစီအစဉ်ကို အလုပ်ဖြုတ်သည်။

$('#myCarousel').on('slide.bs.carousel', function () {
  // do something...
})

အကူးအပြောင်းကာလကို ပြောင်းပါ။

သင်စုစည်းထားသော CSS ကိုအသုံးပြုနေပါက မစုစည်းမီ သို့မဟုတ် စိတ်ကြိုက်စတိုင်များကို မစုစည်းမီ Sass ကိန်းရှင် ဖြင့် ပြောင်းလဲနိုင်သော ကြာချိန်ကို .carousel-itemပြောင်းလဲနိုင်သည် ။ $carousel-transitionအသွင်ကူးပြောင်းမှုများစွာကို အသုံးချပါက၊ အသွင်ကူးပြောင်းမှုအကူးအပြောင်းကို ဦးစွာသတ်မှတ်ကြောင်း သေချာပါစေ။ (ဥပမာ။ transition: transform 2s ease, opacity .5s ease-out)။