縦スワイプ遷移(SPA風)

<div class="d08-04-08-stage">
          <div class="d08-04-08-page d08-04-08-a">
            <strong>ニュース</strong>
            <p>最新情報一覧</p>
          </div>
          <div class="d08-04-08-page d08-04-08-b">
            <strong>ニュース詳細</strong>
            <p>本文を読む</p>
          </div>
          <div class="d08-04-08-dots">
            <span class="d08-04-08-dot is-active"></span>
            <span class="d08-04-08-dot"></span>
          </div>
          <button type="button" class="d08-04-08-btn d08-04-08-up">▲</button>
          <button type="button" class="d08-04-08-btn d08-04-08-down">▼</button>
        </div>

.prev.d08-04-08{padding:0;}
        .d08-04-08-stage{position:absolute;inset:0;overflow:hidden;font-family:sans-serif;}
        .d08-04-08-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-08-a{background:linear-gradient(135deg,#059669,#047857);transform:translateY(0);}
        .d08-04-08-b{background:linear-gradient(135deg,#7c3aed,#6d28d9);transform:translateY(100%);}
        .d08-04-08-stage.is-b .d08-04-08-a{transform:translateY(-100%);}
        .d08-04-08-stage.is-b .d08-04-08-b{transform:translateY(0);}
        .d08-04-08-dots{position:absolute;right:12px;top:50%;transform:translateY(-50%);display:flex;flex-direction:column;gap:6px;z-index:3;}
        .d08-04-08-dot{width:6px;height:6px;border-radius:50%;background:rgba(255,255,255,.4);transition:background .3s ease;}
        .d08-04-08-dot.is-active{background:#fff;}
        .d08-04-08-btn{position:absolute;left:50%;transform:translateX(-50%);z-index:3;border:none;border-radius:999px;width:30px;height:30px;background:#fff;color:#333;cursor:pointer;font-size:11px;}
        .d08-04-08-up{top:10px;}
        .d08-04-08-down{bottom:10px;}
        .d08-04-08-page strong{font-size:18px;}
        .d08-04-08-page p{font-size:12px;margin:0;opacity:.85;}

(function(){
          var box=document.currentScript.closest('.item').querySelector('.d08-04-08');
          var stage=box.querySelector('.d08-04-08-stage');
          var dots=box.querySelectorAll('.d08-04-08-dot');
          var up=box.querySelector('.d08-04-08-up');
          var down=box.querySelector('.d08-04-08-down');
          function set(isB){
            stage.classList.toggle('is-b',isB);
            dots[0].classList.toggle('is-active',!isB);
            dots[1].classList.toggle('is-active',isB);
          }
          down.addEventListener('click',function(){ set(true); });
          up.addEventListener('click',function(){ set(false); });
        })();