{"dist":{"shasum":"bf398e30ef90463b8504fa9e6a0c43d2418421e9","tarball":"https://registry.npmjs.org/rax-slider/-/rax-slider-2.3.7-0.tgz","fileCount":65,"integrity":"sha512-rpPOv6hepnwBgo4kXYcPEo0llU20paoQQNZRYpB0JlcjGCLgY2fD6gbh9nvNimWi9P+Ut6llFvYgj6zplaVlUA==","signatures":[{"sig":"MEYCIQCjLOKftGKtWFdRg3BMFYA/cJrv0uAmCIZUn23oyJBxrQIhALJFxcxL0DxABameRh+veZ+lDnku9lFo5TN8lX/3BoDb","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":99398,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJfRgoFCRA9TVsSAnZWagAAKWcQAIymC32sOEdIfG+Li0uQ\n/HRJj8RWBemX4yUlXCCh9sQP6WonUNC61Hwvd8E2n0XyvoYiroEQ1jrwudso\njMWe7googElcpTHhAAD8OY7ekLjkdX0zePf7tsv9KaNnDCs5dRgQ4hcLIcAe\nIN9kFXzSi1fsDvHIAd2kjB4z3ZFVswyFBlb8CyvROlLJo2WEnYOZijAv18lL\nekq9dPL85bS3RgDxQE05/zQ0TGAHUOJfNPdOgv64cY2GLpmfmo4V+tUF3xdg\n89J8cwLKFzb3U6cwhzYtMRS8qlXyfcooxhWaoiRyoZFHxcEUnLrMLREbdko/\neRPgSc4j0bhpfc3QHyze4SKqb+rYM8GxoByh7WH6kzI40jUYcJUEEao86TyF\nFdwqmC3l7GkKQ20SLP59BQQVwuJd/69KyPB8ud+9o/ty5B8deniSjtjPS8hq\n1jV4FbeqrS9NZJnf9gS2OjQ6737gA+zppJmT4qaJKX8ed5Z1r/EDx3uFfJOR\nThnXOXflAci7AsMx9Rplth1cLJhrdC9K0zMHWTdXz/+RzvOQJQ2K19WmAavU\np2vFtb2XVt7U2tqly8TLw7QkZfLyoC0RZmba0elNZQcyqovsBV1Q1aax4mbW\nMcW8MDb2cOLVW/hZ+uyFSPXDdcferFFOlutE+MXCswaYfhG9wL9z7fwn+7oz\nFJ1g\r\n=IzzY\r\n-----END PGP SIGNATURE-----\r\n"},"main":"lib/index.js","name":"rax-slider","author":{"name":"rax"},"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\"> 代表微信小程序<img alt=\"bytedanceMicroApp\" src=\"https://gw.alicdn.com/tfs/TB1jFtVzO_1gK0jSZFqXXcpaXXa-200-200.svg\" width=\"25px\" height=\"25px\" /> 代表头条小程序<img alt=\"quickApp\" src=\"https://gw.alicdn.com/tfs/TB1MP7EwQT2gK0jSZPcXXcKkpXa-200-200.svg\" width=\"25px\" height=\"25px\">代表快应用\n2. Web 环境中 slider 内部默认做了节点的懒加载渲染，不再需要使用 picture 的`lazyload`做懒加载\n3. `paginationStyle`中`itemColor` 用来定义分页原点的颜色，`itemSelectedColor` 用来定义分页原点激活时的颜色，`itemSize`用来定义分页圆点的大小，小程序只支持设置 `itemColor` `用来定义分页原点的颜色，itemSelectedColor`。快应用只支持`itemColor`、`itemSelectedColor`、`itemSize`三个用来定义分页圆点的样式。默认样式如下：\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\"><img alt=\"bytedanceMicroApp\" src=\"https://gw.alicdn.com/tfs/TB1jFtVzO_1gK0jSZFqXXcpaXXa-200-200.svg\" width=\"25px\" height=\"25px\" /><img alt=\"quickApp\" src=\"https://gw.alicdn.com/tfs/TB1MP7EwQT2gK0jSZPcXXcKkpXa-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\"><img alt=\"bytedanceMicroApp\" src=\"https://gw.alicdn.com/tfs/TB1jFtVzO_1gK0jSZFqXXcpaXXa-200-200.svg\" width=\"25px\" height=\"25px\" /><img alt=\"quickApp\" src=\"https://gw.alicdn.com/tfs/TB1MP7EwQT2gK0jSZPcXXcKkpXa-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\"><img alt=\"bytedanceMicroApp\" src=\"https://gw.alicdn.com/tfs/TB1jFtVzO_1gK0jSZFqXXcpaXXa-200-200.svg\" width=\"25px\" height=\"25px\" /><img alt=\"quickApp\" src=\"https://gw.alicdn.com/tfs/TB1MP7EwQT2gK0jSZPcXXcKkpXa-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\"><img alt=\"bytedanceMicroApp\" src=\"https://gw.alicdn.com/tfs/TB1jFtVzO_1gK0jSZFqXXcpaXXa-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\"><img alt=\"bytedanceMicroApp\" src=\"https://gw.alicdn.com/tfs/TB1jFtVzO_1gK0jSZFqXXcpaXXa-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\"><img alt=\"bytedanceMicroApp\" src=\"https://gw.alicdn.com/tfs/TB1jFtVzO_1gK0jSZFqXXcpaXXa-200-200.svg\" width=\"25px\" height=\"25px\" /> <img alt=\"quickApp\" src=\"https://gw.alicdn.com/tfs/TB1MP7EwQT2gK0jSZPcXXcKkpXa-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\"><img alt=\"bytedanceMicroApp\" src=\"https://gw.alicdn.com/tfs/TB1jFtVzO_1gK0jSZFqXXcpaXXa-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\"><img alt=\"bytedanceMicroApp\" src=\"https://gw.alicdn.com/tfs/TB1jFtVzO_1gK0jSZFqXXcpaXXa-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\"><img alt=\"bytedanceMicroApp\" src=\"https://gw.alicdn.com/tfs/TB1jFtVzO_1gK0jSZFqXXcpaXXa-200-200.svg\" width=\"25px\" height=\"25px\" /> <img alt=\"quickApp\" src=\"https://gw.alicdn.com/tfs/TB1MP7EwQT2gK0jSZPcXXcKkpXa-200-200.svg\" width=\"25px\" height=\"25px\">|\n| direction         | `string` | horizontal   | 否       | Slider 滚动方向 (`horizontal` / `vertical`)            | <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\"><img alt=\"bytedanceMicroApp\" src=\"https://gw.alicdn.com/tfs/TB1jFtVzO_1gK0jSZFqXXcpaXXa-200-200.svg\" width=\"25px\" height=\"25px\" /> <img alt=\"quickApp\" src=\"https://gw.alicdn.com/tfs/TB1MP7EwQT2gK0jSZPcXXcKkpXa-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## Slider.Item\n每一个需要被轮播的子元素需要被包裹在 `Slider.Item` 组件中，在 Weex 和 Web 该组件是 `Fragment` 空节点，在小程序该组件是 `swiper-item`。由于该节点没有实际意义，所以不要在该组件上设置样式和绑定事件。 如果只在 Web 和 Weex 中使用，每一个需要轮播的子项**无需**包裹 `Slider.Item` 组件。\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          <Slider.Item>\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          </Slider.Item>\n          <Slider.Item>\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          </Slider.Item>\n          <Slider.Item>\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.Item>\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":{"build":"../../node_modules/.bin/build-scripts build --config ../../build.json","start":"../../node_modules/.bin/build-scripts start --config ../../build.json"},"_npmUser":{"name":"rax-publisher","email":"rax-public@alibaba-inc.com"},"keywords":["Rax","rax-component"],"_npmVersion":"6.13.4","description":"Slider component for Rax.","directories":{},"maintainers":[{"name":"amdgigabyte","email":"amdgigabyte@gmail.com"},{"name":"marc.hy","email":"marc.hy@alibaba-inc.com"},{"name":"rax-publisher","email":"rax-publisher@zeroling.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":"12.5.0","dependencies":{"rax-view":"^1.1.0-0","classnames":"^2.2.6","prop-types":"^15.7.2","rax-children":"^1.0.0","universal-env":"^3.2.0","rax-clone-element":"^1.0.0","rax-find-dom-node":"^1.0.0","universal-panresponder":"^0.6.5"},"miniappConfig":{"main":"lib/miniapp/index","main:wechat":"lib/wechat-miniprogram/index","main:quickapp":"lib/quickapp/index","subComponents":{"Item":{"tagNameMap":"swiper-item"}},"main:bytedance":"lib/bytedance-microapp/index"},"_hasShrinkwrap":false,"quickappConfig":{"main":"lib/quickapp/index"},"readmeFilename":"README.md","devDependencies":{"rax":"^1.1.0","rax-image":"^2.2.0","@types/rax":"^1.0.0","typescript":"^3.7.5","driver-universal":"^3.1.0","rax-test-renderer":"^1.0.0"},"peerDependencies":{"rax":"^1.1.0"},"_npmOperationalInternal":{"tmp":"tmp/rax-slider_2.3.7-0_1598425605378_0.7869386475624924","host":"s3://npm-registry-packages"},"_id":"rax-slider@2.3.7-0","version":"2.3.7-0"}