スワイプ送りオンボーディング

<div class="d08-08-07-wrap">
          <div class="d08-08-07-track">
            <div class="d08-08-07-slide"><span class="d08-08-07-ico">🚀</span><b>ようこそ</b><p>アプリの使い方を3ステップでご紹介します</p></div>
            <div class="d08-08-07-slide"><span class="d08-08-07-ico">🔔</span><b>通知設定</b><p>大事な更新をリアルタイムでお知らせ</p></div>
            <div class="d08-08-07-slide"><span class="d08-08-07-ico">🎉</span><b>準備完了</b><p>さっそく使いはじめましょう</p></div>
          </div>
          <div class="d08-08-07-bars"><span class="d08-08-07-bar is-on"></span><span class="d08-08-07-bar"></span><span class="d08-08-07-bar"></span></div>
        </div>

.d08-08-07-wrap{width:100%;max-width:280px}
        .d08-08-07-track{display:flex;width:100%;height:170px;border-radius:14px;overflow:hidden;background:#f6f7fb;touch-action:pan-y;cursor:grab}
        .d08-08-07-slide{flex:0 0 100%;display:flex;flex-direction:column;align-items:center;justify-content:center;text-align:center;padding:0 22px;user-select:none}
        .d08-08-07-ico{font-size:30px}
        .d08-08-07-slide b{margin-top:8px;font-size:14px}
        .d08-08-07-slide p{margin-top:4px;font-size:11.5px;color:#8a8f9c}
        .d08-08-07-bars{display:flex;gap:6px;margin-top:10px}
        .d08-08-07-bar{flex:1;height:4px;border-radius:2px;background:#e2e4ec;transition:background .2s}
        .d08-08-07-bar.is-on{background:linear-gradient(90deg,#6a5cff,#a44bff)}

(function(){
        var root=document.querySelector('#item-08-08-07 .d08-08-07');
        var track=root&&root.querySelector('.d08-08-07-track');
        var bars=root?root.querySelectorAll('.d08-08-07-bar'):[];
        if(!track)return;
        var count=track.querySelectorAll('.d08-08-07-slide').length;
        var index=0,startX=0,curX=0,dragging=false;
        function getX(e){return e.touches&&e.touches.length?e.touches[0].clientX:e.clientX;}
        function render(anim){
          track.style.transition=anim?'transform .35s cubic-bezier(.2,.8,.2,1)':'none';
          track.style.transform='translateX(calc(-'+(index*100)+'% + '+curX+'px))';
          bars.forEach(function(b,i){b.classList.toggle('is-on',i===index);});
        }
        function onDown(e){
          dragging=true;curX=0;startX=getX(e);
          document.addEventListener('mousemove',onMove);
          document.addEventListener('mouseup',onUp);
        }
        function onMove(e){
          if(!dragging)return;
          if(e.cancelable)e.preventDefault();
          curX=getX(e)-startX;render(false);
        }
        function onUp(){
          if(!dragging)return;
          dragging=false;
          if(curX<-40&&index<count-1)index++;
          else if(curX>40&&index>0)index--;
          curX=0;render(true);
          document.removeEventListener('mousemove',onMove);
          document.removeEventListener('mouseup',onUp);
        }
        track.addEventListener('mousedown',onDown);
        track.addEventListener('touchstart',onDown,{passive:true});
        track.addEventListener('touchmove',onMove,{passive:false});
        track.addEventListener('touchend',onUp);
        render(false);
      })();