{"bugs":{"url":"https://github.com/alibaba/rax/issues"},"dist":{"shasum":"48cf7a74504cdf1adedfc8da8ad873bd9adb62af","tarball":"https://registry.npmjs.org/rax-slider/-/rax-slider-1.0.2-beta.tgz","fileCount":28,"integrity":"sha512-RQk1h7YJrzqoA7+5lgdi3CWh65UBuJQwb6lam/CC14Tcq5rMKNDyxTW8N/RcoPkocEgkfmu9JalDVlpZVT/TUg==","signatures":[{"sig":"MEQCIAU8ekkPf7r6Ek+XDliGte6DcgRqxD6UD1sRiRA7MwazAiAHnVvJhpAokFrapjSUDWQpWtTgYX+nc+vnWWHVLVxWPg==","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":59647,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJdOs8bCRA9TVsSAnZWagAA+awQAJXla/iGjKNf7b5/Vxdh\ncufluDU5xtNME2GQk0I13zjtsMT1AhPBD+8K4XKyr5KihKsrk0i3mp5INBu/\nF+iw+PRaKyDbpiY3V6iqRBxCXAFUrhIpdxdygOBxVSt1IDEtp84R+iUajjCx\nsGAy2kOVc9wUVgsB5YwBWU4wx34m9lsF+CKGAxOlgyRyondh2rtT3Xw/uCYx\naSPLU/s/AD7XKAIj62qRtADyx3shpdlci7pLTcd5uffoc2PCZ598NxhZI9BF\nP6zKz88h5lmg5hbVXPDgN4MFgN6vlKAELER9+V0wd1q50nEMaMh+nVp26DT6\no2x7rxrP4N0Fw9/Sq4PDSWrjYQZg23gL4e0Yty9652/HztZmRLBwcPs+hduC\nwngOLzI3CIra1imrYsHi09p1XCuXzJH2Ga3HWQhgRNednYiQhMGRhrfnKM0q\n7n7/ZC0AMwuV5fH0tzJ5B48OMfen3+Zkkr0ErRIlZoBEqp0h5F08i6JEnlAc\nYjW+Et0lCJkekj9sSwBYJ7uu1dysTwW/q5QT5rp6G/boLAQ3Hj3onxNa1WKg\nOM4IAjToMofAGbvRb4gn3n/lq/Pdq7Y+NzIJb75PKexacX7AqzmGBdyJqQrx\nZikzf5A36GTmJLvO0JncP+IQn4pWVDHdAQfCn5uR4wHyhg6QYPavmh5cW3Cu\n0hVe\r\n=GQCa\r\n-----END PGP SIGNATURE-----\r\n"},"main":"lib/index.js","name":"rax-slider","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| 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":"1e800298706214b1cb1c723a7e9f10fca6a2d631","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 --type 'component'","clean":"rm -rf ./lib && rm -rf ./package-lock.json","start":"rax-scripts start --type 'component' -p 8000","miniapp":"rax-scripts start --type 'component-miniapp'","prepublishOnly":"npm run build"},"_npmUser":{"name":"marc.hy","email":"marc.hy@alibaba-inc.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":"5.5.1","description":"Slider component for Rax.","directories":{},"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":"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":"8.9.1","dependencies":{"rax-view":"^1.0.1-beta.7","prop-types":"^15.7.2","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":"swiper","subComponents":{"View":{"tagNameMap":"swiper-item"}}},"_hasShrinkwrap":false,"readmeFilename":"README.md","devDependencies":{"rax":"^1.0.0","eslint":"^5.10.0","csstype":"^2.6.4","rax-image":"^1.0.1-beta.0","@types/jest":"^24.0.12","rax-scripts":"1.2.1","@rax-types/rax":"^1.0.5","@types/ali-app":"^1.0.0","driver-universal":"^1.0.0-beta.5","eslint-config-rax":"^0.0.0","rax-test-renderer":"^1.0.0","eslint-plugin-react":"~7.11.1","eslint-plugin-import":"^2.14.0","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.0.2-beta_1564135194702_0.6276928979934104","host":"s3://npm-registry-packages"},"_id":"rax-slider@1.0.2-beta","version":"1.0.2-beta"}