{"bugs":{"url":"https://github.com/alibaba/rax/issues"},"dist":{"shasum":"7e22be06776e43026eba3ea14e77ddace6594162","tarball":"https://registry.npmjs.org/rax-slider/-/rax-slider-1.1.0-4.tgz","fileCount":36,"integrity":"sha512-rWRTfI95HFjHZFWweFP7CS+qAbmGuMg3SDPS9H2xRT5p+WvbOOuu6HKDZyE01qELTruJtiA242KCkzPnaxcXWw==","signatures":[{"sig":"MEYCIQD2y4RnBCjbcboH1pjLimIEMxgNnpA1F7LudypUBO8qZwIhAJlidO+Whq/ydjwssWdj6+axlaU8xzRzpaoQ0tKzUJne","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":60356,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJdm2pLCRA9TVsSAnZWagAAjzwP/0MkTCfqaosjgusid/1b\ntfXAKAspJNpSKABf6+J8sbJLYKIK1FnmBpvQ99Z/NkPJTmZbz+xAOYXM55sT\nZaQaZnoD4NTz6lpoRyhe6vZv4Vlda28QS4qux+Ygg3Fq7rQswDjl4DbVmJEC\nXGLgzwidDOTBucslzIrLer0wQ2Qc1VrrQGwkBKRnnmtdBKIv1YP6fMo4cWiV\nB5oUBGL6WfEAqeVGWsM/U1WUQHMnggAdJM/ecpFvs2Xbtr9kJMnokC6/0Qb1\nqdG/De9/99cZrx6eZRgv2FUezN1UlZKpK98XR9ajzOAu/M1BAVIsuf3cR6Rj\ny+2+WvzVZ8ZQkZa5wrkD1RzkNZZBvOeWall80iMloh8VSM+l1STTuT/gZxUt\nHPE7J6uaD07GVvZR+Ijukpt5MNxH3njckpY44oNSBEQw3+wGGGbAi2IT8O6F\nzlOX93Olcv+VBH7HvQqo2gsyZHCjNditqp0aqhzJcYy7TqBDwdVMRnxCVA2a\nXoTUWMeNsIpy6WZiTP/FBXs4uRWGpVIYYkyeyWl47WQS4T6/jQJTGnOvzERy\nXae3wJBQTn6ggLfx0fc56jNjcYKu2GIZDxDm3A+9cLgxWUedYLILlem64bC8\nW1OtXdiZuCXEs8y8pYTrv6oQg1V8cC9gWSfJwMIKzL1A0952AbuIjsODm2F0\nrK30\r\n=9huy\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":"0ffaf6d559d581748509c7614a6ceb25d4a9d473","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"],"deprecated":"deprecated","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","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-beta.5","@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-4_1570466379126_0.8852959642778626","host":"s3://npm-registry-packages"},"_id":"rax-slider@1.1.0-4","version":"1.1.0-4"}