🎠 幻灯片轮播

📋 可用字段

💻 使用示例（含轮播 JS）

<!-- 首页轮播 -->
<div class="banner-slider" id="bannerSlider">
  <div class="banner-slider-track">
    
  </div>
  <button class="banner-nav prev" onclick="bannerSliderPrev()">‹</button>
  <button class="banner-nav next" onclick="bannerSliderNext()">›</button>
  <div class="banner-dots" id="bannerDots"></div>
</div>

<script>
(function(){
  var slider = document.getElementById('bannerSlider');
  if (!slider) return;
  var track = slider.querySelector('.banner-slider-track');
  var slides = track.querySelectorAll('.banner-slide');
  var dots = slider.querySelector('.banner-dots');
  var idx = 0;
  slides.forEach(function(_, i){
    var dot = document.createElement('button');
    dot.className = 'banner-dot';
    dot.onclick = function(){ go(i); };
    dots.appendChild(dot);
  });
  function go(i){
    idx = (i + slides.length) % slides.length;
    track.style.transform = 'translateX(-' + (idx*100) + '%)';
    dots.querySelectorAll('.banner-dot').forEach(function(d, j){
      d.classList.toggle('active', j === idx);
    });
  }
  window.bannerSliderPrev = function(){ go(idx - 1); };
  window.bannerSliderNext = function(){ go(idx + 1); };
  go(0);
  setInterval(function(){ go(idx + 1); }, 5000);
})();
</script>