スワイプで進む商品ギャラリー

<div class="d08-08-04-wrap">
          <div class="d08-08-04-track">
            <div class="d08-08-04-card"><span class="d08-08-04-thumb d08-08-04-t1"></span><p>商品 A</p><b>¥2,400</b></div>
            <div class="d08-08-04-card"><span class="d08-08-04-thumb d08-08-04-t2"></span><p>商品 B</p><b>¥3,200</b></div>
            <div class="d08-08-04-card"><span class="d08-08-04-thumb d08-08-04-t3"></span><p>商品 C</p><b>¥1,800</b></div>
          </div>
        </div>

.d08-08-04-wrap{width:100%;max-width:280px;overflow:hidden}
        .d08-08-04-track{display:flex;gap:12px;touch-action:pan-y;cursor:grab}
        .d08-08-04-card{flex:0 0 72%;background:#fff;border:1px solid #eef0f3;border-radius:14px;padding:10px;user-select:none}
        .d08-08-04-thumb{display:block;width:100%;height:76px;border-radius:10px}
        .d08-08-04-t1{background:linear-gradient(135deg,#ffd166,#f4845f)}
        .d08-08-04-t2{background:linear-gradient(135deg,#4ecdc4,#556270)}
        .d08-08-04-t3{background:linear-gradient(135deg,#a78bfa,#f472b6)}
        .d08-08-04-card p{font-size:12px;margin-top:8px;color:#555}
        .d08-08-04-card b{font-size:13px}

(function(){
        var root=document.querySelector('#item-08-08-04 .d08-08-04');
        var track=root&&root.querySelector('.d08-08-04-track');
        if(!track)return;
        var cards=track.querySelectorAll('.d08-08-04-card');
        var count=cards.length,index=0,startX=0,curX=0,dragging=false,step=0;
        function getX(e){return e.touches&&e.touches.length?e.touches[0].clientX:e.clientX;}
        function measure(){step=cards[0].getBoundingClientRect().width+12;}
        function render(anim){
          track.style.transition=anim?'transform .35s cubic-bezier(.2,.8,.2,1)':'none';
          track.style.transform='translateX('+(-index*step+curX)+'px)';
        }
        function onDown(e){
          dragging=true;curX=0;startX=getX(e);measure();
          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);
        measure();render(false);
      })();