{"dist":{"shasum":"f09ebf45be3eb70ca0c9272e707e5ab66a726af4","tarball":"https://registry.npmjs.org/rax-slider/-/rax-slider-2.3.10-1.tgz","fileCount":106,"integrity":"sha512-nkrsJQhnQeWl/+0sE1PJtDR/7RKX+1eS8ENkprvKdI9cVjSkusY1VpyvjWtujKili8SoTbR85PgZOlM5QccoIQ==","signatures":[{"sig":"MEUCIHbC5RWRnM4nD41h4rDy3M84+36hikuDq7BKRLRJPRe8AiEA4fIUG90e8K86ZvZPYSMYI8kmaCEB0lvzJ82Bx99GFKM=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":186647,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJfbYMwCRA9TVsSAnZWagAArSsP/iB4+mgKTuQCBICuGV8z\nljNScTOfWTnAsx4jYJandwEgTWAX0vnHIGcHSbWPIUr0zL3JV9ahj3YWbYLv\nATpjyf7u5/iLrD7B8D3HCZjObnCHiLKm4J01f38f4jWsYm9J5dur7ZveX0BO\nAcMCTedhuPxL8gQ7LUjlkyiI0oZQNPm+IddOwGiot2pjd/9DJAb88nrE0Uk9\nb+Yrur+0ZFK1QLzXXeoR2WEKkFCPwWccDk2gJdC9FHvw+epYznDHtkaQbww2\nDX2oApAmZhkbWgGwAJ0vaYoYJ9N7bz6S2BsrgGtddtLY4HDUmG1ZoAaA7A8s\n1Szz7+proGqSS9/UPe6NijsTJIG9uI2onHKMUyhzRmo4OR4BSybjOJYyOGta\njvMS1/+94+Ev2+K/HHV0fgF/A1j55zfMDEulNychfF/9yufXM1ja95tUbkgg\nsXkr2uB+37uVVZ0ubZQ/AbBoaStkoSV/PNPSnau97H2J/FiI8uyXAiF+GoJi\nVlQK1x7jL/Qy6GLQRIdkQn99T6tRc3hq3xMpyJXDl7r7KkHtmCNK1hn1VzqE\nAOA5eqb6CILRfPk49ibl7gnYPbcE6v3gDl2+TySlSwqz+sLlcz6TD05cXMHa\n7umiAljzxfd8+GlvgnFSdcmn93IwRgWf3ifkfMUjzsAHHrKPaeIgB36UQ5j1\nfN5f\r\n=UT0z\r\n-----END PGP SIGNATURE-----\r\n"},"main":"lib/index.js","name":"rax-slider","author":{"name":"rax"},"readme":"[![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. `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","engines":{"npm":">=3.0.0"},"license":"BSD-3-Clause","scripts":{"build":"../../node_modules/.bin/build-scripts build --config ../../build.json","start":"../../node_modules/.bin/build-scripts start --config ../../build.json","prepublishOnly":"npm run build"},"_npmUser":{"name":"rax-publisher","email":"rax-public@alibaba-inc.com"},"keywords":["Rax","rax-component"],"_npmVersion":"6.14.6","description":"Slider component for Rax.","directories":{},"maintainers":[{"name":"rax-publisher","email":"rax-public@alibaba-inc.com"}],"_nodeVersion":"10.22.1","dependencies":{"rax-view":"^1.1.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/wechat-miniprogram/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_2.3.10-1_1601012527994_0.37939616806526044","host":"s3://npm-registry-packages"},"_id":"rax-slider@2.3.10-1","version":"2.3.10-1"}