矢印送りカルーセル型フォーム

<div class="d04-09-05-wrap">
          <div class="d04-09-05-carousel">
            <button type="button" class="d04-09-05-arrow d04-09-05-arrow-l" aria-label="前のステップへ" disabled>‹</button>
            <div class="d04-09-05-viewport">
              <div class="d04-09-05-track">
                <div class="d04-09-05-pane">
                  <span class="d04-09-05-tag">STEP 1</span>
                  <p>ご希望の来店日</p>
                  <input type="date" class="d04-09-05-input">
                </div>
                <div class="d04-09-05-pane">
                  <span class="d04-09-05-tag">STEP 2</span>
                  <p>ご希望の時間帯</p>
                  <select class="d04-09-05-input"><option>午前</option><option>午後</option></select>
                </div>
                <div class="d04-09-05-pane">
                  <span class="d04-09-05-tag">STEP 3</span>
                  <p>ご来店人数</p>
                  <input type="number" class="d04-09-05-input" value="1" min="1">
                </div>
              </div>
            </div>
            <button type="button" class="d04-09-05-arrow d04-09-05-arrow-r" aria-label="次のステップへ">›</button>
          </div>
          <div class="d04-09-05-dots">
            <span class="d04-09-05-dot is-active"></span><span class="d04-09-05-dot"></span><span class="d04-09-05-dot"></span>
          </div>
        </div>

.d04-09-05-wrap{width:min(280px,100%)}
        .d04-09-05-carousel{display:flex;align-items:center;gap:8px}
        .d04-09-05-arrow{
          flex:0 0 auto;width:30px;height:30px;border-radius:50%;border:2px solid #d5d9e0;
          background:#fff;color:#444;font-size:16px;line-height:1;cursor:pointer;
          transition:opacity .2s,background .2s,border-color .2s,color .2s;
          display:flex;align-items:center;justify-content:center;
        }
        .d04-09-05-arrow:hover{background:#eef2ff;border-color:#4a6cf7;color:#4a6cf7}
        .d04-09-05-arrow:disabled{opacity:.35;cursor:not-allowed}
        .d04-09-05-viewport{flex:1;overflow:hidden}
        .d04-09-05-track{display:flex;transition:transform .4s cubic-bezier(.4,0,.2,1)}
        .d04-09-05-pane{flex:0 0 100%;box-sizing:border-box;padding:0 4px;text-align:center}
        .d04-09-05-tag{
          display:inline-block;font-size:10px;font-weight:700;color:#4a6cf7;
          background:#eef2ff;padding:2px 8px;border-radius:99px;margin-bottom:8px;
        }
        .d04-09-05-pane p{margin:0 0 8px;font-size:13px;color:#333;font-weight:700}
        .d04-09-05-input{
          width:100%;box-sizing:border-box;padding:9px 10px;font-size:13px;
          border:2px solid #d5d9e0;border-radius:8px;outline:none;background:#fff;font-family:inherit;
        }
        .d04-09-05-input:focus{border-color:#4a6cf7}
        .d04-09-05-dots{display:flex;justify-content:center;gap:6px;margin-top:14px}
        .d04-09-05-dot{width:6px;height:6px;border-radius:50%;background:#e4e8ef;transition:background .3s,transform .3s}
        .d04-09-05-dot.is-active{background:#4a6cf7;transform:scale(1.3)}

(function(){
        var wrap=document.querySelector('.d04-09-05-wrap');
        if(!wrap)return;
        var track=wrap.querySelector('.d04-09-05-track');
        var panes=wrap.querySelectorAll('.d04-09-05-pane');
        var dots=wrap.querySelectorAll('.d04-09-05-dot');
        var l=wrap.querySelector('.d04-09-05-arrow-l');
        var r=wrap.querySelector('.d04-09-05-arrow-r');
        var total=panes.length;
        var cur=0;
        function paint(){
          track.style.transform='translateX(-'+(cur*100)+'%)';
          dots.forEach(function(d,i){d.classList.toggle('is-active',i===cur);});
          l.disabled=cur===0;
          r.disabled=cur===total-1;
        }
        l.addEventListener('click',function(){
          if(cur>0){cur--;paint();}
        });
        r.addEventListener('click',function(){
          if(cur<total-1){cur++;paint();}
        });
      })();