{"bugs":{"url":"https://github.com/alibaba/rax/issues"},"dist":{"shasum":"0b26abb57c9910f996960cf948458b11904fcc40","tarball":"https://registry.npmjs.org/rax-slider/-/rax-slider-1.1.0-9.tgz","fileCount":36,"integrity":"sha512-KXLpH/28B5rrR7loH1uwFAHukX1fVDHFJRFLtLaOqbSxgSag0WFTOfWM3FaEpbg+A17f2iTqSg8vJYhsNNo79w==","signatures":[{"sig":"MEYCIQDT3iU10FQN/NybrkDmW5EIGilbZmawG1kUD9GtAdU4fAIhAPiM44+7om4MpQLuFoSGYc2rux0PlwYp+3df47weYkqI","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":60256,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJdnTnKCRA9TVsSAnZWagAAgEEP/jhN2qxN5ApG0xXFsNvr\nlltHE+dOPUBThUosF+2PkWm6CJMmDXasEkFG9KJ+WHKGKaUtoUBl5vQj7lJb\nMBATrFRyWzF1Yh1HKb30rB0KfcKbTzePdkWEihLLMUeDUclL3Lne5X4vsZKM\nLeaRAxFaDUlKD1BPucUQjT0IWLQzpCp/+S2+EsOCsBg3noUvGR9NHJj/cMxe\nvqN1OIP4aWNwiMgcYCYagLXs5nS7uvOt0zOlkeaHUW2JH65BGbADnID8RX5/\nvOx8z57acLFZjqrq5OyqD0UAJbI4KVSVIBICwrMVRkYv7e7Ea8abVVd03a1i\n9A81BLruns5S6QDJnRROs5hBPd0cpF4xnj5YVYCjT5abyYdTjfe7zhM4DIGU\nc2FFeXtW+nKXuQPtPTAHwhhQWc9gN8PrmTBuc9R3y/yoz8PzYkd35Ae5/wAk\nvmM06fh1f0Bzlmm1deE8w2VEhOXp4nusSrzfjwqj6qhBY9+f98VC+b0qqZIu\nFTxl4V4vC7XE3zZUq5guOcZL9KMF439IJ1vZHpIDQXXkVzKLDzyWboondV5k\nTaLcbJoWZbtkld1cnRP0WUqtOnqWpmpiv+Pf5LPsw9Oqk/3aMbcmdQcDTQ87\nqtdzoqjnZ703y1SE7oB9QwVqqd9Kr1u7nZpHD5MBg2V/aqzGLCRe18Uhuwy0\neh8g\r\n=z32s\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/universal-toast.svg)](https://www.npmjs.com/package/universal-toast)\n\n## 支持\nWeb / Weex / 小程序\n\n**描述：**\n轮播组件，就是以幻灯片的方式，在页面中横向展示诸多内容的组件。 轮播内容相互独立，前后在内容以及数据上都不存在逻辑关系。\n\n## 安装\n\n```bash\n$ npm install rax-slider --save\n```\n\n\n## 属性\n注：\n1. **支持**列表中的 <img alt=\"browser\" src=\"https://gw.alicdn.com/tfs/TB1uYFobGSs3KVjSZPiXXcsiVXa-200-200.svg\" width=\"25px\" height=\"25px\" />代表h5 <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\" />代表小程序\n1. web 环境中 slider 内部默认做了节点的懒加载渲染，不再需要使用 picture 的 lazyload做懒加载\n1. paginationStyle 默认样式如下，其中 itemColor 用来定义分页原点的颜色，itemSelectedColor 用来定义分页原点激活时的颜色，itemSize 用来定义分页圆点的大小\n```js\n{\n  position: 'absolute',\n  width: props.width,\n  height: '40rem',\n  bottom: '20rem',\n  left: 0,\n  itemColor: 'rgba(255, 255, 255, 0.5)',\n  itemSelectedColor: 'rgb(255, 80, 0)',\n  itemSize: '8rem'\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\" />  |\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\" />  |\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\" />  |   \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\" />  |\n| paginationStyle     | `Object` | null          | 否              | 自己定义指示点的样式，否则默认样式居中 | <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\" />  |\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\" />  |\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\" />  |\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\" />  |\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\" />  |\n\n## 方法\n\n### `Slider.slideTo(index: number)`\n\n#### 参数\n| **属性** | **类型** | **默认值** | **必填** | **描述**            | \n| -------- | -------- | ---------- | ------------ | ------------------- |\n| index  | `number` | -          | 是           | 滚动到指定页面            | \n\n\n## 示例\n[在线 Demo](https://jsplayground.taobao.org/raxplayground/6c55f298-601d-4181-a777-560a1934697e)\n```js\nimport { createElement, Component, render, createRef } from 'rax';\nimport View from 'rax-view';\nimport Image from 'rax-image';\nimport Slider from '../src/index';\nimport DU from 'driver-universal';\n\nlet 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\nclass App extends Component {\n\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 className=\"slider\" width=\"750\" height=\"500\" 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          <View style={styles.itemWrap}>\n            <Image style={styles.image} source={{height: 500, width: 375, uri: '//gw.alicdn.com/tfs/TB19NbqKFXXXXXLXVXXXXXXXXXX-750-500.png'}} />\n          </View>\n          <View style={styles.itemWrap}>\n            <Image style={styles.image} source={{height: 500, width: 375, uri: '//gw.alicdn.com/tfs/TB1tWYBKFXXXXatXpXXXXXXXXXX-750-500.png'}} />\n          </View>\n          <View style={styles.itemWrap}>\n            <Image style={styles.image} source={{height: 500, width: 375, uri: '//gw.alicdn.com/tfs/TB1SX_vKFXXXXbyXFXXXXXXXXXX-750-500.png'}} />\n          </View>\n        </Slider>\n\n        <View onClick={this.onClick}>Click</View>\n      </View>\n    );\n  }\n}\n\nrender(<App />, document.body, { driver: DU });\n```\n\n\n","engines":{"npm":">=3.0.0"},"gitHead":"f3f1900489107c8a99e08a870522ea0a8530d29c","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":"recover758126","email":"761647716@qq.com"},"homepage":"https://github.com/raxjs/rax-slider#readme","keywords":["Rax","rax-component","react-component"],"repository":{"url":"git+https://github.com/raxjs/rax-slider.git","type":"git"},"_npmVersion":"6.11.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":"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","babel-eslint":"^10.0.3","rax-children":"^1.0.0","rax-proptypes":"^1.0.0","universal-env":"^1.0.0","driver-universal":"^2.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","@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.0-9_1570585034297_0.13346974567287084","host":"s3://npm-registry-packages"},"_id":"rax-slider@1.1.0-9","version":"1.1.0-9"}