パンくず連動スライド遷移

<div class="d08-04-10-stage">
          <nav class="d08-04-10-crumbs">
            <span class="d08-04-10-crumb is-active" data-i="0">トップ</span>
            <span class="d08-04-10-sep">›</span>
            <span class="d08-04-10-crumb" data-i="1">カテゴリ</span>
            <span class="d08-04-10-sep">›</span>
            <span class="d08-04-10-crumb" data-i="2">商品</span>
          </nav>
          <div class="d08-04-10-viewport">
            <div class="d08-04-10-page" data-i="0">
              <strong>トップページ</strong>
              <p>サイトのホーム</p>
            </div>
            <div class="d08-04-10-page" data-i="1">
              <strong>カテゴリ一覧</strong>
              <p>商品カテゴリ</p>
            </div>
            <div class="d08-04-10-page" data-i="2">
              <strong>商品詳細</strong>
              <p>商品ページ</p>
            </div>
          </div>
          <div class="d08-04-10-nav">
            <button type="button" class="d08-04-10-btn d08-04-10-prev" disabled>戻る</button>
            <button type="button" class="d08-04-10-btn d08-04-10-next">進む</button>
          </div>
        </div>

.prev.d08-04-10{padding:0;}
        .d08-04-10-stage{position:absolute;inset:0;overflow:hidden;font-family:sans-serif;display:flex;flex-direction:column;}
        .d08-04-10-crumbs{display:flex;align-items:center;gap:4px;padding:10px 12px;font-size:11px;color:#94a3b8;background:#0f172a;z-index:3;}
        .d08-04-10-crumb{transition:color .3s ease;}
        .d08-04-10-crumb.is-active{color:#fff;font-weight:bold;}
        .d08-04-10-sep{color:#475569;}
        .d08-04-10-viewport{position:relative;flex:1;overflow:hidden;}
        .d08-04-10-page{position:absolute;inset:0;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:6px;color:#fff;transition:transform .5s ease;}
        .d08-04-10-page[data-i="0"]{background:linear-gradient(135deg,#4f46e5,#4338ca);}
        .d08-04-10-page[data-i="1"]{background:linear-gradient(135deg,#0ea5e9,#0284c7);}
        .d08-04-10-page[data-i="2"]{background:linear-gradient(135deg,#10b981,#059669);}
        .d08-04-10-page strong{font-size:16px;}
        .d08-04-10-page p{font-size:11px;margin:0;opacity:.85;}
        .d08-04-10-nav{display:flex;justify-content:space-between;padding:8px 12px;background:#0f172a;z-index:3;}
        .d08-04-10-btn{border:none;border-radius:999px;padding:5px 14px;font-size:11px;background:#fff;color:#333;cursor:pointer;}
        .d08-04-10-btn:disabled{opacity:.35;cursor:default;}

(function(){
          var box=document.currentScript.closest('.item').querySelector('.d08-04-10');
          var pages=box.querySelectorAll('.d08-04-10-page');
          var crumbs=box.querySelectorAll('.d08-04-10-crumb');
          var prevBtn=box.querySelector('.d08-04-10-prev');
          var nextBtn=box.querySelector('.d08-04-10-next');
          var idx=0;
          function render(){
            pages.forEach(function(p){
              var i=+p.getAttribute('data-i');
              p.style.transform='translateX('+((i-idx)*100)+'%)';
            });
            crumbs.forEach(function(c){
              c.classList.toggle('is-active',+c.getAttribute('data-i')===idx);
            });
            prevBtn.disabled=idx===0;
            nextBtn.disabled=idx===pages.length-1;
          }
          prevBtn.addEventListener('click',function(){ if(idx>0){idx--;render();} });
          nextBtn.addEventListener('click',function(){ if(idx<pages.length-1){idx++;render();} });
          render();
        })();