スワイプで見比べるビフォーアフター

<div class="d08-08-11-wrap">
          <div class="d08-08-11-frame" id="d08-08-11-frame">
            <div class="d08-08-11-after">改装後</div>
            <div class="d08-08-11-before" id="d08-08-11-before" style="width:50%">改装前</div>
            <div class="d08-08-11-handle" id="d08-08-11-handle" style="left:50%"></div>
          </div>
        </div>

.d08-08-11-wrap{width:100%;max-width:280px}
        .d08-08-11-frame{position:relative;width:100%;height:160px;border-radius:14px;overflow:hidden;background:linear-gradient(135deg,#556270,#232526);touch-action:none;cursor:ew-resize;user-select:none}
        .d08-08-11-after,.d08-08-11-before{position:absolute;inset:0;display:flex;align-items:center;justify-content:center;color:#fff;font-size:13px;font-weight:800}
        .d08-08-11-after{background:linear-gradient(135deg,#22c55e,#4ade80)}
        .d08-08-11-before{overflow:hidden;background:linear-gradient(135deg,#6a5cff,#a44bff)}
        .d08-08-11-handle{position:absolute;top:0;bottom:0;width:3px;background:#fff;transform:translateX(-50%);box-shadow:0 0 0 3px rgba(255,255,255,.35)}
        .d08-08-11-handle::after{content:"◂▸";position:absolute;top:50%;left:50%;transform:translate(-50%,-50%);width:26px;height:26px;border-radius:50%;background:#fff;color:#6a5cff;font-size:10px;font-weight:800;display:flex;align-items:center;justify-content:center;letter-spacing:-2px}

(function(){
        var root=document.querySelector('#item-08-08-11 .d08-08-11');
        var frame=root&&root.querySelector('.d08-08-11-frame');
        if(!frame)return;
        var before=frame.querySelector('.d08-08-11-before'),handle=frame.querySelector('.d08-08-11-handle');
        if(!before||!handle)return;
        var dragging=false;
        function getX(e){return e.touches&&e.touches.length?e.touches[0].clientX:e.clientX;}
        function setPct(clientX){
          var r=frame.getBoundingClientRect();
          var pct=Math.min(1,Math.max(0,(clientX-r.left)/r.width));
          before.style.width=(pct*100)+'%';
          handle.style.left=(pct*100)+'%';
        }
        function onDown(e){dragging=true;setPct(getX(e));document.addEventListener('mousemove',onMove);document.addEventListener('mouseup',onUp);}
        function onMove(e){if(!dragging)return;if(e.cancelable)e.preventDefault();setPct(getX(e));}
        function onUp(){dragging=false;document.removeEventListener('mousemove',onMove);document.removeEventListener('mouseup',onUp);}
        frame.addEventListener('mousedown',onDown);
        frame.addEventListener('touchstart',onDown,{passive:true});
        frame.addEventListener('touchmove',onMove,{passive:false});
        frame.addEventListener('touchend',onUp);
      })();