{
 "slug": "carousel",
 "mode": "single",
 "curated": true,
 "examples": [
  {
   "id": "carousel-ex-1",
   "title": "基础用法",
   "titleSrc": "",
   "desc": "",
   "html": "<div class=\"kole-carousel\" id=\"app\"></div>",
   "preview": {
    "show": [
     [
      0
     ]
    ],
    "hide": [],
    "mode": "single"
   },
   "previewSafe": true,
   "previewUnsafeReasons": [],
   "source": "curated",
   "code": {
    "html": "<div class=\"kole-carousel\"></div>",
    "jsx": "import { KoleCarousel } from 'kole-ui/react';\n\nconst items = [\n  { text: '促销活动一', color: '#2F54EB' },\n  { text: '新品上市', color: '#13C2C2' },\n  { text: '会员专享', color: '#722ED1' },\n  { text: '限时秒杀', color: '#8C5A00' }\n];\n\nfunction handleChange(index) {\n  console.log(index);\n}\n\n<KoleCarousel items={items} autoplay interval={3000} onChange={handleChange} />",
    "vue3": "<template>\n  <KoleCarousel :items=\"items\" :autoplay=\"true\" :interval=\"3000\" />\n</template>\n\n<script setup>\nimport { KoleCarousel } from 'kole-ui/vue3';\n\nconst items = [\n  { text: '促销活动一', color: '#2F54EB' },\n  { text: '新品上市', color: '#13C2C2' },\n  { text: '会员专享', color: '#722ED1' },\n  { text: '限时秒杀', color: '#8C5A00' }\n];\n</script>",
    "vue2": "<template>\n  <KoleCarousel :items=\"items\" :autoplay=\"true\" :interval=\"3000\" />\n</template>\n\n<script>\nimport { KoleCarousel } from 'kole-ui/vue2';\n\nexport default {\n  components: { KoleCarousel },\n  data() {\n    return {\n      items: [\n        { text: '促销活动一', color: '#2F54EB' },\n        { text: '新品上市', color: '#13C2C2' },\n        { text: '会员专享', color: '#722ED1' },\n        { text: '限时秒杀', color: '#8C5A00' }\n      ]\n    };\n  }\n};\n</script>",
    "tsx": "import { KoleCarousel } from 'kole-ui/react';\n\ninterface CarouselItem {\n  text: string;\n  color: string;\n}\n\ninterface CarouselConfig {\n  autoplay: boolean;\n  interval: number;\n}\n\nconst items: ReadonlyArray<CarouselItem> = [\n  { text: '促销活动一', color: '#2F54EB' },\n  { text: '新品上市', color: '#13C2C2' },\n  { text: '会员专享', color: '#722ED1' },\n  { text: '限时秒杀', color: '#8C5A00' },\n];\n\nconst config: CarouselConfig = { autoplay: true, interval: 3000 };\n\nfunction handleChange(index: number): void {\n  console.log(index);\n}\n\n<KoleCarousel items={items} autoplay={config.autoplay} interval={config.interval} onChange={handleChange} />",
    "vue3ts": "<template>\n  <KoleCarousel :items=\"items\" :autoplay=\"config.autoplay\" :interval=\"config.interval\" />\n</template>\n\n<script setup lang=\"ts\">\nimport { KoleCarousel } from 'kole-ui/vue3';\n\ninterface CarouselItem {\n  text: string;\n  color: string;\n}\n\ninterface CarouselConfig {\n  autoplay: boolean;\n  interval: number;\n}\n\nconst items: ReadonlyArray<CarouselItem> = [\n  { text: '促销活动一', color: '#2F54EB' },\n  { text: '新品上市', color: '#13C2C2' },\n  { text: '会员专享', color: '#722ED1' },\n  { text: '限时秒杀', color: '#8C5A00' },\n];\n\nconst config: CarouselConfig = { autoplay: true, interval: 3000 };\n</script>",
    "vue2ts": "<template>\n  <div>\n    <KoleCarousel :items=\"items\" :autoplay=\"config.autoplay\" :interval=\"config.interval\" />\n  </div>\n</template>\n\n<script lang=\"ts\">\nimport Vue from 'vue';\nimport { KoleCarousel } from 'kole-ui/vue2';\n\ninterface CarouselItem {\n  text: string;\n  color: string;\n}\n\ninterface CarouselConfig {\n  autoplay: boolean;\n  interval: number;\n}\n\nexport default Vue.extend({\n  components: { KoleCarousel },\n  data(): { items: ReadonlyArray<CarouselItem>; config: CarouselConfig } {\n    return {\n      items: [\n        { text: '促销活动一', color: '#2F54EB' },\n        { text: '新品上市', color: '#13C2C2' },\n        { text: '会员专享', color: '#722ED1' },\n        { text: '限时秒杀', color: '#8C5A00' },\n      ],\n      config: { autoplay: true, interval: 3000 },\n    };\n  },\n});\n</script>"
   },
   "notes": [
    "依据 frameworks/Carousel.html:15-20 的 DATA 四条（text/color）与 :49 setInterval(..., 3000) 的自动播放间隔；prop 名取自 frameworks/Carousel.jsx:4（items/autoplay/interval）",
    "TS 形态依据 TS-VARIANTS.md：tsx 用 interface CarouselItem / CarouselConfig + onChange(index: number): void（autoplay/interval 见 Carousel.jsx 形参）；vue3ts/vue2ts 用 <script lang=\"ts\"> + ReadonlyArray<CarouselItem>；不引入 kole-ui 的类型（本仓库不随包发布 .d.ts）"
   ]
  }
 ]
}