スライド式ガイド

<div class="d11-04-10-slider">
          <div class="d11-04-10-track">
            <div class="d11-04-10-slide"><div class="d11-04-10-emoji">📝</div><h4>記事を書く</h4><p>エディタで簡単に投稿を作成できます。</p></div>
            <div class="d11-04-10-slide"><div class="d11-04-10-emoji">🖼️</div><h4>画像を追加</h4><p>ドラッグ&ドロップでメディアを挿入。</p></div>
            <div class="d11-04-10-slide"><div class="d11-04-10-emoji">🚀</div><h4>公開する</h4><p>ワンクリックでサイトに反映されます。</p></div>
          </div>
          <div class="d11-04-10-ctrl">
            <button class="d11-04-10-prev" aria-label="前へ">‹</button>
            <div class="d11-04-10-dots">
              <span class="d11-04-10-dot on"></span><span class="d11-04-10-dot"></span><span class="d11-04-10-dot"></span>
            </div>
            <button class="d11-04-10-next" aria-label="次へ">›</button>
          </div>
        </div>

.d11-04-10{background:#f2f8f7}
        .d11-04-10 .d11-04-10-slider{width:100%;max-width:240px;background:#fff;border-radius:16px;overflow:hidden;box-shadow:0 10px 28px rgba(20,60,55,.12)}
        .d11-04-10 .d11-04-10-track{display:flex;transition:transform .4s cubic-bezier(.4,.9,.4,1)}
        .d11-04-10 .d11-04-10-slide{min-width:100%;box-sizing:border-box;padding:26px 22px;text-align:center}
        .d11-04-10 .d11-04-10-emoji{font-size:38px;margin-bottom:8px}
        .d11-04-10 .d11-04-10-slide h4{font-size:16px;color:#1e4a44;margin-bottom:6px}
        .d11-04-10 .d11-04-10-slide p{font-size:12px;line-height:1.6;color:#5c766f}
        .d11-04-10 .d11-04-10-ctrl{display:flex;align-items:center;justify-content:space-between;padding:12px 18px;border-top:1px solid #ecf3f1}
        .d11-04-10 .d11-04-10-ctrl button{width:28px;height:28px;border:none;border-radius:50%;background:#e3f0ec;color:#1e9e82;font-size:18px;line-height:1;cursor:pointer;transition:background .2s}
        .d11-04-10 .d11-04-10-ctrl button:hover{background:#1e9e82;color:#fff}
        .d11-04-10 .d11-04-10-dots{display:flex;gap:6px}
        .d11-04-10 .d11-04-10-dot{width:8px;height:8px;border-radius:50%;background:#cfe0da;transition:background .25s,width .25s}
        .d11-04-10 .d11-04-10-dot.on{background:#1e9e82;width:20px;border-radius:4px}

(function(){
        var root=document.querySelector('#item-11-04-10 .d11-04-10');
        if(!root)return;
        var track=root.querySelector('.d11-04-10-track'),dots=root.querySelectorAll('.d11-04-10-dot');
        var i=0,n=dots.length;
        function go(){
          track.style.transform='translateX(-'+(i*100)+'%)';
          dots.forEach(function(d,k){d.classList.toggle('on',k===i)});
        }
        root.querySelector('.d11-04-10-next').addEventListener('click',function(){i=(i+1)%n;go()});
        root.querySelector('.d11-04-10-prev').addEventListener('click',function(){i=(i-1+n)%n;go()});
        dots.forEach(function(d,k){d.addEventListener('click',function(){i=k;go()})});
      })();