{"componentChunkName":"component---src-templates-post-template-js","path":"/en-US/show/carousel","result":{"data":{"current":{"frontmatter":{"title":"Carousel","order":66,"brief":"Carousel is a media component that can display the effect of playing multiple pictures in turn in a visualization application.","icon":"doc-carousel"},"fields":{"type":"show"},"tableOfContents":{"items":[{"url":"#demos","title":"Demos","items":[{"url":"#how-to-import","title":"How to import"},{"url":"#basic-carousel","title":"Basic Carousel"},{"url":"#theme-switch","title":"Theme Switch"},{"url":"#indicators","title":"Indicators"},{"url":"#arrows","title":"Arrows"},{"url":"#custom-arrow","title":"Custom Arrow"},{"url":"#play-parameters","title":"Play Parameters"},{"url":"#animation-and-speed","title":"Animation and Speed"},{"url":"#controlled-carousel","title":"Controlled Carousel"},{"url":"#api-reference","title":"API reference"}]},{"url":"#methods","title":"Methods"},{"url":"#design-tokens","title":"Design Tokens"}]},"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\": \"en-US\",\n \"order\": 66,\n \"category\": \"Show\",\n \"title\": \"Carousel\",\n \"subTitle\": \"Carousel\",\n \"icon\": \"doc-carousel\",\n \"brief\": \"Carousel is a media component that can display the effect of playing multiple pictures in turn in a visualization application.\"\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 }, \"Demos\"), mdx(\"h3\", {\n parentName: \"section\"\n }, \"How to import\"), 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 }, \"Basic Carousel\"), mdx(\"p\", {\n parentName: \"section\"\n }, \"Basic carousel\"), 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 Design System Management', 'From Semi Design, To Any Design', 'Quickly define your design system and apply it to design drafts and code'],\\n ['Semi Material', 'Customized components for business scenarios, support online preview and debugging', 'Content co-authored by Semi Design users'],\\n ['Semi Template', 'Efficient Design2Code converts design into real code in seconds', 'One-click conversion of massive page template front-end code'],\\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 }, \"Theme Switch\"), mdx(\"p\", {\n parentName: \"section\"\n }, \"Three themes are defined by default: \", 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 Design System Management', 'From Semi Design, To Any Design', 'Quickly define your design system and apply it to design drafts and code'],\\n ['Semi Material', 'Customized components for business scenarios, support online preview and debugging', 'Content co-authored by Semi Design users'],\\n ['Semi Template', 'Efficient Design2Code converts design into real code in seconds', 'One-click conversion of massive page template front-end code'],\\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
theme
\\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 }, \"Indicators\"), mdx(\"p\", {\n parentName: \"section\"\n }, \"Indicators can be adjusted for type, position, size\", mdx(\"br\", {\n parentName: \"p\"\n }), \"\\n\", \"type: \", 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\", \"position: \", 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\", \"size: \", 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 Design System Management', 'From Semi Design, To Any Design', 'Quickly define your design system and apply it to design drafts and code'],\\n ['Semi Material', 'Customized components for business scenarios, support online preview and debugging', 'Content co-authored by Semi Design users'],\\n ['Semi Template', 'Efficient Design2Code converts design into real code in seconds', 'One-click conversion of massive page template front-end code'],\\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
type
\\n setType(e.target.value)} value={type} type=\\\"button\\\">\\n dot\\n line\\n columnar\\n \\n \\n \\n
position
\\n setPosition(e.target.value)} value={position} type=\\\"button\\\">\\n left\\n center\\n right\\n \\n \\n \\n
size
\\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 }, \"Arrows\"), mdx(\"p\", {\n parentName: \"section\"\n }, \"Control whether the arrow is visible through the showArrow property\", mdx(\"br\", {\n parentName: \"p\"\n }), \"\\n\", \"If the arrow is visible, use the arrowType property to control the timing of the arrow display\"), 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 Design System Management', 'From Semi Design, To Any Design', 'Quickly define your design system and apply it to design drafts and code'],\\n ['Semi Material', 'Customized components for business scenarios, support online preview and debugging', 'Content co-authored by Semi Design users'],\\n ['Semi Template', 'Efficient Design2Code converts design into real code in seconds', 'One-click conversion of massive page template front-end code'],\\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
arrow
\\n setShow(e.target.value)} value={show} type=\\\"button\\\">\\n show\\n hide\\n \\n \\n \\n
show time
\\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 }, \"Custom Arrow\"), mdx(\"p\", {\n parentName: \"section\"\n }, \"Customize arrow styles and click events through the arrowProps property\"), 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 Design System Management', 'From Semi Design, To Any Design', 'Quickly define your design system and apply it to design drafts and code'],\\n ['Semi Material', 'Customized components for business scenarios, support online preview and debugging', 'Content co-authored by Semi Design users'],\\n ['Semi Template', 'Efficient Design2Code converts design into real code in seconds', 'One-click conversion of massive page template front-end code'],\\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 }, \"Play Parameters\"), mdx(\"p\", {\n parentName: \"section\"\n }, \"Pass the parameter interval to autoPlay to control the time interval between two pictures, and pass hoverToPause to control whether to stop playing when the mouse is placed on the picture\"), 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 Design System Management', 'From Semi Design, To Any Design', 'Quickly define your design system and apply it to design drafts and code'],\\n ['Semi Material', 'Customized components for business scenarios, support online preview and debugging', 'Content co-authored by Semi Design users'],\\n ['Semi Template', 'Efficient Design2Code converts design into real code in seconds', 'One-click conversion of massive page template front-end code'],\\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 }, \"Animation and Speed\"), mdx(\"p\", {\n parentName: \"section\"\n }, \"Control the animation by giving the animation property, optional values are \", mdx(\"inlineCode\", {\n parentName: \"p\"\n }, \"fade\"), \", \", mdx(\"inlineCode\", {\n parentName: \"p\"\n }, \"slide\"), mdx(\"br\", {\n parentName: \"p\"\n }), \"\\n\", \"Control the switching time between two pictures by giving the speed attribute, the unit is ms\"), 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 Design System Management', 'From Semi Design, To Any Design', 'Quickly define your design system and apply it to design drafts and code'],\\n ['Semi Material', 'Customized components for business scenarios, support online preview and debugging', 'Content co-authored by Semi Design users'],\\n ['Semi Template', 'Efficient Design2Code converts design into real code in seconds', 'One-click conversion of massive page template front-end code'],\\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 }, \"Controlled Carousel\"), 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 Design System Management', 'From Semi Design, To Any Design', 'Quickly define your design system and apply it to design drafts and code'],\\n ['Semi Material', 'Customized components for business scenarios, support online preview and debugging', 'Content co-authored by Semi Design users'],\\n ['Semi Template', 'Efficient Design2Code converts design into real code in seconds', 'One-click conversion of massive page template front-end code'],\\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 reference\"), 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 }, \"PROPERTIES\"), mdx(\"th\", {\n parentName: \"tr\",\n \"align\": null\n }, \"INSTRUCTIONS\"), mdx(\"th\", {\n parentName: \"tr\",\n \"align\": null\n }, \"TYPE\"), mdx(\"th\", {\n parentName: \"tr\",\n \"align\": null\n }, \"DEFAULT\"), mdx(\"th\", {\n parentName: \"tr\",\n \"align\": null\n }, \"VERSION\"))), 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 }, \"Controlled property\"), 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 }, \"Animation, optional:\", mdx(\"inlineCode\", {\n parentName: \"td\"\n }, \"fade\"), \", \", 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 }, \"Arrow parameters for custom arrow styles and click events\"), 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 }, \"Whether to automatically display in a loop, or pass in { interval: Auto switch time interval(default: 2000), hoverToPause: Whether to pause automatic switching when the mouse is hovering(default: 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 }, \"The className of Carousel container\"), 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 }, \"The index displayed by default when initializing\"), 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 }, \"Indicator position, optional values are: \", 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 }, \"Indicator size, optional values are: \", 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 }, \"Indicator type, optional values are: \", 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 }, \"Indicator and arrow theme, optional values are: \", 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 }, \"Callback when image is switched\"), 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 }, \"Arrow display timing, optional values are: \", 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 }, \"Whether to show arrows\"), 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 }, \"Whether to show the indicator\"), 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 }, \"The direction of the slide when the animation effect is \", mdx(\"inlineCode\", {\n parentName: \"td\"\n }, \"slide\"), \", optional: \", 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 }, \"Switching speed\"), 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 }, \"Carousel style\"), 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 }, \"When the indicator is triggered, the optional values are: \", 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 }, \"PROPERTIES\"), mdx(\"th\", {\n parentName: \"tr\",\n \"align\": null\n }, \"INSTRUCTIONS\"), mdx(\"th\", {\n parentName: \"tr\",\n \"align\": null\n }, \"TYPE\"), mdx(\"th\", {\n parentName: \"tr\",\n \"align\": null\n }, \"DEFAULT\"), mdx(\"th\", {\n parentName: \"tr\",\n \"align\": null\n }, \"VERSION\"))), 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 }, \"Parameters on the arrow div, including style, onClick events, etc\"), mdx(\"td\", {\n parentName: \"tr\",\n \"align\": null\n }, \"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 }, \"Arrow custom icon\"), 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 }, \"Some internal methods provided by Carousel can be accessed through ref:\"), 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 }, \"Method\"), mdx(\"th\", {\n parentName: \"tr\",\n \"align\": null\n }, \"Instructions\"), mdx(\"th\", {\n parentName: \"tr\",\n \"align\": null\n }, \"Version\"))), 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 }, \"Play\"), 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 }, \"Stop\"), 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 }, \"Go to target index\"), 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 }, \"Go to previous index\"), 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 }, \"Go to next index\"), mdx(\"td\", {\n parentName: \"tr\",\n \"align\": null\n }, \"2.10.0\"))))), mdx(\"section\", null, mdx(\"h2\", {\n parentName: \"section\"\n }, \"Design Tokens\"), mdx(DesignToken, {\n mdxType: \"DesignToken\"\n })));\n}\n;\nMDXContent.isMDXComponent = true;"}},"pageContext":{"slug":"en-US/show/carousel","next":{"fields":{"slug":"zh-CN/show/carousel"},"id":"049a2681-1c44-533f-9970-d57c5e606c43","frontmatter":{"title":"Carousel 轮播图","localeCode":"zh-CN","icon":"doc-carousel","showNew":null}},"previous":{"fields":{"slug":"zh-CN/show/card"},"id":"a570b45b-2d69-5127-b7f2-dea8f58de5cb","frontmatter":{"title":"Card 卡片","localeCode":"zh-CN","icon":"doc-card","showNew":null}}}},"staticQueryHashes":["1348983216229725","1477422646229725","3245198693229725","417590761229725","63159454229725"]}