Scroll Marker Pseudo-elements

အသုံးပြုပုံ

Scroll လုပ်လို့ရမယ့် Container ထဲက Item တစ်ခုချင်းစီအတွက် ::scroll-marker ဆိုတဲ့ Pseudo-element ကို ဖန်တီးပေးရပါမယ်။

/* ၁။ ပင်မ Container */
.carousel {
  overflow-x: auto;
  scroll-snap-type: x mandatory;

  /* Marker (အစက်လေးတွေ) ကို အောက်နားမှာ စုပြီး ပြမယ်လို့ သတ်မှတ်တာပါ */
  scroll-marker-group: after;
}

/* ၂။ အထဲက Item တစ်ခုချင်းစီ (ဥပမာ - ပုံများ) */
.slide {
  width: 100%;
  scroll-snap-align: center;
}

/* ၃။ Markers (အောက်က အစက်လေးများ၏ ဒီဇိုင်း) */
.slide::scroll-marker {
  content: "";
  width: 10px;
  height: 10px;
  border-radius: 50%;
  background: gray;
  cursor: pointer;
}

/* ၄။ Active Marker (လက်ရှိ ရောက်နေတဲ့ Slide ရဲ့ အစက်ကလေးကို အရောင်ပြောင်းမယ်) */
.slide::scroll-marker:target-current {
  background: blue;
}

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

Browser က .slide (ပုံတစ်ပုံချင်းစီ) အတွက် Marker အစက်လေး တစ်ခုစီကို အလိုအလျောက် ဖန်တီးထုတ်ပေးပါတယ်။
အဲ့ဒီ Marker တွေကို .carousel ရဲ့ အောက်ဘက် (after) မှာ သွားပြီး အုပ်စုလိုက် စုပေးထားပါတယ်။
User က Marker လေးကို နှိပ်လိုက်ရင်၊ သက်ဆိုင်ရာ Slide ဆီကို အလိုအလျောက် Scroll ဆွဲပေးသွားပါမယ်။
ကိုယ်တိုင် Scroll ဆွဲလိုက်ရင်လည်း၊ သက်ဆိုင်ရာ နေရာရောက်တာနဲ့ Marker က သူ့အလိုလို Active အရောင် ပြောင်းသွားမှာ ဖြစ်ပါတယ်။