ミニカルーセル

<div class="d07-01-07-carousel">
          <div class="d07-01-07-view">
            <div class="d07-01-07-track">
              <div class="d07-01-07-slide d07-01-07-sl1"><span>🌄</span><em>スライド 1</em></div>
              <div class="d07-01-07-slide d07-01-07-sl2"><span>🏞️</span><em>スライド 2</em></div>
              <div class="d07-01-07-slide d07-01-07-sl3"><span>🌌</span><em>スライド 3</em></div>
            </div>
            <button class="d07-01-07-nav d07-01-07-prev" type="button" aria-label="前へ">‹</button>
            <button class="d07-01-07-nav d07-01-07-next" type="button" aria-label="次へ">›</button>
          </div>
          <div class="d07-01-07-dots">
            <button class="d07-01-07-dot is-active" type="button" aria-label="1枚目"></button>
            <button class="d07-01-07-dot" type="button" aria-label="2枚目"></button>
            <button class="d07-01-07-dot" type="button" aria-label="3枚目"></button>
          </div>
        </div>

.d07-01-07-carousel{display:flex;flex-direction:column;gap:10px;align-items:center}
        .d07-01-07-view{position:relative;width:230px;height:150px;border-radius:12px;overflow:hidden;box-shadow:0 8px 20px rgba(0,0,0,.15)}
        .d07-01-07-track{display:flex;height:100%;transition:transform .45s cubic-bezier(.4,0,.2,1)}
        .d07-01-07-slide{flex:0 0 100%;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:4px;color:#fff}
        .d07-01-07-slide span{font-size:44px}
        .d07-01-07-slide em{font-size:12px;font-style:normal;opacity:.9}
        .d07-01-07-sl1{background:linear-gradient(135deg,#f97316,#db2777)}
        .d07-01-07-sl2{background:linear-gradient(135deg,#14b8a6,#0284c7)}
        .d07-01-07-sl3{background:linear-gradient(135deg,#4338ca,#0f172a)}
        .d07-01-07-nav{position:absolute;top:50%;transform:translateY(-50%);width:30px;height:30px;border:none;border-radius:50%;background:rgba(255,255,255,.85);color:#0f172a;font-size:18px;line-height:1;cursor:pointer;transition:background .2s ease;display:flex;align-items:center;justify-content:center}
        .d07-01-07-nav:hover{background:#fff}
        .d07-01-07-prev{left:8px}
        .d07-01-07-next{right:8px}
        .d07-01-07-dots{display:flex;gap:8px}
        .d07-01-07-dot{width:9px;height:9px;padding:0;border:none;border-radius:50%;background:#cbd5e1;cursor:pointer;transition:background .25s ease,transform .25s ease}
        .d07-01-07-dot.is-active{background:#0f172a;transform:scale(1.25)}

(function(){
        var root=document.querySelector('#item-07-01-07 .d07-01-07-carousel');if(!root)return;
        var track=root.querySelector('.d07-01-07-track');
        var dots=root.querySelectorAll('.d07-01-07-dot');
        var total=3,idx=0;
        function go(i){
          idx=(i+total)%total;
          track.style.transform='translateX(-'+(idx*100)+'%)';
          dots.forEach(function(d,n){d.classList.toggle('is-active',n===idx);});
        }
        root.querySelector('.d07-01-07-prev').addEventListener('click',function(){go(idx-1);});
        root.querySelector('.d07-01-07-next').addEventListener('click',function(){go(idx+1);});
        dots.forEach(function(d,n){d.addEventListener('click',function(){go(n);});});
      })();