Scroll Marker Pseudo-elements

အသုံးပြုပုံ

Scroll container ထဲက item တစ်ခုချင်းစီအတွက် ::scroll-marker ကို ဖန်တီးပေးရပါမယ်။

/* 1. Container */
.carousel {
  overflow-x: auto;
  scroll-snap-type: x mandatory;

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

/* 2. Items */
.slide {
  width: 100%;
  scroll-snap-align: center;
}

/* 3. Markers (အစက်လေးတွေ) */
.slide::scroll-marker {
  content: "";
  width: 10px;
  height: 10px;
  border-radius: 50%;
  background: gray;
  cursor: pointer;
}

/* 4. Active Marker (လက်ရှိ ရောက်နေတဲ့ Slide) */
.slide::scroll-marker:target-current {
  background: blue;
}

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

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