{"_id":"@ambilight-taro/carousel","name":"@ambilight-taro/carousel","dist-tags":{"latest":"1.0.0"},"versions":{"1.0.0":{"name":"@ambilight-taro/carousel","version":"1.0.0","description":"![NPM Version](https://img.shields.io/npm/v/%40ambilight-taro%2Fcarousel) ![NPM Downloads](https://img.shields.io/npm/dm/%40ambilight-taro%2Fcarousel)","main":"./lib/index.js","types":"./lib/index.d.ts","scripts":{"test":"echo \"Error: no test specified\" && exit 1","build":"rollup -c","build:watch":"rollup -cw"},"repository":{"type":"git","url":"git+https://github.com/pesce-salato/ambilight-taro-ui.git"},"author":"","license":"MIT","bugs":{"url":"https://github.com/pesce-salato/ambilight-taro-ui/issues"},"homepage":"https://github.com/pesce-salato/ambilight-taro-ui#readme","devDependencies":{"@ambilight-taro/rollup-config":"*","@ambilight-taro/tsconfig":"*","@tarojs/components":"3.6.19","@tarojs/taro":"3.6.19","@types/react":"^18.2.38","react":"^18.0.0","rollup":"^4.5.1","typescript":"^5.3.2"},"dependencies":{"@ambilight-taro/basic-view":"^1.0.0","@ambilight-taro/core":"^1.0.0","@ambilight-taro/use-compatible-uncontrolled-value":"^1.0.0","@ambilight-taro/use-shadow-state":"^1.0.0"},"gitHead":"9ab8a57d0a8fda45ebfa6bd4e46e8ab04a420935","_id":"@ambilight-taro/carousel@1.0.0","_nodeVersion":"20.18.2","_npmVersion":"lerna/7.4.2/node@v20.18.2+arm64 (darwin)","dist":{"integrity":"sha512-ffWKVs2fXVTxRgvgnb2LepGeOjKywyMbMqHVIRZwF+mPBa6SF0C0zOn2bOyFJgsVloVP3gnu3jdwAsiJm3mUCg==","shasum":"ae84f45475912af73ed88eb7fd8f53df4e49fb12","tarball":"https://registry.npmjs.org/@ambilight-taro/carousel/-/carousel-1.0.0.tgz","fileCount":11,"unpackedSize":24237,"signatures":[{"keyid":"SHA256:DhQ8wR5APBvFHLF/+Tc+AYvPOdTpcIDqOhxsBHRwC7U","sig":"MEYCIQDRcj41pBGbnDiV6Ad+jcLdEIJAidreqCpxp6anN+GPDAIhAPiRJRjLm+34yARHSFo8ayPHNU84NvYJMWSQSCxavtwB"}]},"_npmUser":{"name":"chicken_bro","email":"ordinary_person@outlook.com"},"directories":{},"maintainers":[{"name":"chicken_bro","email":"ordinary_person@outlook.com"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages-npm-production","tmp":"tmp/carousel_1.0.0_1742741475223_0.5741737067371984"},"_hasShrinkwrap":false}},"time":{"created":"2025-03-23T14:51:15.134Z","1.0.0":"2025-03-23T14:51:15.411Z","modified":"2025-03-23T14:51:15.678Z"},"maintainers":[{"name":"chicken_bro","email":"ordinary_person@outlook.com"}],"description":"![NPM Version](https://img.shields.io/npm/v/%40ambilight-taro%2Fcarousel) ![NPM Downloads](https://img.shields.io/npm/dm/%40ambilight-taro%2Fcarousel)","homepage":"https://github.com/pesce-salato/ambilight-taro-ui#readme","repository":{"type":"git","url":"git+https://github.com/pesce-salato/ambilight-taro-ui.git"},"bugs":{"url":"https://github.com/pesce-salato/ambilight-taro-ui/issues"},"license":"MIT","readme":"# @ambilight-taro/carousel\n\n![NPM Version](https://img.shields.io/npm/v/%40ambilight-taro%2Fcarousel)\n![NPM Downloads](https://img.shields.io/npm/dm/%40ambilight-taro%2Fcarousel)\n\n## Installation\n\n```shell\nnpm install @ambilight-taro/carousel\n```\n\n## Usage\n\n轮播图组件，每一项都可完全自定义\n\n组件会将**每一个子节点**渲染成一个轮播选项\n\n> 组件会在初始化的时候自动查询组件本身宽高，故而需注意：\n>\n> 在初次渲染的时候就保证组件的尺寸是预期且后续不改变（组件默认会和父容器高度一致，可通过样式来设定组件、选项高度）\n> - `direction='horizontal'` 横向轮播则需要保证宽度不变\n> - `direction='vertical'` 纵向轮播则需要保证高度不变\n\n### Basic\n\n```tsx\n<AlCarousel>\n  <View style={{ color: 'red' }}>\n    0\n  </View>\n  <View  style={{ color: 'blue' }}>\n    1\n  </View>\n  <View style={{ color: 'black' }}>\n    2\n  </View>\n  <View style={{ color: 'gray' }}>\n    3\n  </View>\n</AlCarousel>\n```\n\n### 轮播方向\n\n```tsx\n<AlCarousel direction=\"vertical\">\n  {/* children */}\n</AlCarousel>\n```\n\n### 指示器样式\n\n```tsx\n<AlCarousel indicatorVariant=\"combine\">\n  {/* children */}\n</AlCarousel>\n```\n\n### 指示器位置\n\n```tsx\n<AlCarousel indicatorPosition=\"top\">\n  {/* children */}\n</AlCarousel>\n```\n\n### 禁用指示器\n\n```tsx\n<AlCarousel indicatorDisabled>\n  {/* children */}\n</AlCarousel>\n```\n\n### 调整自动切换周期\n\n```tsx\n// 禁用自动切换\n<AlCarousel duration={0}>\n  {/* children */}\n</AlCarousel>\n\n// 禁用自动切换\n<AlCarousel duration={2000}>\n  {/* children */}\n</AlCarousel>\n```\n\n\n## Props & Types\n\n```tsx\nexport interface AlCarouselProps {\n  /**\n   * 轮播方向\n   * @default 'horizontal'\n   */\n  direction?: AlCarouselDirection\n  /**\n   * 指示器样式\n   * @default 'dot'\n   */\n  indicatorVariant?: AlCarouselIndicatorVariant\n  /**\n   * 指示器位置\n   * @default 'bottom'\n   */\n  indicatorPosition?: AlCarouselIndicatorPosition\n  /**\n   * 禁用指示器\n   * @default false\n   */\n  indicatorDisabled?: boolean\n  /**\n   * 自动切换周期(ms)\n   * - 0 代表无需自动切换\n   * @default 0\n   */\n  duration?: number\n  /**\n   * 当前展示下标\n   */\n  value?: number\n  /**\n   * 当前展示下标（非受控，默认值）\n   * @default 0\n   */\n  defaultValue?: number\n  /**\n   * 当前展示 index 变化事件\n   */\n  onChange?: (v: number) => void\n\n  children?: React.ReactNode\n  className?: string\n  style?: React.CSSProperties | string\n}\n```\n\n```tsx\ntype AlCarouselDirection = \"vertical\" | \"horizontal\"\n\ntype AlCarouselIndicatorVariant = \"combine\" | \"dot\" | \"line\" | \"slider\"\n\ntype AlCarouselIndicatorPosition = \"bottom\" | \"left\" | \"bottom-end\" | \"right\" | \"bottom-start\" | \"top\"\n```\n\n","readmeFilename":"README.md","_rev":"1-3df41dbbf3c127736dd74f256c03cc7a"}