ဝိုင်းလေး

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

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

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

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

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

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

ဥပမာ

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

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

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

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

<div id="carouselExampleSlidesOnly" class="carousel slide" data-ride="carousel">
  <div class="carousel-inner">
    <div class="carousel-item active">
      <img class="d-block w-100" src=".../800x400?auto=yes&bg=777&fg=555&text=First slide" alt="First slide">
    </div>
    <div class="carousel-item">
      <img class="d-block w-100" src=".../800x400?auto=yes&bg=666&fg=444&text=Second slide" alt="Second slide">
    </div>
    <div class="carousel-item">
      <img class="d-block w-100" src=".../800x400?auto=yes&bg=555&fg=333&text=Third slide" alt="Third slide">
    </div>
  </div>
</div>

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

ယခင်နှင့် နောက်တစ်ခု ထိန်းချုပ်မှုများတွင် ထည့်သွင်းခြင်း-

အရင် နောက်တစ်ခု

<div id="carouselExampleControls" class="carousel slide" data-ride="carousel">
  <div class="carousel-inner">
    <div class="carousel-item active">
      <img class="d-block w-100" src=".../800x400?auto=yes&bg=777&fg=555&text=First slide" alt="First slide">
    </div>
    <div class="carousel-item">
      <img class="d-block w-100" src=".../800x400?auto=yes&bg=666&fg=444&text=Second slide" alt="Second slide">
    </div>
    <div class="carousel-item">
      <img class="d-block w-100" src=".../800x400?auto=yes&bg=555&fg=333&text=Third slide" alt="Third slide">
    </div>
  </div>
  <a class="carousel-control-prev" href="#carouselExampleControls" role="button" data-slide="prev">
    <span class="carousel-control-prev-icon" aria-hidden="true"></span>
    <span class="sr-only">Previous</span>
  </a>
  <a class="carousel-control-next" href="#carouselExampleControls" role="button" data-slide="next">
    <span class="carousel-control-next-icon" aria-hidden="true"></span>
    <span class="sr-only">Next</span>
  </a>
</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 class="d-block w-100" src=".../800x400?auto=yes&bg=777&fg=555&text=First slide" alt="First slide">
    </div>
    <div class="carousel-item">
      <img class="d-block w-100" src=".../800x400?auto=yes&bg=666&fg=444&text=Second slide" alt="Second slide">
    </div>
    <div class="carousel-item">
      <img class="d-block w-100" src=".../800x400?auto=yes&bg=555&fg=333&text=Third slide" alt="Third slide">
    </div>
  </div>
  <a class="carousel-control-prev" href="#carouselExampleIndicators" role="button" data-slide="prev">
    <span class="carousel-control-prev-icon" aria-hidden="true"></span>
    <span class="sr-only">Previous</span>
  </a>
  <a class="carousel-control-next" href="#carouselExampleIndicators" role="button" data-slide="next">
    <span class="carousel-control-next-icon" aria-hidden="true"></span>
    <span class="sr-only">Next</span>
  </a>
</div>

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

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

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

Nulla vitae elit libero၊ a pharetra augue mollis interdum။

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

Lorem ipsum dolor sit amet, consectetur adipiscing elit ။

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

Praesent commodo cursus magna၊ vel scelerisque nisl consectetur

အရင် နောက်တစ်ခု

<div class="carousel-item">
  <img src="..." alt="...">
  <div class="carousel-caption d-none d-md-block">
    <h5>...</h5>
    <p>...</p>
  </div>
</div>

ကြက်ခြေခတ်

.carousel-fadeဆလိုက်အစား မှိန်သောအကူးအပြောင်းဖြင့် သက်ဝင်လှုပ်ရှားနေသော ဆလိုက်များဆီသို့ သင့်အဝိုင်းလေး ထဲသို့ ပေါင်းထည့်ပါ ။

အရင် နောက်တစ်ခု

<div id="carouselExampleFade" class="carousel slide carousel-fade" data-ride="carousel">
  <div class="carousel-inner">
    <div class="carousel-item active">
      <img class="d-block w-100" src=".../800x400?auto=yes&bg=777&fg=555&text=First slide" alt="First slide">
    </div>
    <div class="carousel-item">
      <img class="d-block w-100" src=".../800x400?auto=yes&bg=666&fg=444&text=Second slide" alt="Second slide">
    </div>
    <div class="carousel-item">
      <img class="d-block w-100" src=".../800x400?auto=yes&bg=555&fg=333&text=Third slide" alt="Third slide">
    </div>
  </div>
  <a class="carousel-control-prev" href="#carouselExampleFade" role="button" data-slide="prev">
    <span class="carousel-control-prev-icon" aria-hidden="true"></span>
    <span class="sr-only">Previous</span>
  </a>
  <a class="carousel-control-next" href="#carouselExampleFade" role="button" data-slide="next">
    <span class="carousel-control-next-icon" aria-hidden="true"></span>
    <span class="sr-only">Next</span>
  </a>
</div>

အသုံးပြုမှု

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

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

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

JavaScript မှတဆင့်

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

$('.carousel').carousel()

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

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

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

.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')

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

အဲ့ဒါနဲ့

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

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

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

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

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

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