物件写真クロスフェードギャラリー

<div class="d10-13-04-gallery">
          <span class="d10-13-04-slide is-active" style="background:linear-gradient(135deg,#f6c453,#e2504a)"></span>
          <span class="d10-13-04-slide" style="background:linear-gradient(135deg,#7fd1c1,#2f7fef)"></span>
          <span class="d10-13-04-slide" style="background:linear-gradient(135deg,#a9c9ff,#5a6b7a)"></span>
          <div class="d10-13-04-dots">
            <button class="d10-13-04-dot is-active" data-i="0" type="button" aria-label="1枚目"></button>
            <button class="d10-13-04-dot" data-i="1" type="button" aria-label="2枚目"></button>
            <button class="d10-13-04-dot" data-i="2" type="button" aria-label="3枚目"></button>
          </div>
          <span class="d10-13-04-badge">3枚の写真</span>
        </div>

.d10-13-04{padding:0}
        .d10-13-04-gallery{position:absolute;inset:0;overflow:hidden;cursor:pointer}
        .d10-13-04-slide{position:absolute;inset:0;opacity:0;transition:opacity 1s ease}
        .d10-13-04-slide.is-active{opacity:1}
        .d10-13-04-dots{position:absolute;left:0;right:0;bottom:12px;display:flex;justify-content:center;gap:6px}
        .d10-13-04-dot{width:7px;height:7px;border-radius:50%;border:none;background:rgba(255,255,255,.55);cursor:pointer;padding:0}
        .d10-13-04-dot.is-active{background:#fff;transform:scale(1.3)}
        .d10-13-04-badge{position:absolute;left:12px;top:12px;background:rgba(0,0,0,.45);color:#fff;font-size:11px;padding:4px 10px;border-radius:999px}

(function(){
        var root=document.getElementById('item-10-13-04');if(!root)return;
        var gallery=root.querySelector('.d10-13-04-gallery');
        var slides=root.querySelectorAll('.d10-13-04-slide');
        var dots=root.querySelectorAll('.d10-13-04-dot');
        var idx=0,timer;
        function show(i){
          idx=(i+slides.length)%slides.length;
          slides.forEach(function(s,j){s.classList.toggle('is-active',j===idx);});
          dots.forEach(function(d,j){d.classList.toggle('is-active',j===idx);});
        }
        function restart(){
          clearInterval(timer);
          timer=setInterval(function(){show(idx+1);},2400);
        }
        dots.forEach(function(d){
          d.addEventListener('click',function(e){
            e.stopPropagation();
            show(parseInt(d.getAttribute('data-i'),10));
            restart();
          });
        });
        gallery.addEventListener('click',function(){
          show(idx+1);
          restart();
        });
        restart();
      })();