{"bugs":{"url":"https://github.com/raxjs/rax-components/issues"},"dist":{"shasum":"d0e79cd270f886bb2068ff84decc387537aaaa56","tarball":"https://registry.npmjs.org/rax-slider/-/rax-slider-3.1.0-0.tgz","fileCount":86,"integrity":"sha512-e3/kam5KpLtqTbQVuCgKKCDU4e4/zZwOeQ88eixALMrMpHOLonVt54jsqs9HUBsCadxzg84Oiw3ks0u0zGUJOA==","signatures":[{"sig":"MEUCIAdimeAIRtTg5tI7xiA5PLFh777nUV9ztLgkRI0kmQlpAiEAxwwV6kdaElMDLoI0zsQB9rgVt6vZMq3uXuis/AbnodI=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":187189,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJgfr5pCRA9TVsSAnZWagAAYpcQAIJpnqIVxvjbonU0M0na\nkyFE+NAdKcQRRdrhyzHNz8N8DTDssH1FoXhoRmDsaMWuXIzoLpPa0bqvnzv/\nTmTIujZT24o+QGUt/MiINCXOVhjI2ZRHQwqUqIe6FWJgNF/WDEnf8fIcdw1S\n29DdlX3k34rfKWDmzA49sNwQVA9oSithjzYCLAJ9ntewxlXHxDO7EXEF8HQt\nw3dIZtqfqoe/tKWEXbJ+jZ7q4LalGa2Ap+pAYca4xQPLytWqQWSL2bJK1mRw\n3NsWtWulTZ9nQOmPWJHFTDVgyJr+Re0YQ+UOGQmaCkBlhQ1B4GHgNmtajZaD\nMlsVmZm2SdCTVCHOcq9cewuV9cwUSB9wnK0GUoIRjX8BP0lq5S+zeThVqXMV\nxITp7pDZtGzn6VwM8KZjUwVbusZr19zd7NEqAG6CLrTQ4+9Os8JTXBkWkb7m\nJqn7X5OtS+FjE+Blnpfj729qTwfyH4wrDXkJufgbjOYKy6f4M4tM/P4Tt4EE\nfT2472GCT0SyGFt2PvjsU/ovcHOgooWbaWGguVrH4eYNE87wBTFRKQuF3lKp\ncs/dNK0mQpCNeQggXUW8qPktOqynsGqzmBAG7RIFUSryQPTt7gOK+WtIonas\nNl4HmL1HRGqUX0vDXV8H4QUvP0d/spQws0x5MRTe4J/0liuwy/66LNn6icXK\nf1cE\r\n=Uz1+\r\n-----END PGP SIGNATURE-----\r\n"},"main":"lib/index.js","name":"rax-slider","types":"lib/index.d.ts","module":"es/index.js","readme":"# rax-slider\n\n[![npm](https://img.shields.io/npm/v/rax-slider.svg)](https://www.npmjs.com/package/rax-slider)\n\n> 纯 Web 场景推荐使用 [rax-swiper](https://github.com/raxjs/rax-components/blob/master/packages/rax-swiper/README.md)\n\n## 支持\nWeb / Weex / 阿里小程序 / 微信小程序 / 字节跳动小程序\n\n## 描述\n\n轮播组件，就是以幻灯片的方式，在页面中横向展示诸多内容的组件。 轮播内容相互独立，前后在内容以及数据上都不存在逻辑关系。\n\n## 安装\n\n```bash\n$ npm install rax-slider --save\n```\n\n## 属性\n\n1. Web 环境中 slider 内部默认做了节点的懒加载渲染，不再需要使用 picture 的`lazyload`做懒加载\n2. 下方未列出的小程序独有属性，在编译时方案中需要按照驼峰式写法传递（如 `previous-margin` 需要写作 `previousMargin`），在运行时方案中则直接按照小程序官方文档提供的属性写法传递即可。\n3. `paginationStyle`中`itemColor` 用来定义分页原点的颜色，`itemSelectedColor` 用来定义分页原点激活时的颜色，`itemSize`用来定义分页圆点的大小，小程序只支持设置 `itemColor` `用来定义分页原点的颜色，itemSelectedColor`。快应用只支持`itemColor`、`itemSelectedColor`、`itemSize`三个用来定义分页圆点的样式。默认样式如下：\n\n```js\n{\n  position: 'absolute',\n  width: '40rpx',\n  height: '40rpx',\n  bottom: '20rem',\n  left: 0,\n  itemColor: 'rgba(255, 255, 255, 0.5)',\n  itemSelectedColor: 'rgb(255, 80, 0)',\n  itemSize: '8rpx'\n}\n```\n\n| **属性**         | **类型**   | **默认值** | **必填** | **描述**                               | **支持**                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                  |\n| ---------------- | ---------- | ---------- | -------- | -------------------------------------- | --------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- |\n| width            | `string`   | -          | 是       | Slider 的宽度                          | <img alt=\"browser\" src=\"https://gw.alicdn.com/tfs/TB1uYFobGSs3KVjSZPiXXcsiVXa-200-200.svg\" width=\"25px\" height=\"25px\" /> <img alt=\"weex\" src=\"https://gw.alicdn.com/tfs/TB1jM0ebMaH3KVjSZFjXXcFWpXa-200-200.svg\" width=\"25px\" height=\"25px\" /> <img alt=\"miniApp\" src=\"https://gw.alicdn.com/tfs/TB1bBpmbRCw3KVjSZFuXXcAOpXa-200-200.svg\" width=\"25px\" height=\"25px\" /> <img alt=\"wechatMiniprogram\" src=\"https://img.alicdn.com/tfs/TB1slcYdxv1gK0jSZFFXXb0sXXa-200-200.svg\" width=\"25px\" height=\"25px\"><img alt=\"bytedanceMicroApp\" src=\"https://gw.alicdn.com/tfs/TB1jFtVzO_1gK0jSZFqXXcpaXXa-200-200.svg\" width=\"25px\" height=\"25px\" /><img alt=\"quickApp\" src=\"https://gw.alicdn.com/tfs/TB1MP7EwQT2gK0jSZPcXXcKkpXa-200-200.svg\" width=\"25px\" height=\"25px\"> |\n| height           | `string`   | -          | 是       | Slider 的高度                          | <img alt=\"browser\" src=\"https://gw.alicdn.com/tfs/TB1uYFobGSs3KVjSZPiXXcsiVXa-200-200.svg\" width=\"25px\" height=\"25px\" /> <img alt=\"weex\" src=\"https://gw.alicdn.com/tfs/TB1jM0ebMaH3KVjSZFjXXcFWpXa-200-200.svg\" width=\"25px\" height=\"25px\" /> <img alt=\"miniApp\" src=\"https://gw.alicdn.com/tfs/TB1bBpmbRCw3KVjSZFuXXcAOpXa-200-200.svg\" width=\"25px\" height=\"25px\" /> <img alt=\"wechatMiniprogram\" src=\"https://img.alicdn.com/tfs/TB1slcYdxv1gK0jSZFFXXb0sXXa-200-200.svg\" width=\"25px\" height=\"25px\"><img alt=\"bytedanceMicroApp\" src=\"https://gw.alicdn.com/tfs/TB1jFtVzO_1gK0jSZFqXXcpaXXa-200-200.svg\" width=\"25px\" height=\"25px\" /><img alt=\"quickApp\" src=\"https://gw.alicdn.com/tfs/TB1MP7EwQT2gK0jSZPcXXcKkpXa-200-200.svg\" width=\"25px\" height=\"25px\"> |\n| autoPlay         | `boolean`  | false      | 否       | 是否自动播放                           | <img alt=\"browser\" src=\"https://gw.alicdn.com/tfs/TB1uYFobGSs3KVjSZPiXXcsiVXa-200-200.svg\" width=\"25px\" height=\"25px\" /> <img alt=\"weex\" src=\"https://gw.alicdn.com/tfs/TB1jM0ebMaH3KVjSZFjXXcFWpXa-200-200.svg\" width=\"25px\" height=\"25px\" /> <img alt=\"miniApp\" src=\"https://gw.alicdn.com/tfs/TB1bBpmbRCw3KVjSZFuXXcAOpXa-200-200.svg\" width=\"25px\" height=\"25px\" /> <img alt=\"wechatMiniprogram\" src=\"https://img.alicdn.com/tfs/TB1slcYdxv1gK0jSZFFXXb0sXXa-200-200.svg\" width=\"25px\" height=\"25px\"><img alt=\"bytedanceMicroApp\" src=\"https://gw.alicdn.com/tfs/TB1jFtVzO_1gK0jSZFqXXcpaXXa-200-200.svg\" width=\"25px\" height=\"25px\" /><img alt=\"quickApp\" src=\"https://gw.alicdn.com/tfs/TB1MP7EwQT2gK0jSZPcXXcKkpXa-200-200.svg\" width=\"25px\" height=\"25px\"> |\n| showsPagination  | `boolean`  | true       | 否       | 是否显示指示点                         | <img alt=\"browser\" src=\"https://gw.alicdn.com/tfs/TB1uYFobGSs3KVjSZPiXXcsiVXa-200-200.svg\" width=\"25px\" height=\"25px\" /> <img alt=\"weex\" src=\"https://gw.alicdn.com/tfs/TB1jM0ebMaH3KVjSZFjXXcFWpXa-200-200.svg\" width=\"25px\" height=\"25px\" /> <img alt=\"miniApp\" src=\"https://gw.alicdn.com/tfs/TB1bBpmbRCw3KVjSZFuXXcAOpXa-200-200.svg\" width=\"25px\" height=\"25px\" /> <img alt=\"wechatMiniprogram\" src=\"https://img.alicdn.com/tfs/TB1slcYdxv1gK0jSZFFXXb0sXXa-200-200.svg\" width=\"25px\" height=\"25px\"><img alt=\"bytedanceMicroApp\" src=\"https://gw.alicdn.com/tfs/TB1jFtVzO_1gK0jSZFqXXcpaXXa-200-200.svg\" width=\"25px\" height=\"25px\" /> |\n| paginationStyle  | `object`   | -       | 否       | 自己定义指示点的样式，否则默认样式居中 | <img alt=\"browser\" src=\"https://gw.alicdn.com/tfs/TB1uYFobGSs3KVjSZPiXXcsiVXa-200-200.svg\" width=\"25px\" height=\"25px\" /> <img alt=\"weex\" src=\"https://gw.alicdn.com/tfs/TB1jM0ebMaH3KVjSZFjXXcFWpXa-200-200.svg\" width=\"25px\" height=\"25px\" /> <img alt=\"miniApp\" src=\"https://gw.alicdn.com/tfs/TB1bBpmbRCw3KVjSZFuXXcAOpXa-200-200.svg\" width=\"25px\" height=\"25px\" /> <img alt=\"wechatMiniprogram\" src=\"https://img.alicdn.com/tfs/TB1slcYdxv1gK0jSZFFXXb0sXXa-200-200.svg\" width=\"25px\" height=\"25px\"><img alt=\"bytedanceMicroApp\" src=\"https://gw.alicdn.com/tfs/TB1jFtVzO_1gK0jSZFqXXcpaXXa-200-200.svg\" width=\"25px\" height=\"25px\" /> |\n| loop             | `boolean`  | true       | 否       | 是否是循环播放                         | <img alt=\"browser\" src=\"https://gw.alicdn.com/tfs/TB1uYFobGSs3KVjSZPiXXcsiVXa-200-200.svg\" width=\"25px\" height=\"25px\" /> <img alt=\"weex\" src=\"https://gw.alicdn.com/tfs/TB1jM0ebMaH3KVjSZFjXXcFWpXa-200-200.svg\" width=\"25px\" height=\"25px\" /> <img alt=\"miniApp\" src=\"https://gw.alicdn.com/tfs/TB1bBpmbRCw3KVjSZFuXXcAOpXa-200-200.svg\" width=\"25px\" height=\"25px\" /> <img alt=\"wechatMiniprogram\" src=\"https://img.alicdn.com/tfs/TB1slcYdxv1gK0jSZFFXXb0sXXa-200-200.svg\" width=\"25px\" height=\"25px\"><img alt=\"bytedanceMicroApp\" src=\"https://gw.alicdn.com/tfs/TB1jFtVzO_1gK0jSZFqXXcpaXXa-200-200.svg\" width=\"25px\" height=\"25px\" /> <img alt=\"quickApp\" src=\"https://gw.alicdn.com/tfs/TB1MP7EwQT2gK0jSZPcXXcKkpXa-200-200.svg\" width=\"25px\" height=\"25px\">|\n| index            | `number`   | 0          | 否       | 指定默认初始化第几页                   | <img alt=\"browser\" src=\"https://gw.alicdn.com/tfs/TB1uYFobGSs3KVjSZPiXXcsiVXa-200-200.svg\" width=\"25px\" height=\"25px\" /> <img alt=\"weex\" src=\"https://gw.alicdn.com/tfs/TB1jM0ebMaH3KVjSZFjXXcFWpXa-200-200.svg\" width=\"25px\" height=\"25px\" /> <img alt=\"miniApp\" src=\"https://gw.alicdn.com/tfs/TB1bBpmbRCw3KVjSZFuXXcAOpXa-200-200.svg\" width=\"25px\" height=\"25px\" /> <img alt=\"wechatMiniprogram\" src=\"https://img.alicdn.com/tfs/TB1slcYdxv1gK0jSZFFXXb0sXXa-200-200.svg\" width=\"25px\" height=\"25px\"><img alt=\"bytedanceMicroApp\" src=\"https://gw.alicdn.com/tfs/TB1jFtVzO_1gK0jSZFqXXcpaXXa-200-200.svg\" width=\"25px\" height=\"25px\" /> |\n| autoPlayInterval | `number`   | 3000       | 否       | 自动播放的间隔时间                     | <img alt=\"browser\" src=\"https://gw.alicdn.com/tfs/TB1uYFobGSs3KVjSZPiXXcsiVXa-200-200.svg\" width=\"25px\" height=\"25px\" /> <img alt=\"weex\" src=\"https://gw.alicdn.com/tfs/TB1jM0ebMaH3KVjSZFjXXcFWpXa-200-200.svg\" width=\"25px\" height=\"25px\" /> <img alt=\"miniApp\" src=\"https://gw.alicdn.com/tfs/TB1bBpmbRCw3KVjSZFuXXcAOpXa-200-200.svg\" width=\"25px\" height=\"25px\" /> <img alt=\"wechatMiniprogram\" src=\"https://img.alicdn.com/tfs/TB1slcYdxv1gK0jSZFFXXb0sXXa-200-200.svg\" width=\"25px\" height=\"25px\"><img alt=\"bytedanceMicroApp\" src=\"https://gw.alicdn.com/tfs/TB1jFtVzO_1gK0jSZFqXXcpaXXa-200-200.svg\" width=\"25px\" height=\"25px\" /> |\n| onChange         | `function` | -          | 否       | `index` 改变时会触发                   | <img alt=\"browser\" src=\"https://gw.alicdn.com/tfs/TB1uYFobGSs3KVjSZPiXXcsiVXa-200-200.svg\" width=\"25px\" height=\"25px\" /> <img alt=\"weex\" src=\"https://gw.alicdn.com/tfs/TB1jM0ebMaH3KVjSZFjXXcFWpXa-200-200.svg\" width=\"25px\" height=\"25px\" /> <img alt=\"miniApp\" src=\"https://gw.alicdn.com/tfs/TB1bBpmbRCw3KVjSZFuXXcAOpXa-200-200.svg\" width=\"25px\" height=\"25px\" /> <img alt=\"wechatMiniprogram\" src=\"https://img.alicdn.com/tfs/TB1slcYdxv1gK0jSZFFXXb0sXXa-200-200.svg\" width=\"25px\" height=\"25px\"><img alt=\"bytedanceMicroApp\" src=\"https://gw.alicdn.com/tfs/TB1jFtVzO_1gK0jSZFqXXcpaXXa-200-200.svg\" width=\"25px\" height=\"25px\" /> <img alt=\"quickApp\" src=\"https://gw.alicdn.com/tfs/TB1MP7EwQT2gK0jSZPcXXcKkpXa-200-200.svg\" width=\"25px\" height=\"25px\">|\n| direction         | `string` | horizontal   | 否       | Slider 滚动方向 (`horizontal` / `vertical`)            | <img alt=\"miniApp\" src=\"https://gw.alicdn.com/tfs/TB1bBpmbRCw3KVjSZFuXXcAOpXa-200-200.svg\" width=\"25px\" height=\"25px\" /> <img alt=\"wechatMiniprogram\" src=\"https://img.alicdn.com/tfs/TB1slcYdxv1gK0jSZFFXXb0sXXa-200-200.svg\" width=\"25px\" height=\"25px\"><img alt=\"bytedanceMicroApp\" src=\"https://gw.alicdn.com/tfs/TB1jFtVzO_1gK0jSZFqXXcpaXXa-200-200.svg\" width=\"25px\" height=\"25px\" /> <img alt=\"quickApp\" src=\"https://gw.alicdn.com/tfs/TB1MP7EwQT2gK0jSZPcXXcKkpXa-200-200.svg\" width=\"25px\" height=\"25px\">|\n\n## 方法\n\n### `Slider.slideTo(index: number)`\n\n#### 参数\n\n| **属性** | **类型** | **默认值** | **必填** | **描述**       |\n| -------- | -------- | ---------- | -------- | -------------- |\n| index    | `number` | -          | 是       | 滚动到指定索引的 View |\n\n## Slider.Item\n每一个需要被轮播的子元素需要被包裹在 `Slider.Item` 组件中，在 Weex 和 Web 该组件是 `Fragment` 空节点，在小程序该组件是 `swiper-item`。由于该节点没有实际意义，所以不要在该组件上设置样式和绑定事件。 如果只在 Web 和 Weex 中使用，每一个需要轮播的子项**无需**包裹 `Slider.Item` 组件。\n\n## 示例\n\n```jsx\nimport { createElement, Component, render, createRef } from 'rax';\nimport View from 'rax-view';\nimport Image from 'rax-image';\nimport Slider from 'rax-slider';\nimport DriverUniversal from 'driver-universal';\n\nclass App extends Component {\n  constructor(props) {\n    super(props);\n\n    this.inputRef = createRef();\n  }\n\n  onchange = index => {\n    console.log('change', index);\n  };\n\n  onClick = () => {\n    this.inputRef.current.slideTo(0);\n  };\n\n  render() {\n    return (\n      <View>\n        <Slider\n          className=\"slider\"\n          width=\"750\"\n          height=\"500\"\n          style={styles.slider}\n          autoPlay={true}\n          loop={true}\n          showsPagination={true}\n          paginationStyle={styles.paginationStyle}\n          autoplayTimeout={3000}\n          onChange={this.onchange}\n          ref={this.inputRef}\n        >\n          <Slider.Item>\n            <View style={styles.itemWrap}>\n              <Image\n                style={styles.image}\n                source={{\n                  height: 500,\n                  width: 375,\n                  uri:\n                    '//gw.alicdn.com/tfs/TB19NbqKFXXXXXLXVXXXXXXXXXX-750-500.png',\n                }}\n              />\n            </View>\n          </Slider.Item>\n          <Slider.Item>\n            <View style={styles.itemWrap}>\n              <Image\n                style={styles.image}\n                source={{\n                  height: 500,\n                  width: 375,\n                  uri:\n                    '//gw.alicdn.com/tfs/TB1tWYBKFXXXXatXpXXXXXXXXXX-750-500.png',\n                }}\n              />\n            </View>\n          </Slider.Item>\n          <Slider.Item>\n            <View style={styles.itemWrap}>\n              <Image\n                style={styles.image}\n                source={{\n                  height: 500,\n                  width: 375,\n                  uri:\n                    '//gw.alicdn.com/tfs/TB1SX_vKFXXXXbyXFXXXXXXXXXX-750-500.png',\n                }}\n              />\n            </View>\n          </Slider.Item>\n        </Slider>\n\n        <View onClick={this.onClick}>Click</View>\n      </View>\n    );\n  }\n}\n\nconst styles = {\n  slider: {\n    width: 750,\n    position: 'relative',\n    overflow: 'hidden',\n    height: 500,\n    backgroundColor: '#cccccc',\n  },\n  itemWrap: {\n    width: 750,\n    height: 500,\n  },\n  image: {\n    width: 750,\n    height: 500,\n  },\n  button: {\n    marginTop: 20,\n    width: 340,\n    height: 80,\n  },\n  paginationStyle: {\n    position: 'absolute',\n    width: 750,\n    height: 40,\n    bottom: 20,\n    left: 0,\n    itemColor: 'rgba(255, 255, 255, 0.5)',\n    itemSelectedColor: 'rgb(255, 80, 0)',\n    itemSize: 16,\n  },\n};\n\nrender(<App />, document.body, { driver: DriverUniversal });\n```\n","license":"BSD-3-Clause","scripts":{"build":"../../node_modules/.bin/build-scripts build --config ../../build.json --skip-demo","start":"../../node_modules/.bin/build-scripts start --config ../../build.json","prepublishOnly":"npm run build"},"_npmUser":{"name":"rax-publisher","email":"rax-public@alibaba-inc.com"},"homepage":"https://github.com/raxjs/rax-components#readme","keywords":["Rax","rax-component","react-component"],"repository":{"url":"git+https://github.com/raxjs/rax-components.git","type":"git"},"_npmVersion":"6.13.4","description":"Slider component for Rax.","directories":{},"maintainers":[{"name":"rax-publisher","email":"rax-public@alibaba-inc.com"}],"miniprogram":".","_nodeVersion":"12.5.0","dependencies":{"rax-view":"^2.0.0","classnames":"^2.2.6","prop-types":"^15.7.2","rax-children":"^1.0.0","universal-env":"^3.2.0","rax-clone-element":"^1.0.0","rax-find-dom-node":"^1.0.0","universal-panresponder":"^0.6.5"},"miniappConfig":{"main":"lib/miniapp/index","main:wechat":"lib/miniapp-wechat/index","main:quickapp":"lib/quickapp/index","subComponents":{"Item":{"tagNameMap":"swiper-item"}},"main:bytedance":"lib/bytedance-microapp/index"},"_hasShrinkwrap":false,"quickappConfig":{"main":"lib/quickapp/index"},"readmeFilename":"README.md","devDependencies":{"rax":"^1.1.0","rax-image":"^2.2.0","@types/rax":"^1.0.0","typescript":"^3.7.5","driver-universal":"^3.1.0","rax-test-renderer":"^1.0.0"},"peerDependencies":{"rax":"^1.1.0"},"_npmOperationalInternal":{"tmp":"tmp/rax-slider_3.1.0-0_1618919016737_0.5153463464171562","host":"s3://npm-registry-packages"},"_id":"rax-slider@3.1.0-0","version":"3.1.0-0"}