ဝိုင်းလေး
စက်ဘီးစီးခြင်းအတွက် စက်ဘီးစီးခြင်းအတွက် စလိုက်ရှိုးအစိတ်အပိုင်း—အဝိုင်းလေးကဲ့သို့ ရုပ်ပုံများ သို့မဟုတ် စာသားဆလိုက်များ—။
ဘယ်လိုအလုပ်လုပ်လဲ
အဝိုင်းလေးသည် CSS 3D အသွင်ပြောင်းခြင်းနှင့် JavaScript အနည်းငယ်ဖြင့် တည်ဆောက်ထားသော အကြောင်းအရာများစွာကို စက်ဘီးစီးရန်အတွက် ဆလိုက်ရှိုးတစ်ခုဖြစ်သည်။ ၎င်းသည် ပုံများ၊ စာသားများ သို့မဟုတ် စိတ်ကြိုက် markup အတွဲများဖြင့် အလုပ်လုပ်ပါသည်။ ၎င်းတွင် ယခင်/နောက်တစ်ခု ထိန်းချုပ်မှုများနှင့် ညွှန်ကိန်းများအတွက် ပံ့ပိုးမှုလည်း ပါဝင်သည်။
Page Visibility 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
။ ၎င်းတို့ကို ရွေးချယ်နိုင်သော display utilities များ ဖြင့် အောက်ဖော်ပြပါအတိုင်း သေးငယ်သော viewport များတွင် အလွယ်တကူ ဝှက်ထားနိုင်ပါသည် ။ ကျွန်ုပ်တို့သည် ၎င်းတို့ကို အစပိုင်းတွင် ဝှက်ထားပြီး .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
attribute မပါဝင်သော 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
CSS ပိုင်ဆိုင်မှုကို ပြောင်းပြန်လှန်ထားသည်။ စာတန်းများနှင့် ထိန်းချုပ်မှုများတွင် 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>
စိတ်ကြိုက်အကူးအပြောင်း
သင်စုစည်းထားသော 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 မှတဆင့်
အဝိုင်းလေးအား ကိုယ်တိုင်ခေါ်ဆိုပါ-
var myCarousel = document.querySelector('#myCarousel')
var carousel = new bootstrap.Carousel(myCarousel)
ရွေးချယ်စရာများ
ရွေးချယ်မှုများကို data attribute သို့မဟုတ် JavaScript မှတဆင့်ဖြတ်သန်းနိုင်သည်။ data-bs-
ဒေတာရည်ညွှန်းချက်များအတွက် ၊ တွင်ပါရှိသည့်အတိုင်း ရွေးချယ်စရာအမည်ကို ပေါင်းထည့် ပါ data-bs-interval=""
။
နာမည် | ရိုက်ပါ။ | ပုံသေ | ဖော်ပြချက် |
---|---|---|---|
interval |
နံပါတ် | 5000 |
ပစ္စည်းတစ်ခု အလိုအလျောက် စက်ဘီးစီးခြင်းကြားတွင် နှောင့်နှေးရမည့် အချိန်ပမာဏ။ အကယ်၍ false ဝိုင်းလေးသည် အလိုအလျောက် လည်ပတ်နေမည်မဟုတ်ပါ။ |
keyboard |
ဘူလီယံ | true |
အဝိုင်းလေးသည် ကီးဘုတ်ဖြစ်ရပ်များကို တုံ့ပြန်သင့်သလား။ |
pause |
string | ဘူလီယံ | 'hover' |
သတ်မှတ်ထားပါက ထိတွေ့အသုံးပြုနိုင်သည့် စက်များတွင်၊ အလိုအလျောက်ပြန်မစမီ နှစ်ပိုင်းခြားပြီး |
ride |
string | ဘူလီယံ | false |
အသုံးပြုသူသည် ပထမအရာအား ကိုယ်တိုင်ပြုလုပ်ပြီးနောက် အဝိုင်းလေးအား အလိုအလျောက်ဖွင့်သည်။ သတ်မှတ်ထားပါက 'carousel' ၊ ဝိုင်းလေးအား Load တွင် အလိုအလျောက်ဖွင့်သည်။ |
wrap |
ဘူလီယံ | true |
ဝိုင်းလေးသည် အဆက်မပြတ် လည်ပတ်သင့်သည်ဖြစ်စေ သို့မဟုတ် ရပ်တန့်ရန်ခက်ခဲသည်ဖြစ်စေ။ |
touch |
ဘူလီယံ | true |
အဝိုင်းလေးသည် ထိတွေ့မျက်နှာပြင် စက်ပစ္စည်းများတွင် ဘယ်/ညာ ပွတ်ဆွဲခြင်းဖြင့် အပြန်အလှန်တုံ့ပြန်မှုများကို ပံ့ပိုးပေးနိုင်မလား။ |
နည်းလမ်းများ
Asynchronous နည်းလမ်းများနှင့် အသွင်ကူးပြောင်းမှုများ
API နည်းလမ်းအားလုံးသည် အ ညီအမျှ ဖြစ်ပြီး အကူးအပြောင်း တစ်ခု စတင်သည် ။ အကူးအပြောင်းစတင်သည်နှင့် မပြီးဆုံးမီတွင် ၎င်းတို့သည် ခေါ်ဆိုသူထံသို့ ပြန်သွားကြသည် ။ ထို့အပြင်၊ transitioning component တစ်ခုပေါ်ရှိ method ခေါ်ဆိုမှုကို လျစ်လျူရှု ပါမည်။
နောက်ထပ်အချက်အလက်များအတွက် ကျွန်ုပ်တို့၏ JavaScript စာရွက်စာတမ်းကို ကြည့်ပါ ။
ဥပမာအားဖြင့်၊ သင်သည် နောက်ထပ်ရွေးချယ်စရာများဖြင့် အစပြု၍ အရာများမှတစ်ဆင့် စက်ဘီးစီးခြင်းကို စတင်ရန် ဥပမာအားဖြင့်၊
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 |
အဝိုင်းကို ဘောင်တစ်ခု (၀က်အခြေခံ၊ အခင်းအကျင်းတစ်ခုနှင့် ဆင်တူသည်) သို့ လည်ပတ်သည်။ ပစ်မှတ်ကို မပြမီ ခေါ်ဆိုသူထံ ပြန်သွားသည် (ဥပမာ၊ slid.bs.carousel ပွဲမစမီ)။ |
dispose |
ဒြပ်စင်တစ်ခု၏ အဝိုင်းကို ဖျက်သည်။ (DOM ဒြပ်စင်ပေါ်ရှိ သိမ်းဆည်းထားသည့် ဒေတာကို ဖယ်ရှားသည်) |
getInstance |
DOM ဒြပ်စင်တစ်ခုနှင့် ဆက်စပ်နေသော အဝိုင်းလေး instance ကို သင်ရနိုင်စေမည့် Static method၊ သင်သည် ၎င်းကို ဤကဲ့သို့ သုံးနိုင်သည်-bootstrap.Carousel.getInstance(element) |
getOrCreateInstance |
DOM ဒြပ်စင်တစ်ခုနှင့်ဆက်စပ်နေသော အဝိုင်းလေးအား ပြန်ပေးသည့် သို့မဟုတ် အစပျိုးမခံရပါက အသစ်ဖန်တီးသည့် ပုံသေနည်းလမ်း။ သင်ဤကဲ့သို့အသုံးပြုနိုင်သည်။bootstrap.Carousel.getOrCreateInstance(element) |
အဲ့ဒါနဲ့
Bootstrap ၏ အဝိုင်းလေးအတန်းသည် အဝိုင်းလေး၏ လုပ်ဆောင်နိုင်စွမ်းကို ချိတ်ဆက်ရန်အတွက် ဖြစ်ရပ်နှစ်ခုကို ဖော်ထုတ်ပေးပါသည်။ ဖြစ်ရပ်နှစ်ခုစလုံးတွင် အောက်ပါ နောက်ထပ် ဂုဏ်သတ္တိများ ရှိသည်။
direction
: အဝိုင်းလေး လျှောကျနေသော လမ်းကြောင်း (သော်လည်းကောင်း"left"
)"right"
။relatedTarget
: လက်ရှိအရာအဖြစ် နေရာသို့ လျှောကျနေသော DOM ဒြပ်စင်။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...
})