ページドットインジケータ

<div class="d11-03-09-phone">
          <div class="d11-03-09-screen">
            <div class="d11-03-09-track" id="d11-03-09-track">
              <div class="d11-03-09-slide" style="background:#818cf8">1</div>
              <div class="d11-03-09-slide" style="background:#f472b6">2</div>
              <div class="d11-03-09-slide" style="background:#34d399">3</div>
              <div class="d11-03-09-slide" style="background:#fbbf24">4</div>
            </div>
            <div class="d11-03-09-dots" id="d11-03-09-dots">
              <span class="is-on"></span><span></span><span></span><span></span>
            </div>
          </div>
        </div>

.d11-03-09-phone{width:190px;height:240px;border-radius:24px;border:6px solid #1f2937;background:#0f172a;position:relative;overflow:hidden;box-shadow:0 10px 30px rgba(0,0,0,.15)}
        .d11-03-09-screen{position:absolute;inset:0;overflow:hidden}
        .d11-03-09-track{position:absolute;top:0;left:0;bottom:34px;display:flex;width:400%;transition:transform .35s cubic-bezier(.2,.8,.2,1);touch-action:pan-y}
        .d11-03-09-slide{width:25%;height:100%;display:flex;align-items:center;justify-content:center;color:#fff;font-size:44px;font-weight:800;user-select:none}
        .d11-03-09-dots{position:absolute;bottom:12px;left:0;right:0;display:flex;justify-content:center;gap:6px}
        .d11-03-09-dots span{width:7px;height:7px;border-radius:50%;background:rgba(255,255,255,.4);transition:all .3s}
        .d11-03-09-dots span.is-on{background:#fff;width:18px;border-radius:4px}

(function(){
        var root=document.getElementById('item-11-03-09');if(!root)return;
        var track=root.querySelector('#d11-03-09-track'),dots=root.querySelectorAll('#d11-03-09-dots span'),n=dots.length,cur=0;
        function go(i){cur=Math.max(0,Math.min(n-1,i));track.style.transform='translateX(-'+(cur*25)+'%)';dots.forEach(function(d,di){d.classList.toggle('is-on',di===cur);});}
        var sx=0,dx=0,drag=false;
        track.addEventListener('pointerdown',function(e){drag=true;sx=e.clientX;dx=0;track.setPointerCapture(e.pointerId);});
        track.addEventListener('pointermove',function(e){if(!drag)return;dx=e.clientX-sx;});
        track.addEventListener('pointerup',function(){if(!drag)return;drag=false;if(dx<-30)go(cur+1);else if(dx>30)go(cur-1);dx=0;});
      })();