{"bugs":{"url":"https://github.com/alibaba/rax/issues"},"dist":{"shasum":"58ab8a830ad8e5b23b614e7d36a3ad79ad1bca1d","tarball":"https://registry.npmjs.org/rax-slider/-/rax-slider-1.1.1-beta.2.tgz","fileCount":48,"integrity":"sha512-4GS+qSTaTroIlJhepRlZ8B5gvGlKG4qa8SA9q6JWZIUk1qUY11d41tZkz2xB3PKTDsG/6poPv5Uogr+rG0vw0A==","signatures":[{"sig":"MEYCIQC2Myl3UzAxxcdDdbPZWXBCIZ4+Qc3AX8kPTLQSc3SAZgIhAODAzb04b1nWUaG+Ki1t//P0/i3zFhD5cIpf9fmUZMRr","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":67661,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJdv57dCRA9TVsSAnZWagAALaYP/ijPmuVGDu2+webDT3pI\nwPGMMLmJhulr9zhuz9H2IgywzMetP8Qhmp6j5ulP+ZvZ0dyuTXHxKx6z1cKt\np689apyXz8boAv5xTmbjz4b5Br+Qjc8Vxn6ZgfCAD2bLH7MSLzS9ifI2Zhyg\naMQo4SB22vEbaPr419wvWm8vZoGoXldsZG7Qcy9uh4k++A8/pWFOxWUzVK0A\nal4cxqal9K/pqxjumWSx/LJT+w1ieRHReCafPDsn/jKtu4lIO/pzUa7N83dP\n7NTLoqSH7VLmi5AfaytbRYeHFoP0jdKB4oeyvBe8lIQZ5ljjMKBeFdkr/1H0\nTxkISHwhLOh/rpWWjBraEH/TMN8rUhsNCT4uIJcRBWceUJp7tSl38t7eHTTx\n7Q/WXOE4tr4dIOVw9IV7nhU37MN6ElR9GGmtZtEIhY7CnrQy9/CEDIs2SXSS\n1XEwJd1jf3oCYpiK3zYGKJLpod6W0RTzlDPM72c684iBHvnzOEtdZxb2UtwM\nunO1nERwI5uB1ZwnpMep1A67BB3hiK0kpMyMqOQ6s9/cJ2M86Pp3HZTBdCN1\npJQiCCaOw5KaHJ4rLtD46kwb4ZLPOPiAJMXGp7r16FQ4ipE9E9ZdjaqHKrJM\nHjFjuCHYZPYs7KEVhHKN+5/VxyE4vYOQ1fbqtQOSwI9PeOaKRGcP+e6qT9pd\n3ChE\r\n=1nCI\r\n-----END PGP SIGNATURE-----\r\n"},"main":"lib/index.js","name":"rax-slider","husky":{"hooks":{"pre-commit":"lint-staged"}},"readme":"[![npm](https://img.shields.io/npm/v/rax-slider.svg)](https://www.npmjs.com/package/rax-slider)\n\n## 描述\n\n轮播组件，就是以幻灯片的方式，在页面中横向展示诸多内容的组件。 轮播内容相互独立，前后在内容以及数据上都不存在逻辑关系。\n\n## 安装\n\n```bash\n$ npm install rax-slider --save\n```\n\n## 属性\n\n注：\n\n1. **支持**列表中的 <img alt=\"browser\" src=\"https://gw.alicdn.com/tfs/TB1uYFobGSs3KVjSZPiXXcsiVXa-200-200.svg\" width=\"25px\" height=\"25px\" />代表 Web <img alt=\"weex\" src=\"https://gw.alicdn.com/tfs/TB1jM0ebMaH3KVjSZFjXXcFWpXa-200-200.svg\" width=\"25px\" height=\"25px\" />代表 Weex <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\"> 代表微信小程序\n2. Web 环境中 slider 内部默认做了节点的懒加载渲染，不再需要使用 picture 的`lazyload`做懒加载\n3. `paginationStyle`中`itemColor` 用来定义分页原点的颜色，`itemSelectedColor` 用来定义分页原点激活时的颜色，`itemSize`用来定义分页圆点的大小，小程序只支持设置 `itemColor` `用来定义分页原点的颜色，itemSelectedColor`，默认样式如下：\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\"> |\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\"> |\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\"> |\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\"> |\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\"> |\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\"> |\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\"> |\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\"> |\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\"> |\n\n## 方法\n\n### `Slider.slideTo(index: number)`\n\n#### 参数\n\n| **属性** | **类型** | **默认值** | **必填** | **描述**       |\n| -------- | -------- | ---------- | -------- | -------------- |\n| index    | `number` | -          | 是       | 滚动到指定索引的 View |\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          <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          <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          <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>\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":{"lint":"eslint --ext .js --ext .jsx --ext .ts --ext .tsx ./src","test":"npm run build && rax-scripts test","build":"npm run clean && rax-scripts build","clean":"rm -rf ./lib && rm -rf ./package-lock.json && rm -f ./yarn.lock && rm -rf demo/miniapp/lib","start":"rax-scripts start","prepublishOnly":"npm run build"},"_npmUser":{"name":"solojiang","email":"feifeishen1996@gmail.com"},"homepage":"https://github.com/raxjs/rax-slider#readme","keywords":["Rax","rax-component","react-component"],"repository":{"url":"git+https://github.com/raxjs/rax-components.git","type":"git"},"_npmVersion":"6.10.3","description":"Slider component for Rax.","directories":{},"lint-staged":{"*.{js,jsx,ts,tsx}":["eslint --fix","git add"]},"maintainers":[{"name":"amdgigabyte","email":"amdgigabyte@gmail.com"},{"name":"liangzhi.llz","email":"liangzhi.llz@alibaba-inc.com"},{"name":"marc.hy","email":"marc.hy@alibaba-inc.com"},{"name":"recover758126","email":"761647716@qq.com"},{"name":"solojiang","email":"feifeishen1996@gmail.com"},{"name":"wintercn","email":"csf178@gmail.com"},{"name":"yacheng","email":"narutosun2@163.com"},{"name":"yuanyan","email":"yuanyan.cao@gmail.com"},{"name":"zeroling","email":"wssgcg1213@qq.com"}],"_nodeVersion":"10.16.0","dependencies":{"rax-view":"^1.1.0-0","classnames":"^2.2.6","rax-children":"^1.0.0","rax-proptypes":"^1.0.0","universal-env":"^1.0.0","rax-clone-element":"^1.0.0","rax-find-dom-node":"^1.0.0","universal-panresponder":"^0.6.5"},"miniappConfig":{"main":"lib/miniapp/index","propsMap":{"onEndReachedThreshold":"endReachedThreshold"},"tagNameMap":"rax-swiper","childWrapTag":"swiper-item","childWrapTagProps":{}},"_hasShrinkwrap":false,"readmeFilename":"README.md","devDependencies":{"rax":"^1.0.0","husky":"^3.0.5","eslint":"^5.10.0","csstype":"^2.6.4","rax-image":"^1.0.1-beta.0","typescript":"^3.5.2","@types/jest":"^24.0.12","lint-staged":"^9.2.5","rax-scripts":"^2.0.0","babel-eslint":"^10.0.3","@rax-types/rax":"^1.0.5","@types/ali-app":"^1.0.0","driver-universal":"^1.0.0","@types/classnames":"^2.2.9","eslint-config-rax":"^0.0.0","rax-test-renderer":"^1.0.0","eslint-plugin-react":"~7.11.1","eslint-plugin-import":"^2.14.0","rax-plugin-component":"^0.1.9","jest-localstorage-mock":"^2.3.0","@typescript-eslint/parser":"^1.7.0","@typescript-eslint/eslint-plugin":"^1.7.0"},"peerDependencies":{"rax":"^1.0.0"},"_npmOperationalInternal":{"tmp":"tmp/rax-slider_1.1.1-beta.2_1572839133161_0.36681255921546474","host":"s3://npm-registry-packages"},"_id":"rax-slider@1.1.1-beta.2","version":"1.1.1-beta.2"}