Source

ဝိုင်းလေး

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

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

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

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

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

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

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

ဥပမာ

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

အတန်းအား ဆ .activeလိုက်များထဲမှ တစ်ခုသို့ ပေါင်းထည့်ရန် လိုအပ်သည် မဟုတ်ပါက အဝိုင်းလေးအား မြင်နိုင်မည် မဟုတ်ပါ။ .carouselအထူးသဖြင့် စာမျက်နှာတစ်ခုတည်းတွင် အဝိုင်းလေးများစွာကို သင်အသုံးပြုနေပါက ရွေးချယ်နိုင်သော ထိန်းချုပ်မှုများအတွက် သီးသန့် ID ကို သတ်မှတ်ရန် သေချာပါစေ ။ ထိန်းချုပ်မှုနှင့် ညွှန်ပြသည့်ဒြပ်စင်များသည် ဒြပ်စင်၏ 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 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>

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

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

<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>
  <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 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>
  <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။

<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>Nulla vitae elit libero, a pharetra augue mollis interdum.</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>Lorem ipsum dolor sit amet, consectetur adipiscing elit.</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>Praesent commodo cursus magna, vel scelerisque nisl consectetur.</p>
      </div>
    </div>
  </div>
  <a class="carousel-control-prev" href="#carouselExampleCaptions" 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="#carouselExampleCaptions" role="button" data-slide="next">
    <span class="carousel-control-next-icon" aria-hidden="true"></span>
    <span class="sr-only">Next</span>
  </a>
</div>

ကြက်ခြေခတ်

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

<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>
  <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>

အလိုအလျောက် စက်ဘီးစီးခြင်းကြားတွင် ကြန့်ကြာရန် အချိန်ပမာဏကို ပြောင်းရန် 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>
  <a class="carousel-control-prev" href="#carouselExampleInterval" 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="#carouselExampleInterval" 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"အား စတင်ချိန်မှ စတင်ကာ လှုပ်ရှားနေသော အဝိုင်းတစ်ဝိုင်းကို အမှတ်အသားပြုရန် ရည်ညွှန်းချက်ကို အသုံးပြုသည်။ သင့်အဝိုင်းလေးကို အစပြုရန် အသုံးမပြုပါက data-ride="carousel"၊ ၎င်းကို သင်ကိုယ်တိုင် စတင်လုပ်ဆောင်ရပါမည်။ တူညီသောအဝိုင်းလေး၏ ရှင်းလင်းပြတ်သားသော JavaScript အစပြုခြင်း (မလိုအပ်သောနှင့် မလိုအပ်ဘဲ) ပေါင်းစပ်အသုံးပြု၍မရပါ။

JavaScript မှတဆင့်

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

$('.carousel').carousel()

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

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

နာမည် ရိုက်ပါ။ ပုံသေ ဖော်ပြချက်
ကြားကာလ နံပါတ် ၅၀၀၀ ပစ္စည်းတစ်ခု အလိုအလျောက် စက်ဘီးစီးခြင်းကြားတွင် နှောင့်နှေးရမည့် အချိန်ပမာဏ။ မှားယွင်းပါက အဝိုင်းလေးသည် အလိုအလျောက် လည်ပတ်မည်မဟုတ်ပါ။
ကီးဘုတ် ဘူလီယံ မှန်ပါတယ်။ အဝိုင်းလေးသည် ကီးဘုတ်ဖြစ်ရပ်များကို တုံ့ပြန်သင့်သလား။
ခေတ္တရပ်ပါ။ string | ဘူလီယံ "ပျံဝဲ"

သတ်မှတ်ထားပါက "hover"အဝိုင်းလေး၏ စက်ဘီးစီးခြင်းကို ခေတ္တရပ်ပြီး စက်ဘီးဝိုင်းလေးတွင် mouseenterစက်ဘီးစီးခြင်းကို ပြန်လည်စတင်ပါ mouseleave။ သတ်မှတ်ထားပါက false၊ အဝိုင်းလေးပေါ်တွင် ပျံဝဲနေပါက ၎င်းကို ခေတ္တရပ်မည်မဟုတ်ပါ။

ထိတွေ့အသုံးပြုနိုင်သည့် စက်များတွင်၊ အလိုအလျောက်ပြန်မစမီ နှစ်ပိုင်းကြာသည်အထိ "hover"စက်ဘီးစီးခြင်းအား (အသုံးပြုသူသည် စက်ဝိုင်းနှင့် အပြန်အလှန်တုံ့ပြန်မှုပြီးသည်နှင့်) တွင် ခေတ္တရပ်ပါမည် ။ touchend၎င်းသည် အထက်ဖော်ပြပါ မောက်စ်အပြုအမူအပြင် သတိပြုပါ။
စီး ကြိုးတစ်ချောင်း အတုအယောင် အသုံးပြုသူသည် ပထမအရာအား ကိုယ်တိုင်ပြုလုပ်ပြီးနောက် အဝိုင်းလေးအား အလိုအလျောက်ဖွင့်သည်။ "အဝိုင်းလေး" ဖြစ်ပါက၊ ဝိုင်းလေးအား အလိုအလျောက်ဖွင့်ပေးပါသည်။
ခြုံ ဘူလီယံ မှန်ပါတယ်။ ဝိုင်းလေးသည် အဆက်မပြတ် လည်ပတ်သင့်သည်ဖြစ်စေ သို့မဟုတ် ရပ်တန့်ရန်ခက်ခဲသည်ဖြစ်စေ။
ထိပါ။ ဘူလီယံ မှန်ပါတယ်။ အဝိုင်းလေးသည် ထိတွေ့မျက်နှာပြင် စက်ပစ္စည်းများတွင် ဘယ်/ညာ ပွတ်ဆွဲခြင်းဖြင့် အပြန်အလှန်တုံ့ပြန်မှုများကို ပံ့ပိုးပေးနိုင်မလား။

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

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

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

နောက်ထပ်အချက်အလက်များအတွက် ကျွန်ုပ်တို့၏ 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')

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

အဲ့ဒါနဲ့

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)။