前後ボタン式レビューカルーセル

<div class="d06-01-03-box">
          <div class="d06-01-03-track">
            <blockquote class="d06-01-03-slide"><div class="d06-01-03-stars">★★★★★</div><p>期待以上の対応で感動しました。友人にも紹介しています。</p><cite>佐藤 様</cite></blockquote>
            <blockquote class="d06-01-03-slide"><div class="d06-01-03-stars">★★★★★</div><p>納期も早く、品質も高い。ずっとお願いしたいと思います。</p><cite>H.N 様</cite></blockquote>
            <blockquote class="d06-01-03-slide"><div class="d06-01-03-stars">★★★★☆</div><p>相談しやすい雰囲気で、些細なことも聞けて助かりました。</p><cite>鈴木 様</cite></blockquote>
          </div>
          <button class="d06-01-03-nav d06-01-03-prev" aria-label="前へ">◀</button>
          <button class="d06-01-03-nav d06-01-03-next" aria-label="次へ">▶</button>
          <div class="d06-01-03-dots"></div>
        </div>

.d06-01-03{background:linear-gradient(135deg,#ecfeff,#eff6ff)}
        .d06-01-03-box{position:relative;width:320px;overflow:hidden}
        .d06-01-03-track{display:flex;transition:transform .5s cubic-bezier(.6,.05,.3,1)}
        .d06-01-03-slide{flex:0 0 100%;margin:0;background:#fff;border-radius:16px;padding:28px 24px;box-shadow:0 8px 22px rgba(30,90,120,.12);min-height:170px;display:flex;flex-direction:column;justify-content:center}
        .d06-01-03-stars{color:#ffb400;letter-spacing:2px;margin-bottom:12px}
        .d06-01-03-slide p{margin:0 0 16px;color:#22404a;font-size:14px;line-height:1.8}
        .d06-01-03-slide cite{font-style:normal;font-weight:700;color:#0f3540;font-size:13px}
        .d06-01-03-nav{position:absolute;top:50%;transform:translateY(-50%);width:34px;height:34px;border:none;border-radius:50%;background:#0ea5e9;color:#fff;cursor:pointer;font-size:13px;box-shadow:0 4px 12px rgba(14,165,233,.4);transition:background .2s}
        .d06-01-03-nav:hover{background:#0284c7}
        .d06-01-03-prev{left:4px}.d06-01-03-next{right:4px}
        .d06-01-03-dots{display:flex;justify-content:center;gap:8px;margin-top:12px}
        .d06-01-03-dots span{width:8px;height:8px;border-radius:50%;background:#bae6fd;cursor:pointer;transition:background .2s,width .2s}
        .d06-01-03-dots span.is-on{background:#0ea5e9;width:20px;border-radius:4px}

(function(){
        var root=document.getElementById('item-06-01-03');if(!root)return;
        var track=root.querySelector('.d06-01-03-track'),slides=root.querySelectorAll('.d06-01-03-slide');
        var dotsWrap=root.querySelector('.d06-01-03-dots'),i=0,n=slides.length;
        for(var k=0;k<n;k++){var d=document.createElement('span');d.dataset.i=k;dotsWrap.appendChild(d);}
        var dots=dotsWrap.querySelectorAll('span');
        function go(x){i=(x+n)%n;track.style.transform='translateX(-'+(i*100)+'%)';dots.forEach(function(d,j){d.classList.toggle('is-on',j===i);});}
        root.querySelector('.d06-01-03-prev').addEventListener('click',function(){go(i-1);});
        root.querySelector('.d06-01-03-next').addEventListener('click',function(){go(i+1);});
        dotsWrap.addEventListener('click',function(e){if(e.target.dataset.i!==undefined)go(+e.target.dataset.i);});
        go(0);
      })();