<!DOCTYPE html>
<html lang="zh-CN">
<head>
  <meta charset="UTF-8" />
  <meta name="viewport" content="width=device-width, initial-scale=1.0" />
  <title>Kole UI · Carousel（普通 H5）</title>
  <link rel="stylesheet" href="../.design_library/kole-ui/colors_and_type.css" />
  <link rel="stylesheet" href="Carousel.css" />
  <style>body{margin:0;padding:24px;background: var(--kole-color-page-bg);}</style>
</head>
<body>
  <div class="kole-carousel" id="app"></div>

  <script>
    var DATA = [
      { text: '促销活动一', color: '#2F54EB' },
      { text: '新品上市', color: '#13C2C2' },
      { text: '会员专享', color: '#722ED1' },
      { text: '限时秒杀', color: '#8C5A00' }
    ];
    var index = 0, timer = null;

    function render() {
      var root = document.getElementById('app');
      var slides = DATA.map(function (d) {
        return '<div class="kole-carousel-slide" style="background:' + d.color + '">' + d.text + '</div>';
      }).join('');
      var dots = DATA.map(function (_, i) {
        return '<span class="kole-carousel-dot ' + (i === index ? 'is-active' : '') + '" role="tab" tabindex="0" data-i="' + i + '"></span>';
      }).join('');
      root.innerHTML = '<div class="kole-carousel-track" style="transform:translateX(-' + (index * 100) + '%)">' + slides + '</div>' +
        '<button class="kole-carousel-arrow prev">‹</button>' +
        '<button class="kole-carousel-arrow next">›</button>' +
        '<div class="kole-carousel-dots">' + dots + '</div>';

      root.querySelector('.prev').onclick = function () { go(index - 1); };
      root.querySelector('.next').onclick = function () { go(index + 1); };
      root.querySelectorAll('.kole-carousel-dot').forEach(function (d) {
        d.onclick = function () { go(parseInt(d.dataset.i, 10)); };
      });
    }
    function go(i) {
      index = (i + DATA.length) % DATA.length;
      render();
      restart();
    }
    function restart() {
      if (timer) clearInterval(timer);
      timer = setInterval(function () { go(index + 1); }, 3000);
    }
    render();
    restart();
  </script>
</body>
</html>
