{"bugs":{"url":"https://github.com/alibaba/rax/issues"},"dist":{"shasum":"ac084b82872e56bf321d7926fa4c1ef55934411c","tarball":"https://registry.npmjs.org/rax-slider/-/rax-slider-1.1.0-2.tgz","fileCount":26,"integrity":"sha512-z1pF+FEA6DgYnDy73CXMf8ohXCfJXzdBBzKjbNa92GYNO3Yoy43zoe499WtnD6rrJzVnnaRYxQgDin2YwyDZrA==","signatures":[{"sig":"MEQCIFdFJ9NNTflax/2q2v6D/jBy3iR+s2+It8Nh6s7sSU8JAiAT6sKafW9IkwShCq2HBbczZV66STBGMis6QG3eY5Fbww==","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":54839,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJdehvXCRA9TVsSAnZWagAAH7EP/j4ZpUHYjwduvb5/3ULU\nb1dPvaspZhqfLERFeIG7TYHBYLEd6gIbHxoIg1cA239hRrR4Nk9TlbLZkEu+\nZLmWpcyKsBtf/YUVBhmSC3774ZtVQ9Q8OGlSpq9TrRTkRfp9oY9ZjrEtBQfi\nwuCH4AZZ9z0YF2Gxra0VXfSMJV9bKOvWi0GxZ8aEUcI8gL4ZfLajDuBsa3GM\n1qJlIyo+1ARoTIB4znMhmPvKRxdgPzp04p7P6jbXMFJVVOrXpELtGSEq4A6b\nYNDZVwaMe4PrRZkPJm6YkBa26tJEcSZIJ5qnj6NslbhEnezBKfW8K23Bklct\nmzyVxXz1Via7UKg8TkQQdspnnEB4k7RykcFQ6ZyTRSJ2M4CuvgFZun6AE6NE\nOcSJDocRe3VDiOZP5EbMRBAVju+QmQQXYICwieYa7TfSTNyrJI7PpDweUEoy\nzTq/ieIslN8HM8L7WQLLWMeEC1PdALOzuj5y8iNp9dSYbMout2xyHTQA4N0C\nqWk5pQR5vrTnqpdAd1oL4A6iiOsLyiUM6jJILtXx10wLZFKmCz/A6ySqv9qs\nZqIK5VXiKMRZLV4KbeBB/lx1GmQk1fnEujEbM3AewOTvGT42/raPbDrolw+t\nKxgHdCDlwV5ggMyyk8LeNGhVNUKUnBcERr4o/by2rLA7KtCRcT/EqVoHl692\n6iCT\r\n=jxHs\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":"141afa639a2eff5447c18eec89a21dc1d290eedf","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","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-2_1568283607245_0.1254761828835429","host":"s3://npm-registry-packages"},"_id":"rax-slider@1.1.0-2","version":"1.1.0-2"}