{"componentChunkName":"component---src-templates-post-template-js","path":"/zh-CN/show/carousel","result":{"data":{"current":{"frontmatter":{"title":"Carousel 轮播图","order":66,"brief":"轮播图是一种媒体组件，可以在可视化应用中展示多张图片轮流播放的效果。","icon":"doc-carousel"},"fields":{"type":"show"},"tableOfContents":{"items":[{"url":"#代码演示","title":"代码演示","items":[{"url":"#如何引入","title":"如何引入"},{"url":"#基本用法","title":"基本用法"},{"url":"#主题切换","title":"主题切换"},{"url":"#指示器","title":"指示器"},{"url":"#箭头","title":"箭头"},{"url":"#定制箭头","title":"定制箭头"},{"url":"#播放参数","title":"播放参数"},{"url":"#动画效果与切换速度","title":"动画效果与切换速度"},{"url":"#受控的轮播图","title":"受控的轮播图"},{"url":"#api-参考","title":"API 参考"}]},{"url":"#methods","title":"Methods"},{"url":"#设计变量","title":"设计变量"}]},"body":"var _excluded = [\"components\"];\nfunction _extends() { return _extends = Object.assign ? Object.assign.bind() : function (n) { for (var e = 1; e < arguments.length; e++) { var t = arguments[e]; for (var r in t) ({}).hasOwnProperty.call(t, r) && (n[r] = t[r]); } return n; }, _extends.apply(null, arguments); }\nfunction _objectWithoutProperties(e, t) { if (null == e) return {}; var o, r, i = _objectWithoutPropertiesLoose(e, t); if (Object.getOwnPropertySymbols) { var s = Object.getOwnPropertySymbols(e); for (r = 0; r < s.length; r++) o = s[r], t.includes(o) || {}.propertyIsEnumerable.call(e, o) && (i[o] = e[o]); } return i; }\nfunction _objectWithoutPropertiesLoose(r, e) { if (null == r) return {}; var t = {}; for (var n in r) if ({}.hasOwnProperty.call(r, n)) { if (e.includes(n)) continue; t[n] = r[n]; } return t; }\n/* @jsxRuntime classic */\n/* @jsx mdx */\n\nvar _frontmatter = {\n \"localeCode\": \"zh-CN\",\n \"order\": 66,\n \"category\": \"展示类\",\n \"title\": \"Carousel 轮播图\",\n \"icon\": \"doc-carousel\",\n \"brief\": \"轮播图是一种媒体组件，可以在可视化应用中展示多张图片轮流播放的效果。\"\n};\nvar makeShortcode = function makeShortcode(name) {\n return function MDXDefaultShortcode(props) {\n console.warn(\"Component \" + name + \" was not imported, exported, or provided by MDXProvider as global scope\");\n return mdx(\"div\", props);\n };\n};\nvar DesignToken = makeShortcode(\"DesignToken\");\nvar layoutProps = {\n _frontmatter: _frontmatter\n};\nvar MDXLayout = \"wrapper\";\nreturn function MDXContent(_ref) {\n var components = _ref.components,\n props = _objectWithoutProperties(_ref, _excluded);\n return mdx(MDXLayout, _extends({}, layoutProps, props, {\n components: components,\n mdxType: \"MDXLayout\"\n }), mdx(\"section\", null, mdx(\"h2\", {\n parentName: \"section\"\n }, \"\\u4EE3\\u7801\\u6F14\\u793A\"), mdx(\"h3\", {\n parentName: \"section\"\n }, \"\\u5982\\u4F55\\u5F15\\u5165\"), mdx(\"pre\", {\n parentName: \"section\"\n }, mdx(\"code\", {\n parentName: \"pre\",\n \"className\": \"language-jsx\",\n \"metastring\": \"import\",\n \"import\": true\n }, \"import { Carousel } from '@douyinfe/semi-ui';\\n\")), mdx(\"h3\", {\n parentName: \"section\"\n }, \"\\u57FA\\u672C\\u7528\\u6CD5\"), mdx(\"p\", {\n parentName: \"section\"\n }, \"\\u57FA\\u672C\\u7528\\u6CD5\"), mdx(\"pre\", {\n parentName: \"section\"\n }, mdx(\"code\", {\n parentName: \"pre\",\n \"className\": \"language-jsx\",\n \"metastring\": \"live=true dir=\\\"column\\\"\",\n \"live\": \"true\",\n \"dir\": \"\\\"column\\\"\"\n }, \"import React from 'react';\\nimport { Carousel, Typography, Space } from '@douyinfe/semi-ui';\\n\\n() => {\\n const { Title, Paragraph } = Typography;\\n\\n const style = {\\n width: '100%',\\n height: '400px',\\n };\\n\\n const titleStyle = { \\n position: 'absolute', \\n top: '100px', \\n left: '100px',\\n color: '#1C1F23'\\n };\\n\\n const colorStyle = {\\n color: '#1C1F23'\\n };\\n\\n const renderLogo = () => {\\n return (\\n semi_logo \\n );\\n };\\n\\n const imgList = [\\n 'https://lf3-static.bytednsdoc.com/obj/eden-cn/hjeh7pldnulm/SemiDocs/bg-1.png',\\n 'https://lf3-static.bytednsdoc.com/obj/eden-cn/hjeh7pldnulm/SemiDocs/bg-2.png',\\n 'https://lf3-static.bytednsdoc.com/obj/eden-cn/hjeh7pldnulm/SemiDocs/bg-3.png',\\n ];\\n\\n const textList = [\\n ['Semi \\u8BBE\\u8BA1\\u7BA1\\u7406\\u7CFB\\u7EDF', '\\u4ECE Semi Design\\uFF0C\\u5230 Any Design', '\\u5FEB\\u901F\\u5B9A\\u5236\\u4F60\\u7684\\u8BBE\\u8BA1\\u7CFB\\u7EDF\\uFF0C\\u5E76\\u5E94\\u7528\\u5728\\u8BBE\\u8BA1\\u7A3F\\u548C\\u4EE3\\u7801\\u4E2D'],\\n ['Semi \\u7269\\u6599\\u5E02\\u573A', '\\u9762\\u5411\\u4E1A\\u52A1\\u573A\\u666F\\u7684\\u5B9A\\u5236\\u5316\\u7EC4\\u4EF6\\uFF0C\\u652F\\u6301\\u7EBF\\u4E0A\\u9884\\u89C8\\u548C\\u8C03\\u8BD5', '\\u5185\\u5BB9\\u7531 Semi Design \\u7528\\u6237\\u5171\\u5EFA'],\\n ['Semi Template', '\\u9AD8\\u6548\\u7684 Design2Code \\u8BBE\\u8BA1\\u7A3F\\u8F6C\\u4EE3\\u7801', '\\u6D77\\u91CF Figma \\u8BBE\\u8BA1\\u6A21\\u677F\\u4E00\\u952E\\u8F6C\\u4E3A\\u771F\\u5B9E\\u524D\\u7AEF\\u4EE3\\u7801'],\\n ];\\n\\n return (\\n \\n {\\n imgList.map((src, index) => {\\n return (\\n
\\n \\n {renderLogo()}\\n {textList[index][0]}\\n \\n {textList[index][1]}\\n {textList[index][2]}\\n \\n \\n
\\n );\\n })\\n }\\n \\n );\\n};\\n\")), mdx(\"h3\", {\n parentName: \"section\"\n }, \"\\u4E3B\\u9898\\u5207\\u6362\"), mdx(\"p\", {\n parentName: \"section\"\n }, \"\\u9ED8\\u8BA4\\u5B9A\\u4E49\\u4E86\\u4E09\\u79CD\\u4E3B\\u9898\\uFF1A \", mdx(\"inlineCode\", {\n parentName: \"p\"\n }, \"primary\"), \"\\u3001\", mdx(\"inlineCode\", {\n parentName: \"p\"\n }, \"light\"), \"\\u3001\", mdx(\"inlineCode\", {\n parentName: \"p\"\n }, \"dark\")), mdx(\"pre\", {\n parentName: \"section\"\n }, mdx(\"code\", {\n parentName: \"pre\",\n \"className\": \"language-jsx\",\n \"metastring\": \"live=true dir=\\\"column\\\"\",\n \"live\": \"true\",\n \"dir\": \"\\\"column\\\"\"\n }, \"import React from 'react';\\nimport { Carousel, RadioGroup, Radio, Space, Typography } from '@douyinfe/semi-ui';\\n\\n() => {\\n const { Title, Paragraph } = Typography;\\n const [theme, setTheme] = useState('primary');\\n\\n const style = {\\n width: '100%',\\n height: '400px',\\n };\\n\\n const titleStyle = { \\n position: 'absolute', \\n top: '100px', \\n left: '100px'\\n };\\n\\n const colorStyle = {\\n color: '#1C1F23'\\n };\\n\\n const renderLogo = () => {\\n return (\\n semi_logo\\n );\\n };\\n\\n const imgList = [\\n 'https://lf3-static.bytednsdoc.com/obj/eden-cn/hjeh7pldnulm/SemiDocs/bg-1.png',\\n 'https://lf3-static.bytednsdoc.com/obj/eden-cn/hjeh7pldnulm/SemiDocs/bg-2.png',\\n 'https://lf3-static.bytednsdoc.com/obj/eden-cn/hjeh7pldnulm/SemiDocs/bg-3.png',\\n ];\\n\\n const textList = [\\n ['Semi \\u8BBE\\u8BA1\\u7BA1\\u7406\\u7CFB\\u7EDF', '\\u4ECE Semi Design\\uFF0C\\u5230 Any Design', '\\u5FEB\\u901F\\u5B9A\\u5236\\u4F60\\u7684\\u8BBE\\u8BA1\\u7CFB\\u7EDF\\uFF0C\\u5E76\\u5E94\\u7528\\u5728\\u8BBE\\u8BA1\\u7A3F\\u548C\\u4EE3\\u7801\\u4E2D'],\\n ['Semi \\u7269\\u6599\\u5E02\\u573A', '\\u9762\\u5411\\u4E1A\\u52A1\\u573A\\u666F\\u7684\\u5B9A\\u5236\\u5316\\u7EC4\\u4EF6\\uFF0C\\u652F\\u6301\\u7EBF\\u4E0A\\u9884\\u89C8\\u548C\\u8C03\\u8BD5', '\\u5185\\u5BB9\\u7531 Semi Design \\u7528\\u6237\\u5171\\u5EFA'],\\n ['Semi \\u8BBE\\u8BA1/\\u4EE3\\u7801\\u6A21\\u677F', '\\u9AD8\\u6548\\u7684 Design2Code \\u8BBE\\u8BA1\\u7A3F\\u8F6C\\u4EE3\\u7801', '\\u6D77\\u91CF Figma \\u8BBE\\u8BA1\\u6A21\\u677F\\u4E00\\u952E\\u8F6C\\u4E3A\\u771F\\u5B9E\\u524D\\u7AEF\\u4EE3\\u7801'],\\n ];\\n \\n return (\\n
\\n \\n {\\n imgList.map((src, index) => {\\n return (\\n
\\n \\n {renderLogo()}\\n {textList[index][0]}\\n \\n {textList[index][1]}\\n {textList[index][2]}\\n \\n \\n
\\n );\\n })\\n }\\n \\n
\\n \\n
\\u4E3B\\u9898
\\n setTheme(e.target.value)} value={theme} type=\\\"button\\\">\\n primary\\n light\\n dark\\n \\n \\n
\\n );\\n};\\n\")), mdx(\"h3\", {\n parentName: \"section\"\n }, \"\\u6307\\u793A\\u5668\"), mdx(\"p\", {\n parentName: \"section\"\n }, \"\\u6307\\u793A\\u5668\\u53EF\\u4EE5\\u8C03\\u8282\\u7C7B\\u578B\\u3001\\u4F4D\\u7F6E\\u3001\\u5C3A\\u5BF8\", mdx(\"br\", {\n parentName: \"p\"\n }), \"\\n\", \"\\u7C7B\\u578B\\uFF1A \", mdx(\"inlineCode\", {\n parentName: \"p\"\n }, \"dot\"), \"\\u3001\", mdx(\"inlineCode\", {\n parentName: \"p\"\n }, \"line\"), \"\\u3001\", mdx(\"inlineCode\", {\n parentName: \"p\"\n }, \"columnar\"), mdx(\"br\", {\n parentName: \"p\"\n }), \"\\n\", \"\\u4F4D\\u7F6E\\uFF1A \", mdx(\"inlineCode\", {\n parentName: \"p\"\n }, \"left\"), \"\\u3001\", mdx(\"inlineCode\", {\n parentName: \"p\"\n }, \"center\"), \"\\u3001\", mdx(\"inlineCode\", {\n parentName: \"p\"\n }, \"right\"), mdx(\"br\", {\n parentName: \"p\"\n }), \"\\n\", \"\\u5C3A\\u5BF8\\uFF1A \", mdx(\"inlineCode\", {\n parentName: \"p\"\n }, \"small\"), \"\\u3001\", mdx(\"inlineCode\", {\n parentName: \"p\"\n }, \"medium\")), mdx(\"pre\", {\n parentName: \"section\"\n }, mdx(\"code\", {\n parentName: \"pre\",\n \"className\": \"language-jsx\",\n \"metastring\": \"live=true dir=\\\"column\\\"\",\n \"live\": \"true\",\n \"dir\": \"\\\"column\\\"\"\n }, \"import React from 'react';\\nimport { Carousel, RadioGroup, Radio, Space, Typography } from '@douyinfe/semi-ui';\\n\\n() => {\\n const { Title, Paragraph } = Typography;\\n const [size, setSize] = useState('small');\\n const [type, setType] = useState('dot');\\n const [position, setPosition] = useState('left');\\n\\n const style = {\\n width: '100%',\\n height: '400px',\\n };\\n\\n const titleStyle = { \\n position: 'absolute', \\n top: '100px', \\n left: '100px'\\n };\\n\\n const colorStyle = {\\n color: '#1C1F23'\\n };\\n\\n const renderLogo = () => {\\n return (\\n semi_logo\\n );\\n };\\n\\n const imgList = [\\n 'https://lf3-static.bytednsdoc.com/obj/eden-cn/hjeh7pldnulm/SemiDocs/bg-1.png',\\n 'https://lf3-static.bytednsdoc.com/obj/eden-cn/hjeh7pldnulm/SemiDocs/bg-2.png',\\n 'https://lf3-static.bytednsdoc.com/obj/eden-cn/hjeh7pldnulm/SemiDocs/bg-3.png',\\n ];\\n\\n const textList = [\\n ['Semi \\u8BBE\\u8BA1\\u7BA1\\u7406\\u7CFB\\u7EDF', '\\u4ECE Semi Design\\uFF0C\\u5230 Any Design', '\\u5FEB\\u901F\\u5B9A\\u5236\\u4F60\\u7684\\u8BBE\\u8BA1\\u7CFB\\u7EDF\\uFF0C\\u5E76\\u5E94\\u7528\\u5728\\u8BBE\\u8BA1\\u7A3F\\u548C\\u4EE3\\u7801\\u4E2D'],\\n ['Semi \\u7269\\u6599\\u5E02\\u573A', '\\u9762\\u5411\\u4E1A\\u52A1\\u573A\\u666F\\u7684\\u5B9A\\u5236\\u5316\\u7EC4\\u4EF6\\uFF0C\\u652F\\u6301\\u7EBF\\u4E0A\\u9884\\u89C8\\u548C\\u8C03\\u8BD5', '\\u5185\\u5BB9\\u7531 Semi Design \\u7528\\u6237\\u5171\\u5EFA'],\\n ['Semi \\u8BBE\\u8BA1/\\u4EE3\\u7801\\u6A21\\u677F', '\\u9AD8\\u6548\\u7684 Design2Code \\u8BBE\\u8BA1\\u7A3F\\u8F6C\\u4EE3\\u7801', '\\u6D77\\u91CF Figma\\u524D\\u7AEF\\u4EE3\\u7801\\u4E00\\u952E\\u8F6C'],\\n ];\\n\\n return (\\n
\\n \\n {\\n imgList.map((src, index) => {\\n return (\\n
\\n \\n {renderLogo()}\\n {textList[index][0]}\\n \\n {textList[index][1]}\\n {textList[index][2]}\\n \\n \\n
\\n );\\n })\\n }\\n \\n
\\n \\n \\n
\\u7C7B\\u578B
\\n setType(e.target.value)} value={type} type=\\\"button\\\">\\n dot\\n line\\n columnar\\n \\n \\n \\n
\\u4F4D\\u7F6E
\\n setPosition(e.target.value)} value={position} type=\\\"button\\\">\\n left\\n center\\n right\\n \\n \\n \\n
\\u5C3A\\u5BF8
\\n setSize(e.target.value)} value={size} type=\\\"button\\\">\\n small\\n medium\\n \\n \\n \\n
\\n );\\n};\\n\")), mdx(\"h3\", {\n parentName: \"section\"\n }, \"\\u7BAD\\u5934\"), mdx(\"p\", {\n parentName: \"section\"\n }, \"\\u901A\\u8FC7 showArrow \\u5C5E\\u6027\\u63A7\\u5236\\u7BAD\\u5934\\u662F\\u5426\\u53EF\\u89C1\", mdx(\"br\", {\n parentName: \"p\"\n }), \"\\n\", \"\\u5982\\u679C\\u7BAD\\u5934\\u53EF\\u89C1\\uFF0C\\u901A\\u8FC7 arrowType \\u5C5E\\u6027\\u63A7\\u5236\\u7BAD\\u5934\\u5C55\\u793A\\u7684\\u65F6\\u673A\"), mdx(\"pre\", {\n parentName: \"section\"\n }, mdx(\"code\", {\n parentName: \"pre\",\n \"className\": \"language-jsx\",\n \"metastring\": \"live=true dir=\\\"column\\\"\",\n \"live\": \"true\",\n \"dir\": \"\\\"column\\\"\"\n }, \"import React from 'react';\\nimport { Carousel, RadioGroup, Radio, Space, Typography } from '@douyinfe/semi-ui';\\n\\n() => {\\n const { Title, Paragraph } = Typography;\\n const [arrowType, setArrowType] = useState('always');\\n const [show, setShow] = useState(true);\\n \\n const style = {\\n width: '100%',\\n height: '400px',\\n };\\n\\n const titleStyle = { \\n position: 'absolute', \\n top: '100px', \\n left: '100px'\\n };\\n\\n const colorStyle = {\\n color: '#1C1F23'\\n };\\n\\n const renderLogo = () => {\\n return (\\n semi_logo\\n );\\n };\\n\\n const imgList = [\\n 'https://lf3-static.bytednsdoc.com/obj/eden-cn/hjeh7pldnulm/SemiDocs/bg-1.png',\\n 'https://lf3-static.bytednsdoc.com/obj/eden-cn/hjeh7pldnulm/SemiDocs/bg-2.png',\\n 'https://lf3-static.bytednsdoc.com/obj/eden-cn/hjeh7pldnulm/SemiDocs/bg-3.png',\\n ];\\n\\n const textList = [\\n ['Semi \\u8BBE\\u8BA1\\u7BA1\\u7406\\u7CFB\\u7EDF', '\\u4ECE Semi Design\\uFF0C\\u5230 Any Design', '\\u5FEB\\u901F\\u5B9A\\u5236\\u4F60\\u7684\\u8BBE\\u8BA1\\u7CFB\\u7EDF\\uFF0C\\u5E76\\u5E94\\u7528\\u5728\\u8BBE\\u8BA1\\u7A3F\\u548C\\u4EE3\\u7801\\u4E2D'],\\n ['Semi \\u7269\\u6599\\u5E02\\u573A', '\\u9762\\u5411\\u4E1A\\u52A1\\u573A\\u666F\\u7684\\u5B9A\\u5236\\u5316\\u7EC4\\u4EF6\\uFF0C\\u652F\\u6301\\u7EBF\\u4E0A\\u9884\\u89C8\\u548C\\u8C03\\u8BD5', '\\u5185\\u5BB9\\u7531 Semi Design \\u7528\\u6237\\u5171\\u5EFA'],\\n ['Semi \\u8BBE\\u8BA1/\\u4EE3\\u7801\\u6A21\\u677F', '\\u9AD8\\u6548\\u7684 Design2Code \\u8BBE\\u8BA1\\u7A3F\\u8F6C\\u4EE3\\u7801', '\\u6D77\\u91CF Figma \\u8BBE\\u8BA1\\u6A21\\u677F\\u4E00\\u952E\\u8F6C\\u4E3A\\u771F\\u5B9E\\u524D\\u7AEF\\u4EE3\\u7801'],\\n ];\\n\\n return (\\n
\\n \\n {\\n imgList.map((src, index) => {\\n return (\\n
\\n \\n {renderLogo()}\\n {textList[index][0]}\\n \\n {textList[index][1]}\\n {textList[index][2]}\\n \\n \\n
\\n );\\n })\\n }\\n \\n
\\n \\n \\n
\\u5C55\\u793A\\u7BAD\\u5934
\\n setShow(e.target.value)} value={show} type=\\\"button\\\">\\n show\\n hide\\n \\n \\n \\n
\\u5C55\\u793A\\u65F6\\u673A
\\n setArrowType(e.target.value)} value={arrowType} type=\\\"button\\\">\\n always\\n hover\\n \\n \\n \\n
\\n );\\n};\\n\")), mdx(\"h3\", {\n parentName: \"section\"\n }, \"\\u5B9A\\u5236\\u7BAD\\u5934\"), mdx(\"p\", {\n parentName: \"section\"\n }, \"\\u901A\\u8FC7 arrowProps \\u5C5E\\u6027\\u5B9A\\u5236\\u7BAD\\u5934\\u6837\\u5F0F\\u548C\\u70B9\\u51FB\\u4E8B\\u4EF6\"), mdx(\"pre\", {\n parentName: \"section\"\n }, mdx(\"code\", {\n parentName: \"pre\",\n \"className\": \"language-jsx\",\n \"metastring\": \"live=true dir=\\\"column\\\"\",\n \"live\": \"true\",\n \"dir\": \"\\\"column\\\"\"\n }, \"import React from 'react';\\nimport { Carousel, Typography, Space } from '@douyinfe/semi-ui';\\nimport { IconArrowLeft, IconArrowRight } from \\\"@douyinfe/semi-icons\\\";\\n\\n() => {\\n const imgList = [\\n 'https://lf3-static.bytednsdoc.com/obj/eden-cn/hjeh7pldnulm/SemiDocs/bg-1.png',\\n 'https://lf3-static.bytednsdoc.com/obj/eden-cn/hjeh7pldnulm/SemiDocs/bg-2.png',\\n 'https://lf3-static.bytednsdoc.com/obj/eden-cn/hjeh7pldnulm/SemiDocs/bg-3.png',\\n ];\\n const textList = [\\n ['Semi \\u8BBE\\u8BA1\\u7BA1\\u7406\\u7CFB\\u7EDF', '\\u4ECE Semi Design\\uFF0C\\u5230 Any Design', '\\u5FEB\\u901F\\u5B9A\\u5236\\u4F60\\u7684\\u8BBE\\u8BA1\\u7CFB\\u7EDF\\uFF0C\\u5E76\\u5E94\\u7528\\u5728\\u8BBE\\u8BA1\\u7A3F\\u548C\\u4EE3\\u7801\\u4E2D'],\\n ['Semi \\u7269\\u6599\\u5E02\\u573A', '\\u9762\\u5411\\u4E1A\\u52A1\\u573A\\u666F\\u7684\\u5B9A\\u5236\\u5316\\u7EC4\\u4EF6\\uFF0C\\u652F\\u6301\\u7EBF\\u4E0A\\u9884\\u89C8\\u548C\\u8C03\\u8BD5', '\\u5185\\u5BB9\\u7531 Semi Design \\u7528\\u6237\\u5171\\u5EFA'],\\n ['Semi \\u8BBE\\u8BA1/\\u4EE3\\u7801\\u6A21\\u677F', '\\u9AD8\\u6548\\u7684 Design2Code \\u8BBE\\u8BA1\\u7A3F\\u8F6C\\u4EE3\\u7801', '\\u6D77\\u91CF Figma \\u8BBE\\u8BA1\\u6A21\\u677F\\u4E00\\u952E\\u8F6C\\u4E3A\\u771F\\u5B9E\\u524D\\u7AEF\\u4EE3\\u7801'],\\n ];\\n const arrowProps = {\\n leftArrow: { children: },\\n rightArrow: { children: },\\n };\\n\\n const renderLogo = () => {\\n return (\\n semi_logo\\n );\\n };\\n\\n const style = {\\n width: '100%',\\n height: '400px',\\n };\\n\\n const titleStyle = { \\n position: 'absolute', \\n top: '100px', \\n left: '100px'\\n };\\n\\n const colorStyle = {\\n color: '#1C1F23'\\n };\\n\\n return (\\n
\\n \\n {\\n imgList.map((src, index) => {\\n return (\\n
\\n \\n {renderLogo()}\\n {textList[index][0]}\\n \\n {textList[index][1]}\\n {textList[index][2]}\\n \\n \\n
\\n );\\n })\\n }\\n \\n
\\n );\\n};\\n\")), mdx(\"h3\", {\n parentName: \"section\"\n }, \"\\u64AD\\u653E\\u53C2\\u6570\"), mdx(\"p\", {\n parentName: \"section\"\n }, \"\\u901A\\u8FC7\\u7ED9 autoPlay \\u4F20\\u5165\\u53C2\\u6570 interval \\u63A7\\u5236\\u4E24\\u5F20\\u56FE\\u7247\\u4E4B\\u95F4\\u7684\\u65F6\\u95F4\\u95F4\\u9694\\uFF0C\\u4F20\\u5165 hoverToPause \\u63A7\\u5236\\u9F20\\u6807\\u653E\\u7F6E\\u5728\\u56FE\\u7247\\u4E0A\\u65F6\\u662F\\u5426\\u505C\\u6B62\\u64AD\\u653E\"), mdx(\"pre\", {\n parentName: \"section\"\n }, mdx(\"code\", {\n parentName: \"pre\",\n \"className\": \"language-jsx\",\n \"metastring\": \"live=true dir=\\\"column\\\"\",\n \"live\": \"true\",\n \"dir\": \"\\\"column\\\"\"\n }, \"import React from 'react';\\nimport { Carousel, Typography, Space } from '@douyinfe/semi-ui';\\n\\n() => {\\n const { Title, Paragraph } = Typography;\\n\\n const style = {\\n width: '100%',\\n height: '400px',\\n };\\n\\n const titleStyle = { \\n position: 'absolute', \\n top: '100px', \\n left: '100px'\\n };\\n\\n const colorStyle = {\\n color: '#1C1F23'\\n };\\n\\n const renderLogo = () => {\\n return (\\n semi_logo\\n );\\n };\\n\\n const imgList = [\\n 'https://lf3-static.bytednsdoc.com/obj/eden-cn/hjeh7pldnulm/SemiDocs/bg-1.png',\\n 'https://lf3-static.bytednsdoc.com/obj/eden-cn/hjeh7pldnulm/SemiDocs/bg-2.png',\\n 'https://lf3-static.bytednsdoc.com/obj/eden-cn/hjeh7pldnulm/SemiDocs/bg-3.png',\\n ];\\n\\n const textList = [\\n ['Semi \\u8BBE\\u8BA1\\u7BA1\\u7406\\u7CFB\\u7EDF', '\\u4ECE Semi Design\\uFF0C\\u5230 Any Design', '\\u5FEB\\u901F\\u5B9A\\u5236\\u4F60\\u7684\\u8BBE\\u8BA1\\u7CFB\\u7EDF\\uFF0C\\u5E76\\u5E94\\u7528\\u5728\\u8BBE\\u8BA1\\u7A3F\\u548C\\u4EE3\\u7801\\u4E2D'],\\n ['Semi \\u7269\\u6599\\u5E02\\u573A', '\\u9762\\u5411\\u4E1A\\u52A1\\u573A\\u666F\\u7684\\u5B9A\\u5236\\u5316\\u7EC4\\u4EF6\\uFF0C\\u652F\\u6301\\u7EBF\\u4E0A\\u9884\\u89C8\\u548C\\u8C03\\u8BD5', '\\u5185\\u5BB9\\u7531 Semi Design \\u7528\\u6237\\u5171\\u5EFA'],\\n ['Semi \\u8BBE\\u8BA1/\\u4EE3\\u7801\\u6A21\\u677F', '\\u9AD8\\u6548\\u7684 Design2Code \\u8BBE\\u8BA1\\u7A3F\\u8F6C\\u4EE3\\u7801', '\\u6D77\\u91CF Figma \\u8BBE\\u8BA1\\u6A21\\u677F\\u4E00\\u952E\\u8F6C\\u4E3A\\u771F\\u5B9E\\u524D\\u7AEF\\u4EE3\\u7801'],\\n ];\\n\\n return (\\n
\\n \\n {\\n imgList.map((src, index) => {\\n return (\\n
\\n \\n {renderLogo()}\\n {textList[index][0]}\\n \\n {textList[index][1]}\\n {textList[index][2]}\\n \\n \\n
\\n );\\n })\\n }\\n \\n
\\n );\\n};\\n\")), mdx(\"h3\", {\n parentName: \"section\"\n }, \"\\u52A8\\u753B\\u6548\\u679C\\u4E0E\\u5207\\u6362\\u901F\\u5EA6\"), mdx(\"p\", {\n parentName: \"section\"\n }, \"\\u901A\\u8FC7\\u7ED9 animation \\u5C5E\\u6027\\u63A7\\u5236\\u52A8\\u753B\\uFF0C\\u53EF\\u9009\\u503C\\u6709 \", mdx(\"inlineCode\", {\n parentName: \"p\"\n }, \"fade\"), \"\\uFF0C\", mdx(\"inlineCode\", {\n parentName: \"p\"\n }, \"slide\"), mdx(\"br\", {\n parentName: \"p\"\n }), \"\\n\", \"\\u901A\\u8FC7\\u7ED9 speed \\u5C5E\\u6027\\u63A7\\u5236\\u4E24\\u5F20\\u56FE\\u7247\\u4E4B\\u95F4\\u7684\\u5207\\u6362\\u65F6\\u95F4\\uFF0C\\u5355\\u4F4D\\u4E3Ams\"), mdx(\"pre\", {\n parentName: \"section\"\n }, mdx(\"code\", {\n parentName: \"pre\",\n \"className\": \"language-jsx\",\n \"metastring\": \"live=true dir=\\\"column\\\"\",\n \"live\": \"true\",\n \"dir\": \"\\\"column\\\"\"\n }, \"import React from 'react';\\nimport { Carousel, Typography, Space } from '@douyinfe/semi-ui';\\n\\n() => {\\n const { Title, Paragraph } = Typography;\\n\\n const style = {\\n width: '100%',\\n height: '400px',\\n };\\n\\n const titleStyle = { \\n position: 'absolute', \\n top: '100px', \\n left: '100px'\\n };\\n\\n const colorStyle = {\\n color: '#1C1F23'\\n };\\n\\n const renderLogo = () => {\\n return (\\n semi_logo\\n );\\n };\\n\\n\\n const imgList = [\\n 'https://lf3-static.bytednsdoc.com/obj/eden-cn/hjeh7pldnulm/SemiDocs/bg-1.png',\\n 'https://lf3-static.bytednsdoc.com/obj/eden-cn/hjeh7pldnulm/SemiDocs/bg-2.png',\\n 'https://lf3-static.bytednsdoc.com/obj/eden-cn/hjeh7pldnulm/SemiDocs/bg-3.png',\\n ];\\n\\n const textList = [\\n ['Semi \\u8BBE\\u8BA1\\u7BA1\\u7406\\u7CFB\\u7EDF', '\\u4ECE Semi Design\\uFF0C\\u5230 Any Design', '\\u5FEB\\u901F\\u5B9A\\u5236\\u4F60\\u7684\\u8BBE\\u8BA1\\u7CFB\\u7EDF\\uFF0C\\u5E76\\u5E94\\u7528\\u5728\\u8BBE\\u8BA1\\u7A3F\\u548C\\u4EE3\\u7801\\u4E2D'],\\n ['Semi \\u7269\\u6599\\u5E02\\u573A', '\\u9762\\u5411\\u4E1A\\u52A1\\u573A\\u666F\\u7684\\u5B9A\\u5236\\u5316\\u7EC4\\u4EF6\\uFF0C\\u652F\\u6301\\u7EBF\\u4E0A\\u9884\\u89C8\\u548C\\u8C03\\u8BD5', '\\u5185\\u5BB9\\u7531 Semi Design \\u7528\\u6237\\u5171\\u5EFA'],\\n ['Semi \\u8BBE\\u8BA1/\\u4EE3\\u7801\\u6A21\\u677F', '\\u9AD8\\u6548\\u7684 Design2Code \\u8BBE\\u8BA1\\u7A3F\\u8F6C\\u4EE3\\u7801', '\\u6D77\\u91CF Figma \\u8BBE\\u8BA1\\u6A21\\u677F\\u4E00\\u952E\\u8F6C\\u4E3A\\u771F\\u5B9E\\u524D\\u7AEF\\u4EE3\\u7801'],\\n ];\\n\\n return (\\n
\\n \\n {\\n imgList.map((src, index) => {\\n return (\\n
\\n \\n {renderLogo()}\\n {textList[index][0]}\\n \\n {textList[index][1]}\\n {textList[index][2]}\\n \\n \\n
\\n );\\n })\\n }\\n \\n
\\n );\\n};\\n\")), mdx(\"h3\", {\n parentName: \"section\"\n }, \"\\u53D7\\u63A7\\u7684\\u8F6E\\u64AD\\u56FE\"), mdx(\"pre\", {\n parentName: \"section\"\n }, mdx(\"code\", {\n parentName: \"pre\",\n \"className\": \"language-jsx\",\n \"metastring\": \"live=true dir=\\\"column\\\"\",\n \"live\": \"true\",\n \"dir\": \"\\\"column\\\"\"\n }, \"import React, { useState } from 'react';\\nimport { Carousel, Space, Typography } from '@douyinfe/semi-ui';\\n\\n() => {\\n const [activeIndex, setActiveIndex] = useState(0);\\n const imgList = [\\n 'https://lf3-static.bytednsdoc.com/obj/eden-cn/hjeh7pldnulm/SemiDocs/bg-1.png',\\n 'https://lf3-static.bytednsdoc.com/obj/eden-cn/hjeh7pldnulm/SemiDocs/bg-2.png',\\n 'https://lf3-static.bytednsdoc.com/obj/eden-cn/hjeh7pldnulm/SemiDocs/bg-3.png',\\n ];\\n const textList = [\\n ['Semi \\u8BBE\\u8BA1\\u7BA1\\u7406\\u7CFB\\u7EDF', '\\u4ECE Semi Design\\uFF0C\\u5230 Any Design', '\\u5FEB\\u901F\\u5B9A\\u5236\\u4F60\\u7684\\u8BBE\\u8BA1\\u7CFB\\u7EDF\\uFF0C\\u5E76\\u5E94\\u7528\\u5728\\u8BBE\\u8BA1\\u7A3F\\u548C\\u4EE3\\u7801\\u4E2D'],\\n ['Semi \\u7269\\u6599\\u5E02\\u573A', '\\u9762\\u5411\\u4E1A\\u52A1\\u573A\\u666F\\u7684\\u5B9A\\u5236\\u5316\\u7EC4\\u4EF6\\uFF0C\\u652F\\u6301\\u7EBF\\u4E0A\\u9884\\u89C8\\u548C\\u8C03\\u8BD5', '\\u5185\\u5BB9\\u7531 Semi Design \\u7528\\u6237\\u5171\\u5EFA'],\\n ['Semi \\u8BBE\\u8BA1/\\u4EE3\\u7801\\u6A21\\u677F', '\\u9AD8\\u6548\\u7684 Design2Code \\u8BBE\\u8BA1\\u7A3F\\u8F6C\\u4EE3\\u7801', '\\u6D77\\u91CF Figma \\u8BBE\\u8BA1\\u6A21\\u677F\\u4E00\\u952E\\u8F6C\\u4E3A\\u771F\\u5B9E\\u524D\\u7AEF\\u4EE3\\u7801'],\\n ];\\n\\n const renderLogo = () => {\\n return (\\n semi_logo\\n );\\n };\\n\\n const onChange = (newActiveIndex) => {\\n setActiveIndex(newActiveIndex);\\n };\\n\\n const style = {\\n width: '100%',\\n height: '400px',\\n };\\n\\n const titleStyle = { \\n position: 'absolute', \\n top: '100px', \\n left: '100px'\\n };\\n\\n const colorStyle = {\\n color: '#1C1F23'\\n };\\n \\n return (\\n
\\n \\n {\\n imgList.map((src, index) => {\\n return (\\n
\\n \\n {renderLogo()}\\n {textList[index][0]}\\n \\n {textList[index][1]}\\n {textList[index][2]}\\n \\n \\n
\\n );\\n })\\n }\\n \\n
\\n );\\n};\\n\")), mdx(\"h3\", {\n parentName: \"section\"\n }, \"API \\u53C2\\u8003\"), mdx(\"p\", {\n parentName: \"section\"\n }, mdx(\"strong\", {\n parentName: \"p\"\n }, \"Carousel\")), mdx(\"table\", {\n parentName: \"section\"\n }, mdx(\"thead\", {\n parentName: \"table\"\n }, mdx(\"tr\", {\n parentName: \"thead\"\n }, mdx(\"th\", {\n parentName: \"tr\",\n \"align\": null\n }, \"\\u5C5E\\u6027\"), mdx(\"th\", {\n parentName: \"tr\",\n \"align\": null\n }, \"\\u8BF4\\u660E\"), mdx(\"th\", {\n parentName: \"tr\",\n \"align\": null\n }, \"\\u7C7B\\u578B\"), mdx(\"th\", {\n parentName: \"tr\",\n \"align\": null\n }, \"\\u9ED8\\u8BA4\\u503C\"), mdx(\"th\", {\n parentName: \"tr\",\n \"align\": null\n }, \"\\u7248\\u672C\"))), mdx(\"tbody\", {\n parentName: \"table\"\n }, mdx(\"tr\", {\n parentName: \"tbody\"\n }, mdx(\"td\", {\n parentName: \"tr\",\n \"align\": null\n }, \"activeIndex\"), mdx(\"td\", {\n parentName: \"tr\",\n \"align\": null\n }, \"\\u53D7\\u63A7\\u5C5E\\u6027\"), mdx(\"td\", {\n parentName: \"tr\",\n \"align\": null\n }, \"number\"), mdx(\"td\", {\n parentName: \"tr\",\n \"align\": null\n }, \"-\"), mdx(\"td\", {\n parentName: \"tr\",\n \"align\": null\n }, \"2.10.0\")), mdx(\"tr\", {\n parentName: \"tbody\"\n }, mdx(\"td\", {\n parentName: \"tr\",\n \"align\": null\n }, \"animation\"), mdx(\"td\", {\n parentName: \"tr\",\n \"align\": null\n }, \"\\u5207\\u6362\\u52A8\\u753B\\uFF0C\\u53EF\\u9009\\u503C\\uFF1A\", mdx(\"inlineCode\", {\n parentName: \"td\"\n }, \"fade\"), \"\\uFF0C\", mdx(\"inlineCode\", {\n parentName: \"td\"\n }, \"slide\")), mdx(\"td\", {\n parentName: \"tr\",\n \"align\": null\n }, \"\\\"fade\\\" \", \"|\", \" \\\"slide\\\"\"), mdx(\"td\", {\n parentName: \"tr\",\n \"align\": null\n }, \"\\\"slide\\\"\"), mdx(\"td\", {\n parentName: \"tr\",\n \"align\": null\n }, \"2.10.0\")), mdx(\"tr\", {\n parentName: \"tbody\"\n }, mdx(\"td\", {\n parentName: \"tr\",\n \"align\": null\n }, \"arrowProps\"), mdx(\"td\", {\n parentName: \"tr\",\n \"align\": null\n }, \"\\u7BAD\\u5934\\u53C2\\u6570\\uFF0C\\u7528\\u4E8E\\u81EA\\u5B9A\\u4E49\\u7BAD\\u5934\\u6837\\u5F0F\\u548C\\u70B9\\u51FB\\u4E8B\\u4EF6\"), mdx(\"td\", {\n parentName: \"tr\",\n \"align\": null\n }, \"() => { leftArrow: ArrowButton, rightArrow: ArrowButton }\"), mdx(\"td\", {\n parentName: \"tr\",\n \"align\": null\n }, \"-\"), mdx(\"td\", {\n parentName: \"tr\",\n \"align\": null\n }, \"2.10.0\")), mdx(\"tr\", {\n parentName: \"tbody\"\n }, mdx(\"td\", {\n parentName: \"tr\",\n \"align\": null\n }, \"autoPlay\"), mdx(\"td\", {\n parentName: \"tr\",\n \"align\": null\n }, \"\\u662F\\u5426\\u81EA\\u52A8\\u5FAA\\u73AF\\u5C55\\u793A\\uFF0C\\u6216\\u8005\\u4F20\\u5165 { interval: \\u81EA\\u52A8\\u5207\\u6362\\u65F6\\u95F4\\u95F4\\u9694(\\u9ED8\\u8BA4: 2000), hoverToPause: \\u9F20\\u6807\\u60AC\\u6D6E\\u65F6\\u662F\\u5426\\u6682\\u505C\\u81EA\\u52A8\\u5207\\u6362(\\u9ED8\\u8BA4: true) }\"), mdx(\"td\", {\n parentName: \"tr\",\n \"align\": null\n }, \"boolean \\uFF5C { interval?: number, hoverToPause?: boolean }\"), mdx(\"td\", {\n parentName: \"tr\",\n \"align\": null\n }, \"true\"), mdx(\"td\", {\n parentName: \"tr\",\n \"align\": null\n }, \"2.10.0\")), mdx(\"tr\", {\n parentName: \"tbody\"\n }, mdx(\"td\", {\n parentName: \"tr\",\n \"align\": null\n }, \"className\"), mdx(\"td\", {\n parentName: \"tr\",\n \"align\": null\n }, \"\\u6837\\u5F0F\\u7C7B\\u540D\"), mdx(\"td\", {\n parentName: \"tr\",\n \"align\": null\n }, \"string\"), mdx(\"td\", {\n parentName: \"tr\",\n \"align\": null\n }, \"-\"), mdx(\"td\", {\n parentName: \"tr\",\n \"align\": null\n }, \"2.10.0\")), mdx(\"tr\", {\n parentName: \"tbody\"\n }, mdx(\"td\", {\n parentName: \"tr\",\n \"align\": null\n }, \"defaultActiveIndex\"), mdx(\"td\", {\n parentName: \"tr\",\n \"align\": null\n }, \"\\u521D\\u59CB\\u5316\\u65F6\\u9ED8\\u8BA4\\u5C55\\u793A\\u7684\\u7D22\\u5F15\"), mdx(\"td\", {\n parentName: \"tr\",\n \"align\": null\n }, \"number\"), mdx(\"td\", {\n parentName: \"tr\",\n \"align\": null\n }, \"0\"), mdx(\"td\", {\n parentName: \"tr\",\n \"align\": null\n }, \"2.10.0\")), mdx(\"tr\", {\n parentName: \"tbody\"\n }, mdx(\"td\", {\n parentName: \"tr\",\n \"align\": null\n }, \"indicatorPosition\"), mdx(\"td\", {\n parentName: \"tr\",\n \"align\": null\n }, \"\\u6307\\u793A\\u5668\\u4F4D\\u7F6E\\uFF0C\\u53EF\\u9009\\u503C\\u6709\\uFF1A \", mdx(\"inlineCode\", {\n parentName: \"td\"\n }, \"left\"), \"\\u3001\", mdx(\"inlineCode\", {\n parentName: \"td\"\n }, \"center\"), \"\\u3001\", mdx(\"inlineCode\", {\n parentName: \"td\"\n }, \"right\")), mdx(\"td\", {\n parentName: \"tr\",\n \"align\": null\n }, \"\\\"left\\\" \", \"|\", \" \\\"center\\\" \", \"|\", \" \\\"right\\\"\"), mdx(\"td\", {\n parentName: \"tr\",\n \"align\": null\n }, \"\\\"center\\\"\"), mdx(\"td\", {\n parentName: \"tr\",\n \"align\": null\n }, \"2.10.0\")), mdx(\"tr\", {\n parentName: \"tbody\"\n }, mdx(\"td\", {\n parentName: \"tr\",\n \"align\": null\n }, \"indicatorSize\"), mdx(\"td\", {\n parentName: \"tr\",\n \"align\": null\n }, \"\\u6307\\u793A\\u5668\\u5C3A\\u5BF8\\uFF0C\\u53EF\\u9009\\u503C\\u6709\\uFF1A \", mdx(\"inlineCode\", {\n parentName: \"td\"\n }, \"small\"), \"\\u3001\", mdx(\"inlineCode\", {\n parentName: \"td\"\n }, \"medium\")), mdx(\"td\", {\n parentName: \"tr\",\n \"align\": null\n }, \"\\\"small\\\" \", \"|\", \" \\\"medium\\\"\"), mdx(\"td\", {\n parentName: \"tr\",\n \"align\": null\n }, \"\\\"small\\\"\"), mdx(\"td\", {\n parentName: \"tr\",\n \"align\": null\n }, \"2.10.0\")), mdx(\"tr\", {\n parentName: \"tbody\"\n }, mdx(\"td\", {\n parentName: \"tr\",\n \"align\": null\n }, \"indicatorType\"), mdx(\"td\", {\n parentName: \"tr\",\n \"align\": null\n }, \"\\u6307\\u793A\\u5668\\u7C7B\\u578B\\uFF0C\\u53EF\\u9009\\u503C\\u6709\\uFF1A \", mdx(\"inlineCode\", {\n parentName: \"td\"\n }, \"dot\"), \"\\u3001\", mdx(\"inlineCode\", {\n parentName: \"td\"\n }, \"line\"), \"\\u3001\", mdx(\"inlineCode\", {\n parentName: \"td\"\n }, \"columnar\")), mdx(\"td\", {\n parentName: \"tr\",\n \"align\": null\n }, \"\\\"dot\\\" \", \"|\", \" \\\"line\\\" \", \"|\", \" \\\"columnar\\\"\"), mdx(\"td\", {\n parentName: \"tr\",\n \"align\": null\n }, \"\\\"dot\\\"\"), mdx(\"td\", {\n parentName: \"tr\",\n \"align\": null\n }, \"2.10.0\")), mdx(\"tr\", {\n parentName: \"tbody\"\n }, mdx(\"td\", {\n parentName: \"tr\",\n \"align\": null\n }, \"theme\"), mdx(\"td\", {\n parentName: \"tr\",\n \"align\": null\n }, \"\\u6307\\u793A\\u5668\\u548C\\u7BAD\\u5934\\u4E3B\\u9898\\uFF0C\\u53EF\\u9009\\u503C\\u6709\\uFF1A \", mdx(\"inlineCode\", {\n parentName: \"td\"\n }, \"primary\"), \"\\u3001\", mdx(\"inlineCode\", {\n parentName: \"td\"\n }, \"light\"), \"\\u3001\", mdx(\"inlineCode\", {\n parentName: \"td\"\n }, \"dark\")), mdx(\"td\", {\n parentName: \"tr\",\n \"align\": null\n }, \"\\\"primary\\\" \", \"|\", \" \\\"light\\\" \", \"|\", \" \\\"dark\\\"\"), mdx(\"td\", {\n parentName: \"tr\",\n \"align\": null\n }, \"\\\"light\\\"\"), mdx(\"td\", {\n parentName: \"tr\",\n \"align\": null\n }, \"2.10.0\")), mdx(\"tr\", {\n parentName: \"tbody\"\n }, mdx(\"td\", {\n parentName: \"tr\",\n \"align\": null\n }, \"onChange\"), mdx(\"td\", {\n parentName: \"tr\",\n \"align\": null\n }, \"\\u56FE\\u7247\\u5207\\u6362\\u65F6\\u7684\\u56DE\\u8C03\"), mdx(\"td\", {\n parentName: \"tr\",\n \"align\": null\n }, \"(index: number, preIndex: number) => void\"), mdx(\"td\", {\n parentName: \"tr\",\n \"align\": null\n }, \"-\"), mdx(\"td\", {\n parentName: \"tr\",\n \"align\": null\n }, \"2.10.0\")), mdx(\"tr\", {\n parentName: \"tbody\"\n }, mdx(\"td\", {\n parentName: \"tr\",\n \"align\": null\n }, \"arrowType\"), mdx(\"td\", {\n parentName: \"tr\",\n \"align\": null\n }, \"\\u7BAD\\u5934\\u5C55\\u793A\\u65F6\\u673A\\uFF0C\\u53EF\\u9009\\u503C\\u6709\\uFF1A \", mdx(\"inlineCode\", {\n parentName: \"td\"\n }, \"hover\"), \"\\u3001\", mdx(\"inlineCode\", {\n parentName: \"td\"\n }, \"always\")), mdx(\"td\", {\n parentName: \"tr\",\n \"align\": null\n }, \"\\\"hover\\\" \", \"|\", \" \\\"always\\\"\"), mdx(\"td\", {\n parentName: \"tr\",\n \"align\": null\n }, \"always\"), mdx(\"td\", {\n parentName: \"tr\",\n \"align\": null\n }, \"2.10.0\")), mdx(\"tr\", {\n parentName: \"tbody\"\n }, mdx(\"td\", {\n parentName: \"tr\",\n \"align\": null\n }, \"showArrow\"), mdx(\"td\", {\n parentName: \"tr\",\n \"align\": null\n }, \"\\u662F\\u5426\\u5C55\\u793A\\u7BAD\\u5934\"), mdx(\"td\", {\n parentName: \"tr\",\n \"align\": null\n }, \"boolean\"), mdx(\"td\", {\n parentName: \"tr\",\n \"align\": null\n }, \"true\"), mdx(\"td\", {\n parentName: \"tr\",\n \"align\": null\n }, \"2.10.0\")), mdx(\"tr\", {\n parentName: \"tbody\"\n }, mdx(\"td\", {\n parentName: \"tr\",\n \"align\": null\n }, \"showIndicator\"), mdx(\"td\", {\n parentName: \"tr\",\n \"align\": null\n }, \"\\u662F\\u5426\\u5C55\\u793A\\u6307\\u793A\\u5668\"), mdx(\"td\", {\n parentName: \"tr\",\n \"align\": null\n }, \"boolean\"), mdx(\"td\", {\n parentName: \"tr\",\n \"align\": null\n }, \"true\"), mdx(\"td\", {\n parentName: \"tr\",\n \"align\": null\n }, \"2.10.0\")), mdx(\"tr\", {\n parentName: \"tbody\"\n }, mdx(\"td\", {\n parentName: \"tr\",\n \"align\": null\n }, \"slideDirection\"), mdx(\"td\", {\n parentName: \"tr\",\n \"align\": null\n }, \"\\u52A8\\u753B\\u6548\\u679C\\u4E3A\", mdx(\"inlineCode\", {\n parentName: \"td\"\n }, \"slide\"), \"\\u65F6\\u7684\\u6ED1\\u52A8\\u7684\\u65B9\\u5411\\uFF0C\\u53EF\\u9009\\u503C\\u6709\\uFF1A \", mdx(\"inlineCode\", {\n parentName: \"td\"\n }, \"left\"), \"\\u3001\", mdx(\"inlineCode\", {\n parentName: \"td\"\n }, \"right\")), mdx(\"td\", {\n parentName: \"tr\",\n \"align\": null\n }, \"\\\"left\\\" \", \"|\", \" \\\"right\\\"\"), mdx(\"td\", {\n parentName: \"tr\",\n \"align\": null\n }, \"\\\"left\\\"\"), mdx(\"td\", {\n parentName: \"tr\",\n \"align\": null\n }, \"2.10.0\")), mdx(\"tr\", {\n parentName: \"tbody\"\n }, mdx(\"td\", {\n parentName: \"tr\",\n \"align\": null\n }, \"speed\"), mdx(\"td\", {\n parentName: \"tr\",\n \"align\": null\n }, \"\\u5207\\u6362\\u901F\\u5EA6\\uFF0C\\u5355\\u4F4Dms\"), mdx(\"td\", {\n parentName: \"tr\",\n \"align\": null\n }, \"number\"), mdx(\"td\", {\n parentName: \"tr\",\n \"align\": null\n }, \"300\"), mdx(\"td\", {\n parentName: \"tr\",\n \"align\": null\n }, \"2.10.0\")), mdx(\"tr\", {\n parentName: \"tbody\"\n }, mdx(\"td\", {\n parentName: \"tr\",\n \"align\": null\n }, \"style\"), mdx(\"td\", {\n parentName: \"tr\",\n \"align\": null\n }, \"\\u5185\\u8054\\u6837\\u5F0F\"), mdx(\"td\", {\n parentName: \"tr\",\n \"align\": null\n }, \"CSSProperties\"), mdx(\"td\", {\n parentName: \"tr\",\n \"align\": null\n }, \"-\"), mdx(\"td\", {\n parentName: \"tr\",\n \"align\": null\n }, \"2.10.0\")), mdx(\"tr\", {\n parentName: \"tbody\"\n }, mdx(\"td\", {\n parentName: \"tr\",\n \"align\": null\n }, \"trigger\"), mdx(\"td\", {\n parentName: \"tr\",\n \"align\": null\n }, \"\\u6307\\u793A\\u5668\\u89E6\\u53D1\\u7684\\u65F6\\u673A\\uFF0C\\u53EF\\u9009\\u503C\\u6709\\uFF1A \", mdx(\"inlineCode\", {\n parentName: \"td\"\n }, \"hover\"), \"\\u3001\", mdx(\"inlineCode\", {\n parentName: \"td\"\n }, \"click\")), mdx(\"td\", {\n parentName: \"tr\",\n \"align\": null\n }, \"\\\"hover\\\" \", \"|\", \" \\\"click\\\"\"), mdx(\"td\", {\n parentName: \"tr\",\n \"align\": null\n }, \"-\"), mdx(\"td\", {\n parentName: \"tr\",\n \"align\": null\n }, \"2.10.0\")))), mdx(\"p\", {\n parentName: \"section\"\n }, mdx(\"strong\", {\n parentName: \"p\"\n }, \"ArrowButton\")), mdx(\"table\", {\n parentName: \"section\"\n }, mdx(\"thead\", {\n parentName: \"table\"\n }, mdx(\"tr\", {\n parentName: \"thead\"\n }, mdx(\"th\", {\n parentName: \"tr\",\n \"align\": null\n }, \"\\u5C5E\\u6027\"), mdx(\"th\", {\n parentName: \"tr\",\n \"align\": null\n }, \"\\u8BF4\\u660E\"), mdx(\"th\", {\n parentName: \"tr\",\n \"align\": null\n }, \"\\u7C7B\\u578B\"), mdx(\"th\", {\n parentName: \"tr\",\n \"align\": null\n }, \"\\u9ED8\\u8BA4\\u503C\"), mdx(\"th\", {\n parentName: \"tr\",\n \"align\": null\n }, \"\\u7248\\u672C\"))), mdx(\"tbody\", {\n parentName: \"table\"\n }, mdx(\"tr\", {\n parentName: \"tbody\"\n }, mdx(\"td\", {\n parentName: \"tr\",\n \"align\": null\n }, \"props\"), mdx(\"td\", {\n parentName: \"tr\",\n \"align\": null\n }, \"\\u7BAD\\u5934div\\u4E0A\\u7684\\u53EF\\u4F20\\u53C2\\u6570\\uFF0C\\u5305\\u62ECstyle, onClick\\u4E8B\\u4EF6\\u7B49\"), mdx(\"td\", {\n parentName: \"tr\",\n \"align\": null\n }, \"React.DetailedHTMLProps\", \", HTMLDivElement\", \">\"), mdx(\"td\", {\n parentName: \"tr\",\n \"align\": null\n }, \"-\"), mdx(\"td\", {\n parentName: \"tr\",\n \"align\": null\n }, \"2.10.0\")), mdx(\"tr\", {\n parentName: \"tbody\"\n }, mdx(\"td\", {\n parentName: \"tr\",\n \"align\": null\n }, \"children\"), mdx(\"td\", {\n parentName: \"tr\",\n \"align\": null\n }, \"\\u7BAD\\u5934\\u81EA\\u5B9A\\u4E49Icon\"), mdx(\"td\", {\n parentName: \"tr\",\n \"align\": null\n }, \"React.ReactNode\"), mdx(\"td\", {\n parentName: \"tr\",\n \"align\": null\n }, \"-\"), mdx(\"td\", {\n parentName: \"tr\",\n \"align\": null\n }, \"2.10.0\"))))), mdx(\"section\", null, mdx(\"h2\", {\n parentName: \"section\"\n }, \"Methods\"), mdx(\"p\", {\n parentName: \"section\"\n }, \"\\u7ED1\\u5B9A\\u5728\\u7EC4\\u4EF6\\u5B9E\\u4F8B\\u4E0A\\u7684\\u65B9\\u6CD5\\uFF0C\\u53EF\\u4EE5\\u901A\\u8FC7 ref \\u8C03\\u7528\\u5B9E\\u73B0\\u67D0\\u4E9B\\u7279\\u6B8A\\u4EA4\\u4E92\"), mdx(\"table\", {\n parentName: \"section\"\n }, mdx(\"thead\", {\n parentName: \"table\"\n }, mdx(\"tr\", {\n parentName: \"thead\"\n }, mdx(\"th\", {\n parentName: \"tr\",\n \"align\": null\n }, \"\\u65B9\\u6CD5\"), mdx(\"th\", {\n parentName: \"tr\",\n \"align\": null\n }, \"\\u8BF4\\u660E\"), mdx(\"th\", {\n parentName: \"tr\",\n \"align\": null\n }, \"\\u7248\\u672C\"))), mdx(\"tbody\", {\n parentName: \"table\"\n }, mdx(\"tr\", {\n parentName: \"tbody\"\n }, mdx(\"td\", {\n parentName: \"tr\",\n \"align\": null\n }, \"play()\"), mdx(\"td\", {\n parentName: \"tr\",\n \"align\": null\n }, \"\\u64AD\\u653E\"), mdx(\"td\", {\n parentName: \"tr\",\n \"align\": null\n }, \"2.10.0\")), mdx(\"tr\", {\n parentName: \"tbody\"\n }, mdx(\"td\", {\n parentName: \"tr\",\n \"align\": null\n }, \"stop()\"), mdx(\"td\", {\n parentName: \"tr\",\n \"align\": null\n }, \"\\u505C\\u6B62\\u64AD\\u653E\"), mdx(\"td\", {\n parentName: \"tr\",\n \"align\": null\n }, \"2.10.0\")), mdx(\"tr\", {\n parentName: \"tbody\"\n }, mdx(\"td\", {\n parentName: \"tr\",\n \"align\": null\n }, \"goTo(targetIndex)\"), mdx(\"td\", {\n parentName: \"tr\",\n \"align\": null\n }, \"\\u5207\\u6362\\u5230\\u6307\\u5B9A\\u4F4D\\u7F6E\"), mdx(\"td\", {\n parentName: \"tr\",\n \"align\": null\n }, \"2.10.0\")), mdx(\"tr\", {\n parentName: \"tbody\"\n }, mdx(\"td\", {\n parentName: \"tr\",\n \"align\": null\n }, \"prev()\"), mdx(\"td\", {\n parentName: \"tr\",\n \"align\": null\n }, \"\\u5207\\u6362\\u5230\\u4E0A\\u4E00\\u4F4D\\u7F6E\"), mdx(\"td\", {\n parentName: \"tr\",\n \"align\": null\n }, \"2.10.0\")), mdx(\"tr\", {\n parentName: \"tbody\"\n }, mdx(\"td\", {\n parentName: \"tr\",\n \"align\": null\n }, \"next()\"), mdx(\"td\", {\n parentName: \"tr\",\n \"align\": null\n }, \"\\u5207\\u6362\\u5230\\u4E0B\\u4E00\\u4F4D\\u7F6E\"), mdx(\"td\", {\n parentName: \"tr\",\n \"align\": null\n }, \"2.10.0\"))))), mdx(\"section\", null, mdx(\"h2\", {\n parentName: \"section\"\n }, \"\\u8BBE\\u8BA1\\u53D8\\u91CF\"), mdx(DesignToken, {\n mdxType: \"DesignToken\"\n })));\n}\n;\nMDXContent.isMDXComponent = true;"}},"pageContext":{"slug":"zh-CN/show/carousel","next":{"fields":{"slug":"en-US/show/collapse"},"id":"f346a3c7-57c3-5eed-b80e-3ae777483406","frontmatter":{"title":"Collapse","localeCode":"en-US","icon":"doc-accordion","showNew":null}},"previous":{"fields":{"slug":"en-US/show/carousel"},"id":"cc5d99b2-9f49-5026-aa72-a4c35ea71ea8","frontmatter":{"title":"Carousel","localeCode":"en-US","icon":"doc-carousel","showNew":null}}}},"staticQueryHashes":["1348983216229725","1477422646229725","3245198693229725","417590761229725","63159454229725"]}