スワイプ画像カルーセル

<div class="d08-08-01-wrap">
          <div class="d08-08-01-track">
            <div class="d08-08-01-slide d08-08-01-s1">1</div>
            <div class="d08-08-01-slide d08-08-01-s2">2</div>
            <div class="d08-08-01-slide d08-08-01-s3">3</div>
          </div>
          <div class="d08-08-01-dots">
            <span class="d08-08-01-dot is-on"></span><span class="d08-08-01-dot"></span><span class="d08-08-01-dot"></span>
          </div>
        </div>

.d08-08-01-wrap{width:100%;max-width:280px;position:relative}
        .d08-08-01-track{display:flex;width:100%;height:150px;border-radius:14px;overflow:hidden;touch-action:pan-y;cursor:grab}
        .d08-08-01-track.is-dragging{cursor:grabbing}
        .d08-08-01-slide{flex:0 0 100%;display:flex;align-items:center;justify-content:center;color:#fff;font-size:30px;font-weight:800;user-select:none}
        .d08-08-01-s1{background:linear-gradient(135deg,#6a5cff,#a44bff)}
        .d08-08-01-s2{background:linear-gradient(135deg,#ff7a59,#ffb347)}
        .d08-08-01-s3{background:linear-gradient(135deg,#22c55e,#4ade80)}
        .d08-08-01-dots{display:flex;justify-content:center;gap:6px;margin-top:10px}
        .d08-08-01-dot{width:7px;height:7px;border-radius:50%;background:#d8dae2;transition:background .2s,transform .2s}
        .d08-08-01-dot.is-on{background:#6a5cff;transform:scale(1.3)}

(function(){
        var root=document.querySelector('#item-08-08-01 .d08-08-01');
        var track=root&&root.querySelector('.d08-08-01-track');
        var dots=root?root.querySelectorAll('.d08-08-01-dot'):[];
        if(!track)return;
        var count=track.querySelectorAll('.d08-08-01-slide').length;
        var index=0,startX=0,curX=0,dragging=false;
        function getX(e){return e.touches&&e.touches.length?e.touches[0].clientX:e.clientX;}
        function render(anim){
          track.style.transition=anim?'transform .35s cubic-bezier(.2,.8,.2,1)':'none';
          track.style.transform='translateX(calc(-'+(index*100)+'% + '+curX+'px))';
          dots.forEach(function(d,i){d.classList.toggle('is-on',i===index);});
        }
        function onDown(e){
          dragging=true;curX=0;startX=getX(e);
          track.classList.add('is-dragging');
          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;
          track.classList.remove('is-dragging');
          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);
        render(false);
      })();