@uiw/doc/web/static/js/1599.2e2028f1.chunk.js

UIW documentation website.

(self.webpackChunkwebsite=self.webpackChunkwebsite||[]).push([[1599],{4934:e=>{function n(e){var n=new Error("Cannot find module '"+e+"'");throw n.code="MODULE_NOT_FOUND",n}n.keys=()=>[],n.resolve=n,n.id=4934,e.exports=n},5301:(e,n,t)=>{"use strict";t.d(n,{Z:()=>h});var r=t(8573),a=t(6320),l=t(8563),u=t(7622),o=t(7937);const i={docinfo:"index_docinfo__3Vx8S",markdown:"index_markdown__hcQCp",markdownWrap:"index_markdownWrap__t60jR"};var c=t(4760);function s(){let e=arguments.length>0&&void 0!==arguments[0]?arguments[0]:{};const{path:n}=e,t=/^http/.test(n||"")?n:"https://github.com/uiwjs/uiw/blob/master/".concat(n);return(0,c.jsxs)("div",{className:i.docinfo,children:["\u72af\u4e86\u9519\u8bef\u8fd8\u662f\u60f3\u5bf9\u6587\u4ef6\u505a\u51fa\u8d21\u732e\uff1f",t&&(0,c.jsx)("a",{href:t,target:"_blank",rel:"noopener noreferrer",children:"\u5728Github\u4e0a\u7f16\u8f91\u672c\u9875\uff01"}),(0,c.jsx)("br",{}),(0,c.jsx)("a",{href:"https://github.com/uiwjs/uiw/issues",target:"_blank",rel:"noopener noreferrer",children:"\u53cd\u9988\u5efa\u8bae"}),(0,c.jsx)(o.Divider,{type:"vertical"}),(0,c.jsx)("a",{target:"_blank",rel:"noopener noreferrer",href:"https://github.com/uiwjs/uiw/issues/new",children:"\u63d0\u4ea4bug"}),(0,c.jsx)(o.Divider,{type:"vertical"}),(0,c.jsx)("a",{target:"_blank",rel:"noopener noreferrer",href:"https://github.com/uiwjs/uiw",children:"Github"}),(0,c.jsx)(o.Divider,{type:"vertical"}),(0,c.jsx)("a",{target:"_blank",rel:"noopener noreferrer",href:"https://github.com/kktjs/kkt",children:"kkt"}),(0,c.jsx)(o.Divider,{type:"vertical"}),(0,c.jsx)("a",{target:"_blank",rel:"noopener noreferrer",href:"https://github.com/kktjs/kkt-ssr",children:"@kkt/ssr"}),(0,c.jsx)(o.Divider,{type:"vertical"}),(0,c.jsx)("a",{target:"_blank",rel:"noopener noreferrer",href:"http://uiw.gitee.io",children:"\u56fd\u5185\u955c\u50cf"})]})}const d=a.ZP.Preview,f=a.ZP.Code,_=a.ZP.Toolbar,p=e=>{var n,t;let{node:u,components:o,data:i,...s}=e;const p=(0,r.useRef)(null),{headings:h,headingsList:m,...g}=s;(0,r.useEffect)((()=>{if(p.current){const e=p.current.parentElement;e&&e.parentElement&&e.parentElement.replaceChild(p.current,e)}}),[p]);const b=null===u||void 0===u||null===(n=u.position)||void 0===n?void 0:n.start.line,E=null===u||void 0===u||null===(t=u.data)||void 0===t?void 0:t.meta,v=(0,l.Mx)(E)||String(b),y=o["".concat(v)];if(v&&"function"===typeof y){const e=i[v].value||"",n=(0,l.aE)(E||"");return(0,c.jsxs)(a.ZP,{ref:p,children:[(0,c.jsx)(d,{style:{background:n.bg||"transparent"},children:(0,c.jsx)(y,{})}),(0,c.jsx)(_,{text:e,children:n.title||"Example"}),(0,c.jsx)(f,{children:(0,c.jsx)("pre",{...g})})]})}return(0,c.jsx)("code",{...g})};function h(e){return(0,c.jsxs)(r.Fragment,{children:[(0,c.jsx)(u.Z,{className:i.markdownWrap,source:e.source||"",disableCopy:!0,wrapperElement:{"data-color-mode":"light"},components:{code:n=>(0,c.jsx)(p,{...e,...n})}}),(0,c.jsx)(s,{path:e.path})]})}},7852:(e,n,t)=>{"use strict";t.r(n),t.d(n,{default:()=>u});const r={components:{21:function(){var e,n=(e=t(8573))&&e.__esModule?e:{default:e},r=t(7937);return function(){return n.default.createElement("div",{style:{display:"flex"}},n.default.createElement(r.Carousel,null,n.default.createElement("div",{style:{height:"100%",background:"#1EABCD"}},n.default.createElement("span",null,"1")),n.default.createElement("div",{style:{height:"100%",background:"#393b46"}},n.default.createElement("span",null,"2")),n.default.createElement("div",{style:{height:"100%",background:"#008EF0"}},n.default.createElement("span",null,"3")),n.default.createElement("div",{style:{height:"100%",background:"#393E48"}},n.default.createElement("span",null,"4"))),n.default.createElement("span",{style:{marginLeft:10}}),n.default.createElement(r.Carousel,{direction:"vertical"},n.default.createElement("div",{style:{height:"100%",background:"#1EABCD"}},n.default.createElement("span",null,"1")),n.default.createElement("div",{style:{height:"100%",background:"#393b46"}},n.default.createElement("span",null,"2")),n.default.createElement("div",{style:{height:"100%",background:"#008EF0"}},n.default.createElement("span",null,"3")),n.default.createElement("div",{style:{height:"100%",background:"#393E48"}},n.default.createElement("span",null,"4"))))}}(),66:function(){var e,n=(e=t(8573))&&e.__esModule?e:{default:e},r=t(7937);return function(){return n.default.createElement(r.Carousel,{palyTime:1e3,scrollTime:500},n.default.createElement("div",{style:{height:"100%",background:"#1EABCD"}},n.default.createElement("span",null,"1")),n.default.createElement("div",{style:{height:"100%",background:"#393b46"}},n.default.createElement("span",null,"2")),n.default.createElement("div",{style:{height:"100%",background:"#008EF0"}},n.default.createElement("span",null,"3")),n.default.createElement("div",{style:{height:"100%",background:"#393E48"}},n.default.createElement("span",null,"4")))}}(),94:function(){var e,n=(e=t(8573))&&e.__esModule?e:{default:e},r=t(7937);function a(e,n){return function(e){if(Array.isArray(e))return e}(e)||function(e,n){var t=null==e?null:"undefined"!=typeof Symbol&&e[Symbol.iterator]||e["@@iterator"];if(null!=t){var r,a,l,u,o=[],i=!0,c=!1;try{if(l=(t=t.call(e)).next,0===n){if(Object(t)!==t)return;i=!1}else for(;!(i=(r=l.call(t)).done)&&(o.push(r.value),o.length!==n);i=!0);}catch(e){c=!0,a=e}finally{try{if(!i&&null!=t.return&&(u=t.return(),Object(u)!==u))return}finally{if(c)throw a}}return o}}(e,n)||function(e,n){if(!e)return;if("string"===typeof e)return l(e,n);var t=Object.prototype.toString.call(e).slice(8,-1);"Object"===t&&e.constructor&&(t=e.constructor.name);if("Map"===t||"Set"===t)return Array.from(e);if("Arguments"===t||/^(?:Ui|I)nt(?:8|16|32)(?:Clamped)?Array$/.test(t))return l(e,n)}(e,n)||function(){throw new TypeError("Invalid attempt to destructure non-iterable instance.\nIn order to be iterable, non-array objects must have a [Symbol.iterator]() method.")}()}function l(e,n){(null==n||n>e.length)&&(n=e.length);for(var t=0,r=new Array(n);t<n;t++)r[t]=e[t];return r}return function(){var e=n.default.useRef(),t=a(n.default.useState(!0),2),l=t[0],u=t[1];return n.default.createElement(n.default.Fragment,null,n.default.createElement(r.Carousel,{ref:e,position:2,autoPlay:l,afterChange:function(e){return console.log("after",e)},beforeChange:function(e){return console.log("before",e)}},n.default.createElement("div",{style:{height:"100%",background:"#1EABCD"}},n.default.createElement("span",null,"1")),n.default.createElement("div",{style:{height:"100%",background:"#393b46"}},n.default.createElement("span",null,"2")),n.default.createElement("div",{style:{height:"100%",background:"#008EF0"}},n.default.createElement("span",null,"3")),n.default.createElement("div",{style:{height:"100%",background:"#393E48"}},n.default.createElement("span",null,"4"))),n.default.createElement("button",{onClick:function(){return e.current.gotoSlide(1)}},"\u8df3\u8f6c"),n.default.createElement("button",{onClick:function(){return e.current.prevSlide()}},"\u4e0a\u4e00\u5f20"),n.default.createElement("button",{onClick:function(){return e.current.nextSlide()}},"\u4e0b\u4e00\u5f20"),n.default.createElement("button",{onClick:function(){return u(!l)}},l?"\u6682\u505c":"\u5f00\u59cb"))}}()},data:{21:{name:21,meta:{},code:'"use strict";\n\nvar _react = _interopRequireDefault(require("react"));\nvar _uiw = require("uiw");\nfunction _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { "default": obj }; }\nreturn function Demo() {\n  return /*#__PURE__*/_react["default"].createElement("div", {\n    style: {\n      display: \'flex\'\n    }\n  }, /*#__PURE__*/_react["default"].createElement(_uiw.Carousel, null, /*#__PURE__*/_react["default"].createElement("div", {\n    style: {\n      height: \'100%\',\n      background: \'#1EABCD\'\n    }\n  }, /*#__PURE__*/_react["default"].createElement("span", null, "1")), /*#__PURE__*/_react["default"].createElement("div", {\n    style: {\n      height: \'100%\',\n      background: \'#393b46\'\n    }\n  }, /*#__PURE__*/_react["default"].createElement("span", null, "2")), /*#__PURE__*/_react["default"].createElement("div", {\n    style: {\n      height: \'100%\',\n      background: \'#008EF0\'\n    }\n  }, /*#__PURE__*/_react["default"].createElement("span", null, "3")), /*#__PURE__*/_react["default"].createElement("div", {\n    style: {\n      height: \'100%\',\n      background: \'#393E48\'\n    }\n  }, /*#__PURE__*/_react["default"].createElement("span", null, "4"))), /*#__PURE__*/_react["default"].createElement("span", {\n    style: {\n      marginLeft: 10\n    }\n  }), /*#__PURE__*/_react["default"].createElement(_uiw.Carousel, {\n    direction: "vertical"\n  }, /*#__PURE__*/_react["default"].createElement("div", {\n    style: {\n      height: \'100%\',\n      background: \'#1EABCD\'\n    }\n  }, /*#__PURE__*/_react["default"].createElement("span", null, "1")), /*#__PURE__*/_react["default"].createElement("div", {\n    style: {\n      height: \'100%\',\n      background: \'#393b46\'\n    }\n  }, /*#__PURE__*/_react["default"].createElement("span", null, "2")), /*#__PURE__*/_react["default"].createElement("div", {\n    style: {\n      height: \'100%\',\n      background: \'#008EF0\'\n    }\n  }, /*#__PURE__*/_react["default"].createElement("span", null, "3")), /*#__PURE__*/_react["default"].createElement("div", {\n    style: {\n      height: \'100%\',\n      background: \'#393E48\'\n    }\n  }, /*#__PURE__*/_react["default"].createElement("span", null, "4"))));\n};',language:"jsx",value:"import React from 'react';\nimport { Carousel } from 'uiw';\n\nexport default function Demo() {\n  return (\n    <div style={{ display:'flex' }}>\n      <Carousel>\n        <div style={{ height: '100%', background: '#1EABCD' }}>\n          <span>1</span>\n        </div>\n        <div style={{ height: '100%',  background: '#393b46' }}>\n          <span>2</span>\n        </div>\n        <div style={{ height: '100%',  background: '#008EF0' }}>\n          <span>3</span>\n        </div>\n        <div style={{ height: '100%',  background: '#393E48' }}>\n          <span>4</span>\n        </div>\n      </Carousel>\n      <span style={{marginLeft:10}}/>\n      <Carousel direction=\"vertical\" >\n        <div style={{ height: '100%', background: '#1EABCD' }}>\n          <span>1</span>\n        </div>\n        <div style={{ height: '100%',  background: '#393b46' }}>\n          <span>2</span>\n        </div>\n        <div style={{ height: '100%',  background: '#008EF0' }}>\n          <span>3</span>\n        </div>\n        <div style={{ height: '100%',  background: '#393E48' }}>\n          <span>4</span>\n        </div>\n      </Carousel>\n    </div>\n  );\n}"},66:{name:66,meta:{},code:'"use strict";\n\nvar _react = _interopRequireDefault(require("react"));\nvar _uiw = require("uiw");\nfunction _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { "default": obj }; }\nreturn function Demo() {\n  return /*#__PURE__*/_react["default"].createElement(_uiw.Carousel, {\n    palyTime: 1000,\n    scrollTime: 500\n  }, /*#__PURE__*/_react["default"].createElement("div", {\n    style: {\n      height: \'100%\',\n      background: \'#1EABCD\'\n    }\n  }, /*#__PURE__*/_react["default"].createElement("span", null, "1")), /*#__PURE__*/_react["default"].createElement("div", {\n    style: {\n      height: \'100%\',\n      background: \'#393b46\'\n    }\n  }, /*#__PURE__*/_react["default"].createElement("span", null, "2")), /*#__PURE__*/_react["default"].createElement("div", {\n    style: {\n      height: \'100%\',\n      background: \'#008EF0\'\n    }\n  }, /*#__PURE__*/_react["default"].createElement("span", null, "3")), /*#__PURE__*/_react["default"].createElement("div", {\n    style: {\n      height: \'100%\',\n      background: \'#393E48\'\n    }\n  }, /*#__PURE__*/_react["default"].createElement("span", null, "4")));\n};',language:"jsx",value:"import React from 'react';\nimport { Carousel } from 'uiw';\n\nexport default function Demo() {\n  return (\n    <Carousel palyTime={1000} scrollTime={500}>\n      <div style={{ height: '100%', background: '#1EABCD' }}>\n        <span>1</span>\n      </div>\n      <div style={{ height: '100%',  background: '#393b46' }}>\n        <span>2</span>\n      </div>\n      <div style={{ height: '100%',  background: '#008EF0' }}>\n        <span>3</span>\n      </div>\n      <div style={{ height: '100%',  background: '#393E48' }}>\n        <span>4</span>\n      </div>\n    </Carousel>\n  );\n}"},94:{name:94,meta:{},code:'"use strict";\n\nvar _react = _interopRequireDefault(require("react"));\nvar _uiw = require("uiw");\nfunction _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { "default": obj }; }\nfunction _slicedToArray(arr, i) { return _arrayWithHoles(arr) || _iterableToArrayLimit(arr, i) || _unsupportedIterableToArray(arr, i) || _nonIterableRest(); }\nfunction _nonIterableRest() { throw new TypeError("Invalid attempt to destructure non-iterable instance.\\nIn order to be iterable, non-array objects must have a [Symbol.iterator]() method."); }\nfunction _unsupportedIterableToArray(o, minLen) { if (!o) return; if (typeof o === "string") return _arrayLikeToArray(o, minLen); var n = Object.prototype.toString.call(o).slice(8, -1); if (n === "Object" && o.constructor) n = o.constructor.name; if (n === "Map" || n === "Set") return Array.from(o); if (n === "Arguments" || /^(?:Ui|I)nt(?:8|16|32)(?:Clamped)?Array$/.test(n)) return _arrayLikeToArray(o, minLen); }\nfunction _arrayLikeToArray(arr, len) { if (len == null || len > arr.length) len = arr.length; for (var i = 0, arr2 = new Array(len); i < len; i++) arr2[i] = arr[i]; return arr2; }\nfunction _iterableToArrayLimit(r, l) { var t = null == r ? null : "undefined" != typeof Symbol && r[Symbol.iterator] || r["@@iterator"]; if (null != t) { var e, n, i, u, a = [], f = !0, o = !1; try { if (i = (t = t.call(r)).next, 0 === l) { if (Object(t) !== t) return; f = !1; } else for (; !(f = (e = i.call(t)).done) && (a.push(e.value), a.length !== l); f = !0); } catch (r) { o = !0, n = r; } finally { try { if (!f && null != t["return"] && (u = t["return"](), Object(u) !== u)) return; } finally { if (o) throw n; } } return a; } }\nfunction _arrayWithHoles(arr) { if (Array.isArray(arr)) return arr; }\nreturn function Demo() {\n  var ref = _react["default"].useRef();\n  var _React$useState = _react["default"].useState(true),\n    _React$useState2 = _slicedToArray(_React$useState, 2),\n    autoPlay = _React$useState2[0],\n    autoPlaySet = _React$useState2[1];\n  return /*#__PURE__*/_react["default"].createElement(_react["default"].Fragment, null, /*#__PURE__*/_react["default"].createElement(_uiw.Carousel, {\n    ref: ref,\n    position: 2,\n    autoPlay: autoPlay,\n    afterChange: function afterChange(current) {\n      return console.log(\'after\', current);\n    },\n    beforeChange: function beforeChange(current) {\n      return console.log(\'before\', current);\n    }\n  }, /*#__PURE__*/_react["default"].createElement("div", {\n    style: {\n      height: \'100%\',\n      background: \'#1EABCD\'\n    }\n  }, /*#__PURE__*/_react["default"].createElement("span", null, "1")), /*#__PURE__*/_react["default"].createElement("div", {\n    style: {\n      height: \'100%\',\n      background: \'#393b46\'\n    }\n  }, /*#__PURE__*/_react["default"].createElement("span", null, "2")), /*#__PURE__*/_react["default"].createElement("div", {\n    style: {\n      height: \'100%\',\n      background: \'#008EF0\'\n    }\n  }, /*#__PURE__*/_react["default"].createElement("span", null, "3")), /*#__PURE__*/_react["default"].createElement("div", {\n    style: {\n      height: \'100%\',\n      background: \'#393E48\'\n    }\n  }, /*#__PURE__*/_react["default"].createElement("span", null, "4"))), /*#__PURE__*/_react["default"].createElement("button", {\n    onClick: function onClick() {\n      return ref.current.gotoSlide(1);\n    }\n  }, "\\u8DF3\\u8F6C"), /*#__PURE__*/_react["default"].createElement("button", {\n    onClick: function onClick() {\n      return ref.current.prevSlide();\n    }\n  }, "\\u4E0A\\u4E00\\u5F20"), /*#__PURE__*/_react["default"].createElement("button", {\n    onClick: function onClick() {\n      return ref.current.nextSlide();\n    }\n  }, "\\u4E0B\\u4E00\\u5F20"), /*#__PURE__*/_react["default"].createElement("button", {\n    onClick: function onClick() {\n      return autoPlaySet(autoPlay ? false : true);\n    }\n  }, autoPlay ? \'\u6682\u505c\' : \'\u5f00\u59cb\'));\n};',language:"jsx",value:"import React from 'react';\nimport { Carousel } from 'uiw';\n\nexport default function Demo() {\n\n  const ref=React.useRef()\n  const [autoPlay,autoPlaySet]=React.useState(true)\n\n  return (\n    <React.Fragment>\n      <Carousel\n        ref={ref}\n        position={2}\n        autoPlay={autoPlay}\n        afterChange={(current)=>console.log('after',current)}\n        beforeChange={(current)=>console.log('before',current)}\n      >\n        <div style={{ height: '100%', background: '#1EABCD' }}>\n          <span>1</span>\n        </div>\n        <div style={{ height: '100%',  background: '#393b46' }}>\n          <span>2</span>\n        </div>\n        <div style={{ height: '100%',  background: '#008EF0' }}>\n          <span>3</span>\n        </div>\n        <div style={{ height: '100%',  background: '#393E48' }}>\n          <span>4</span>\n        </div>\n      </Carousel>\n      <button onClick={() => ref.current.gotoSlide(1)}>\u8df3\u8f6c</button>\n      <button onClick={() => ref.current.prevSlide()}>\u4e0a\u4e00\u5f20</button>\n      <button onClick={() => ref.current.nextSlide()}>\u4e0b\u4e00\u5f20</button>\n      <button onClick={() =>autoPlaySet(autoPlay?false:true)}>{autoPlay?'\u6682\u505c':'\u5f00\u59cb'}</button>\n    </React.Fragment>\n  );\n}"}},source:"Carousel \u8d70\u9a6c\u706f\n===\n\n[![Buy me a coffee](https://img.shields.io/badge/Buy%20me%20a%20coffee-048754?logo=buymeacoffee)](https://jaywcjlove.github.io/#/sponsor)\n[![Open in unpkg](https://img.shields.io/badge/Open%20in-unpkg-blue)](https://uiwjs.github.io/npm-unpkg/#/pkg/@uiw/react-carousel/file/README.md)\n[![NPM Downloads](https://img.shields.io/npm/dm/@uiw/react-carousel.svg?style=flat)](https://www.npmjs.com/package/@uiw/react-carousel)\n[![npm version](https://img.shields.io/npm/v/@uiw/react-carousel.svg?label=@uiw/react-carousel)](https://npmjs.com/@uiw/react-carousel)\n\n\u6eda\u52a8\u64ad\u653e\u3002\u5728 v4.15.0+ \u6dfb\u52a0\u3002\n\n```jsx\nimport { Carousel } from 'uiw';\n// or\nimport Carousel from '@uiw/react-carousel';\n```\n\n## \u57fa\u7840\u7528\u6cd5\n\n\u6700\u7b80\u5355\u7684\u7528\u6cd5\u3002\n\n```jsx mdx:preview\nimport React from 'react';\nimport { Carousel } from 'uiw';\n\nexport default function Demo() {\n  return (\n    <div style={{ display:'flex' }}>\n      <Carousel>\n        <div style={{ height: '100%', background: '#1EABCD' }}>\n          <span>1</span>\n        </div>\n        <div style={{ height: '100%',  background: '#393b46' }}>\n          <span>2</span>\n        </div>\n        <div style={{ height: '100%',  background: '#008EF0' }}>\n          <span>3</span>\n        </div>\n        <div style={{ height: '100%',  background: '#393E48' }}>\n          <span>4</span>\n        </div>\n      </Carousel>\n      <span style={{marginLeft:10}}/>\n      <Carousel direction=\"vertical\" >\n        <div style={{ height: '100%', background: '#1EABCD' }}>\n          <span>1</span>\n        </div>\n        <div style={{ height: '100%',  background: '#393b46' }}>\n          <span>2</span>\n        </div>\n        <div style={{ height: '100%',  background: '#008EF0' }}>\n          <span>3</span>\n        </div>\n        <div style={{ height: '100%',  background: '#393E48' }}>\n          <span>4</span>\n        </div>\n      </Carousel>\n    </div>\n  );\n}\n```\n\n## \u63a7\u5236\u64ad\u653e\u9891\u7387\n\npalyTime\u8bbe\u7f6e\u6bcf\u5e27\u505c\u7559\u65f6\u95f4\uff0cscrollTime\u8bbe\u7f6e\u5207\u6362\u5e27\u7684\u901f\u5ea6\n\n```jsx mdx:preview\nimport React from 'react';\nimport { Carousel } from 'uiw';\n\nexport default function Demo() {\n  return (\n    <Carousel palyTime={1000} scrollTime={500}>\n      <div style={{ height: '100%', background: '#1EABCD' }}>\n        <span>1</span>\n      </div>\n      <div style={{ height: '100%',  background: '#393b46' }}>\n        <span>2</span>\n      </div>\n      <div style={{ height: '100%',  background: '#008EF0' }}>\n        <span>3</span>\n      </div>\n      <div style={{ height: '100%',  background: '#393E48' }}>\n        <span>4</span>\n      </div>\n    </Carousel>\n  );\n}\n```\n\n## \u5207\u6362\u5230\u6307\u5b9a\u5e27\n\n\u624b\u52a8\u5207\u6362\u5230\u6307\u5b9a\u5e27\u7684\u4f4d\u7f6e\n\n```jsx mdx:preview\nimport React from 'react';\nimport { Carousel } from 'uiw';\n\nexport default function Demo() {\n\n  const ref=React.useRef()\n  const [autoPlay,autoPlaySet]=React.useState(true)\n\n  return (\n    <React.Fragment>\n      <Carousel\n        ref={ref}\n        position={2}\n        autoPlay={autoPlay}\n        afterChange={(current)=>console.log('after',current)}\n        beforeChange={(current)=>console.log('before',current)}\n      >\n        <div style={{ height: '100%', background: '#1EABCD' }}>\n          <span>1</span>\n        </div>\n        <div style={{ height: '100%',  background: '#393b46' }}>\n          <span>2</span>\n        </div>\n        <div style={{ height: '100%',  background: '#008EF0' }}>\n          <span>3</span>\n        </div>\n        <div style={{ height: '100%',  background: '#393E48' }}>\n          <span>4</span>\n        </div>\n      </Carousel>\n      <button onClick={() => ref.current.gotoSlide(1)}>\u8df3\u8f6c</button>\n      <button onClick={() => ref.current.prevSlide()}>\u4e0a\u4e00\u5f20</button>\n      <button onClick={() => ref.current.nextSlide()}>\u4e0b\u4e00\u5f20</button>\n      <button onClick={() =>autoPlaySet(autoPlay?false:true)}>{autoPlay?'\u6682\u505c':'\u5f00\u59cb'}</button>\n    </React.Fragment>\n  );\n}\n```\n\n## Props\n\n## API\n\n| \u53c2\u6570 | \u8bf4\u660e | \u7c7b\u578b | \u9ed8\u8ba4\u503c |\n|--------- |-------- |--------- |-------- |\n| width | \u5bbd\u5ea6 | number | 400 |\n| height | \u9ad8\u5ea6 | number | 200 |\n| position | \u8bbe\u7f6e\u521d\u59cb\u5e27\u4f4d\u7f6e | number | 0 |\n| palyTime | \u6bcf\u5e27\u505c\u7559\u65f6\u95f4(ms) | number | 2000 |\n| scrollTime | \u6eda\u52a8\u52a8\u753b\u7684\u901f\u5ea6(ms) | number | 200 |\n| autoPlay | \u662f\u5426\u81ea\u52a8\u64ad\u653e | boolean | true |\n| afterChange | \u5207\u6362\u9762\u677f\u524d\u7684\u56de\u8c03 | (current) => void | - |\n| beforeChange | \u5207\u6362\u9762\u677f\u540e\u7684\u56de\u8c03 | (current) => void | - |\n| direction | \u6eda\u52a8\u65b9\u4f4d`horizontal`\u6a2a\u5411\uff0c`vertical`\u7ad6\u5411 | horizontal \\| vertical | horizontal |\n\n### ref\n\n```ts\n  // \u8df3\u8f6c\u5230\u6307\u5b9a\u5e27\n  gotoSlide: (slideNumber: number) => void;\n  // \u4e0a\u4e00\u9488\n  prevSlide: () => void;\n  // \u4e0b\u4e00\u5e27\n  nextSlide: () => void;\n  // \u6682\u505c\u64ad\u653e\n  stopPlay: () => void;\n```\n\n\n",headings:[],headingsList:[]};var a=t(5301),l=t(4760);function u(){return(0,l.jsx)(a.Z,{...r,path:"https://github.com/uiwjs/uiw/tree/master/packages/react-carousel/README.md"})}}}]);
//# sourceMappingURL=1599.2e2028f1.chunk.js.map