mirror of
https://github.com/element-plus/element-plus.git
synced 2025-02-17 11:49:41 +08:00
30 lines
30 KiB
HTML
30 lines
30 KiB
HTML
<!DOCTYPE html>
|
|
<html lang="en-US">
|
|
<head>
|
|
<meta charset="utf-8">
|
|
<meta name="viewport" content="width=device-width,initial-scale=1">
|
|
<title>Carousel | Element Plus</title>
|
|
<meta name="description" content="a Vue 3 based component library for designers and developers">
|
|
<link rel="stylesheet" href="/assets/style.cd798b96.css">
|
|
<link rel="modulepreload" href="/assets/chunks/vertical.42bff84c.js">
|
|
<link rel="modulepreload" href="/assets/app.e2c1f434.js">
|
|
<link rel="modulepreload" href="/assets/en-US_component_carousel.md.17bbb7d1.lean.js">
|
|
|
|
<link rel="icon" href="/images/element-plus-logo-small.svg">
|
|
<link rel="stylesheet" href="//fonts.loli.net/css?family=Inter:300,400,500,600|Open+Sans:400,600;display=swap">
|
|
<link rel="stylesheet" href="//unpkg.com/nprogress@0.2.0/nprogress.css">
|
|
<script>window.supportedLangs=["en-US","zh-CN"];</script>
|
|
<script>(()=>{const o=window.supportedLangs,a="preferred_lang",s="en-US",c={en:"en-US",fr:"fr-FR",es:"es-ES"};let t=localStorage.getItem(a)||navigator.language;const n=c[t]||(o.includes(t)?t:s);if(localStorage.setItem(a,n),t=n,!location.pathname.startsWith(`/${t}`)){const e=[`/${t}`].concat(location.pathname.split("/").slice(2)).join("/");location.pathname=e.endsWith(".html")||e.endsWith("/")?e:e.concat("/")}})();</script>
|
|
<script async="true" src="https://www.googletagmanager.com/gtag/js?id=UA-175337989-1"></script>
|
|
<script>window.dataLayer=window.dataLayer||[];function gtag(){dataLayer.push(arguments)}gtag("js",new Date),gtag("config","UA-175337989-1");</script>
|
|
<script>(function(t,s,n,h,j,e){t.hj=t.hj||function(){(t.hj.q=t.hj.q||[]).push(arguments)},t._hjSettings={hjid:2894908,hjsv:6},j=s.getElementsByTagName("head")[0],e=s.createElement("script"),e.async=1,e.src=n+t._hjSettings.hjid+h+t._hjSettings.hjsv,j.appendChild(e)})(window,document,"https://static.hotjar.com/c/hotjar-",".js?sv=");</script>
|
|
<meta name="twitter:title" content="Carousel | Element Plus">
|
|
<meta property="og:title" content="Carousel | Element Plus">
|
|
</head>
|
|
<body>
|
|
<div id="app"><div class="App"><!----><header class="navbar has-sidebar"><div class="navbar-wrapper" data-v-60516214><div class="container" data-v-60516214><div class="logo-container" data-v-60516214><a href="/" data-v-60516214><img class="logo" src="/images/element-plus-logo.svg" alt="Element Plus Logo" data-v-60516214></a></div><div class="content" data-v-60516214><div id="docsearch" class="algolia-search-box search" data-v-60516214></div><nav class="navbar-menu menu" data-v-60516214><!--[--><a class="link-item link is-menu-link" href="/en-US/guide/design" data-v-3d10afe9 data-v-36735cb0><!--[--><!--[-->Guide<!--]--><!--]--><!----></a><a class="link-item link is-menu-link active" href="/en-US/component/button" data-v-3d10afe9 data-v-36735cb0><!--[--><!--[-->Component<!--]--><!--]--><!----></a><a class="link-item link is-menu-link" href="/en-US/resource/index" data-v-3d10afe9 data-v-36735cb0><!--[--><!--[-->Resource<!--]--><!--]--><!----></a><!--]--></nav><!----><div class="translation-container translation" data-v-60516214 data-v-1e752d22><!----></div><div class="social-links" data-v-60516214 data-v-16ed5a92><!--[--><a href="https://github.com/element-plus/element-plus" title="GitHub" target="_blank" rel="noreferrer noopener" class="social-link" data-v-16ed5a92 data-v-4d8591cc><i class="el-icon" style="font-size:20px;" data-v-4d8591cc><!--[--><svg width="1em" height="1em" preserveaspectratio="xMidYMid meet" viewbox="0 0 24 24" data-v-4d8591cc><path fill="currentColor" d="M12 2C6.475 2 2 6.475 2 12a9.994 9.994 0 0 0 6.838 9.488c.5.087.687-.213.687-.476c0-.237-.013-1.024-.013-1.862c-2.512.463-3.162-.612-3.362-1.175c-.113-.288-.6-1.175-1.025-1.413c-.35-.187-.85-.65-.013-.662c.788-.013 1.35.725 1.538 1.025c.9 1.512 2.338 1.087 2.912.825c.088-.65.35-1.087.638-1.337c-2.225-.25-4.55-1.113-4.55-4.938c0-1.088.387-1.987 1.025-2.688c-.1-.25-.45-1.275.1-2.65c0 0 .837-.262 2.75 1.026a9.28 9.28 0 0 1 2.5-.338c.85 0 1.7.112 2.5.337c1.912-1.3 2.75-1.024 2.75-1.024c.55 1.375.2 2.4.1 2.65c.637.7 1.025 1.587 1.025 2.687c0 3.838-2.337 4.688-4.562 4.938c.362.312.675.912.675 1.85c0 1.337-.013 2.412-.013 2.75c0 .262.188.574.688.474A10.016 10.016 0 0 0 22 12c0-5.525-4.475-10-10-10z"></path></svg><!--]--></i></a><!--]--></div><div class="menu-hamburger hamburger" role="button" data-v-60516214><span class="hamburger-1"></span><span class="hamburger-2"></span><span class="hamburger-3"></span></div></div></div></div><!----></header><div class="sub-nav"><div class="sidebar-button"><i class="el-icon" style="font-size:24px;"><!--[--><svg viewbox="0 0 24 24"><g fill="none"><path d="M4 6a1 1 0 0 1 1-1h14a1 1 0 1 1 0 2H5a1 1 0 0 1-1-1z" fill="currentColor"></path><path d="M4 18a1 1 0 0 1 1-1h14a1 1 0 1 1 0 2H5a1 1 0 0 1-1-1z" fill="currentColor"></path><path d="M11 11a1 1 0 1 0 0 2h8a1 1 0 1 0 0-2h-8z" fill="currentColor"></path></g></svg><!--]--></i></div><button ref_key="_ref" class="el-button el-button--text go-back-top" type="button" style=""><!--v-if--><span class=""><!--[-->Back to top<!--]--></span></button></div><aside class="sidebar"><!--[--><div class="sponsors" data-v-147db1c1><p class="sponsors-title" data-v-147db1c1>Sponsored by</p><div class="container" data-v-147db1c1 data-v-95d9301c><!--[--><div class="sponsor-item" data-v-95d9301c><a href="https://www.jnpfsoft.com/index.html?from=elementUI" title="JNPF" target="_blank" data-v-95d9301c><img src="/images/jnpfsoft.jpg" alt="JNPF" data-v-95d9301c></a></div><div class="sponsor-item" data-v-95d9301c><a href="https://vform666.com/vform3.html?from=element_plus" title="VForm" target="_blank" data-v-95d9301c><img src="/images/vform-banner.jpg" alt="VForm" data-v-95d9301c></a></div><!--]--></div><div class="container" data-v-147db1c1 data-v-6d40fc59><!--[--><div class="sponsor-item" data-v-6d40fc59><a href="https://bit.dev/?from=element-ui" title="bit" target="_blank" data-v-6d40fc59><img src="/images/bit.svg" alt="bit" data-v-6d40fc59></a></div><div class="sponsor-item" data-v-6d40fc59><a href="https://www.renren.io/?from=element-ui" title="renren.io" target="_blank" data-v-6d40fc59><img src="/images/renren.png" alt="renren.io" data-v-6d40fc59></a></div><div class="sponsor-item" data-v-6d40fc59><a href="https://form.making.link/?from=element_plus" title="FormMaking" target="_blank" data-v-6d40fc59><img src="/images/formmaking.png" alt="FormMaking" data-v-6d40fc59></a></div><!--]--></div></div><!--]--><div class="sidebar-groups"><!--[--><section class="sidebar-group"><p class="sidebar-group__title">Basic</p><!--[--><a class="link" href="/en-US/component/button" data-v-85b3e708><p class="link-text" data-v-85b3e708>Button</p></a><a class="link" href="/en-US/component/border" data-v-85b3e708><p class="link-text" data-v-85b3e708>Border</p></a><a class="link" href="/en-US/component/color" data-v-85b3e708><p class="link-text" data-v-85b3e708>Color</p></a><a class="link" href="/en-US/component/container" data-v-85b3e708><p class="link-text" data-v-85b3e708>Layout Container</p></a><a class="link" href="/en-US/component/icon" data-v-85b3e708><p class="link-text" data-v-85b3e708>Icon</p></a><a class="link" href="/en-US/component/layout" data-v-85b3e708><p class="link-text" data-v-85b3e708>Layout</p></a><a class="link" href="/en-US/component/link" data-v-85b3e708><p class="link-text" data-v-85b3e708>Link</p></a><a class="link" href="/en-US/component/scrollbar" data-v-85b3e708><p class="link-text" data-v-85b3e708>Scrollbar</p></a><a class="link" href="/en-US/component/space" data-v-85b3e708><p class="link-text" data-v-85b3e708>Space</p></a><a class="link" href="/en-US/component/typography" data-v-85b3e708><p class="link-text" data-v-85b3e708>Typography</p></a><!--]--></section><section class="sidebar-group"><p class="sidebar-group__title">Configuration</p><!--[--><a class="link" href="/en-US/component/config-provider" data-v-85b3e708><p class="link-text" data-v-85b3e708>Config Provider</p></a><!--]--></section><section class="sidebar-group"><p class="sidebar-group__title">Form</p><!--[--><a class="link" href="/en-US/component/cascader" data-v-85b3e708><p class="link-text" data-v-85b3e708>Cascader</p></a><a class="link" href="/en-US/component/checkbox" data-v-85b3e708><p class="link-text" data-v-85b3e708>Checkbox</p></a><a class="link" href="/en-US/component/color-picker" data-v-85b3e708><p class="link-text" data-v-85b3e708>Color Picker</p></a><a class="link" href="/en-US/component/date-picker" data-v-85b3e708><p class="link-text" data-v-85b3e708>Date Picker</p></a><a class="link" href="/en-US/component/datetime-picker" data-v-85b3e708><p class="link-text" data-v-85b3e708>DateTime Picker</p></a><a class="link" href="/en-US/component/form" data-v-85b3e708><p class="link-text" data-v-85b3e708>Form</p></a><a class="link" href="/en-US/component/input" data-v-85b3e708><p class="link-text" data-v-85b3e708>Input</p></a><a class="link" href="/en-US/component/input-number" data-v-85b3e708><p class="link-text" data-v-85b3e708>Input Number</p></a><a class="link" href="/en-US/component/radio" data-v-85b3e708><p class="link-text" data-v-85b3e708>Radio</p></a><a class="link" href="/en-US/component/rate" data-v-85b3e708><p class="link-text" data-v-85b3e708>Rate</p></a><a class="link" href="/en-US/component/select" data-v-85b3e708><p class="link-text" data-v-85b3e708>Select</p></a><a class="link" href="/en-US/component/select-v2" data-v-85b3e708><p class="link-text" data-v-85b3e708>Virtualized Select</p></a><a class="link" href="/en-US/component/slider" data-v-85b3e708><p class="link-text" data-v-85b3e708>Slider</p></a><a class="link" href="/en-US/component/switch" data-v-85b3e708><p class="link-text" data-v-85b3e708>Switch</p></a><a class="link" href="/en-US/component/time-picker" data-v-85b3e708><p class="link-text" data-v-85b3e708>Time Picker</p></a><a class="link" href="/en-US/component/time-select" data-v-85b3e708><p class="link-text" data-v-85b3e708>Time Select</p></a><a class="link" href="/en-US/component/transfer" data-v-85b3e708><p class="link-text" data-v-85b3e708>Transfer</p></a><a class="link" href="/en-US/component/upload" data-v-85b3e708><p class="link-text" data-v-85b3e708>Upload</p></a><!--]--></section><section class="sidebar-group"><p class="sidebar-group__title">Data</p><!--[--><a class="link" href="/en-US/component/avatar" data-v-85b3e708><p class="link-text" data-v-85b3e708>Avatar</p></a><a class="link" href="/en-US/component/badge" data-v-85b3e708><p class="link-text" data-v-85b3e708>Badge</p></a><a class="link" href="/en-US/component/calendar" data-v-85b3e708><p class="link-text" data-v-85b3e708>Calendar</p></a><a class="link" href="/en-US/component/card" data-v-85b3e708><p class="link-text" data-v-85b3e708>Card</p></a><a class="link active" href="/en-US/component/carousel" data-v-85b3e708><p class="link-text" data-v-85b3e708>Carousel</p></a><a class="link" href="/en-US/component/collapse" data-v-85b3e708><p class="link-text" data-v-85b3e708>Collapse</p></a><a class="link" href="/en-US/component/descriptions" data-v-85b3e708><p class="link-text" data-v-85b3e708>Descriptions</p></a><a class="link" href="/en-US/component/empty" data-v-85b3e708><p class="link-text" data-v-85b3e708>Empty</p></a><a class="link" href="/en-US/component/image" data-v-85b3e708><p class="link-text" data-v-85b3e708>Image</p></a><a class="link" href="/en-US/component/infinite-scroll" data-v-85b3e708><p class="link-text" data-v-85b3e708>Infinite Scroll</p></a><a class="link" href="/en-US/component/pagination" data-v-85b3e708><p class="link-text" data-v-85b3e708>Pagination</p></a><a class="link" href="/en-US/component/progress" data-v-85b3e708><p class="link-text" data-v-85b3e708>Progress</p></a><a class="link" href="/en-US/component/result" data-v-85b3e708><p class="link-text" data-v-85b3e708>Result</p></a><a class="link" href="/en-US/component/skeleton" data-v-85b3e708><p class="link-text" data-v-85b3e708>Skeleton</p></a><a class="link" href="/en-US/component/table" data-v-85b3e708><p class="link-text" data-v-85b3e708>Table</p></a><a class="link" href="/en-US/component/tag" data-v-85b3e708><p class="link-text" data-v-85b3e708>Tag</p></a><a class="link" href="/en-US/component/timeline" data-v-85b3e708><p class="link-text" data-v-85b3e708>Timeline</p></a><a class="link" href="/en-US/component/tree" data-v-85b3e708><p class="link-text" data-v-85b3e708>Tree</p></a><a class="link" href="/en-US/component/tree-v2" data-v-85b3e708><p class="link-text" data-v-85b3e708>Virtualized Tree</p></a><!--]--></section><section class="sidebar-group"><p class="sidebar-group__title">Navigation</p><!--[--><a class="link" href="/en-US/component/affix" data-v-85b3e708><p class="link-text" data-v-85b3e708>Affix</p></a><a class="link" href="/en-US/component/backtop" data-v-85b3e708><p class="link-text" data-v-85b3e708>Backtop</p></a><a class="link" href="/en-US/component/breadcrumb" data-v-85b3e708><p class="link-text" data-v-85b3e708>Breadcrumb</p></a><a class="link" href="/en-US/component/dropdown" data-v-85b3e708><p class="link-text" data-v-85b3e708>Dropdown</p></a><a class="link" href="/en-US/component/menu" data-v-85b3e708><p class="link-text" data-v-85b3e708>Menu</p></a><a class="link" href="/en-US/component/page-header" data-v-85b3e708><p class="link-text" data-v-85b3e708>Page Header</p></a><a class="link" href="/en-US/component/steps" data-v-85b3e708><p class="link-text" data-v-85b3e708>Steps</p></a><a class="link" href="/en-US/component/tabs" data-v-85b3e708><p class="link-text" data-v-85b3e708>Tabs</p></a><!--]--></section><section class="sidebar-group"><p class="sidebar-group__title">Feedback</p><!--[--><a class="link" href="/en-US/component/alert" data-v-85b3e708><p class="link-text" data-v-85b3e708>Alert</p></a><a class="link" href="/en-US/component/dialog" data-v-85b3e708><p class="link-text" data-v-85b3e708>Dialog</p></a><a class="link" href="/en-US/component/drawer" data-v-85b3e708><p class="link-text" data-v-85b3e708>Drawer</p></a><a class="link" href="/en-US/component/loading" data-v-85b3e708><p class="link-text" data-v-85b3e708>Loading</p></a><a class="link" href="/en-US/component/message" data-v-85b3e708><p class="link-text" data-v-85b3e708>Message</p></a><a class="link" href="/en-US/component/message-box" data-v-85b3e708><p class="link-text" data-v-85b3e708>Message Box</p></a><a class="link" href="/en-US/component/notification" data-v-85b3e708><p class="link-text" data-v-85b3e708>Notification</p></a><a class="link" href="/en-US/component/popconfirm" data-v-85b3e708><p class="link-text" data-v-85b3e708>Pop Confirm</p></a><a class="link" href="/en-US/component/popover" data-v-85b3e708><p class="link-text" data-v-85b3e708>Popover</p></a><a class="link" href="/en-US/component/tooltip" data-v-85b3e708><p class="link-text" data-v-85b3e708>Tooltip</p></a><!--]--></section><section class="sidebar-group"><p class="sidebar-group__title">Others</p><!--[--><a class="link" href="/en-US/component/divider" data-v-85b3e708><p class="link-text" data-v-85b3e708>Divider</p></a><!--]--></section><!--]--></div><!--[--><!--]--></aside><main class="page-content has-sidebar"><div class="doc-content-wrapper"><div class="doc-content-container"><div style="position:relative;" class="doc-content"><div><h1 id="carousel" tabindex="-1">Carousel <a class="header-anchor" href="#carousel" aria-hidden="true">#</a></h1><p>Loop a series of images or texts in a limited space</p><h2 id="basic-usage" tabindex="-1">Basic usage <a class="header-anchor" href="#basic-usage" aria-hidden="true">#</a></h2><!----><h2 id="indicators" tabindex="-1">Indicators <a class="header-anchor" href="#indicators" aria-hidden="true">#</a></h2><p>Indicators can be displayed outside the carousel</p><!----><h2 id="arrows" tabindex="-1">Arrows <a class="header-anchor" href="#arrows" aria-hidden="true">#</a></h2><p>You can define when arrows are displayed</p><!----><h2 id="card-mode" tabindex="-1">Card mode <a class="header-anchor" href="#card-mode" aria-hidden="true">#</a></h2><p>When a page is wide enough but has limited height, you can activate card mode for carousels</p><!----><h2 id="vertical" tabindex="-1">Vertical <a class="header-anchor" href="#vertical" aria-hidden="true">#</a></h2><p>By default, <code>direction</code> is <code>horizontal</code>. Let carousel be displayed in the vertical direction by setting <code>direction</code> to <code>vertical</code>.</p><!----><h2 id="carousel-attributes" tabindex="-1">Carousel Attributes <a class="header-anchor" href="#carousel-attributes" aria-hidden="true">#</a></h2><table><thead><tr><th>Attribute</th><th>Description</th><th>Type</th><th>Accepted Values</th><th>Default</th></tr></thead><tbody><tr><td>height</td><td>height of the carousel</td><td>string</td><td>—</td><td>—</td></tr><tr><td>initial-index</td><td>index of the initially active slide (starting from 0)</td><td>number</td><td>—</td><td>0</td></tr><tr><td>trigger</td><td>how indicators are triggered</td><td>string</td><td>hover/click</td><td>hover</td></tr><tr><td>autoplay</td><td>whether automatically loop the slides</td><td>boolean</td><td>—</td><td>true</td></tr><tr><td>interval</td><td>interval of the auto loop, in milliseconds</td><td>number</td><td>—</td><td>3000</td></tr><tr><td>indicator-position</td><td>position of the indicators</td><td>string</td><td>outside/none</td><td>—</td></tr><tr><td>arrow</td><td>when arrows are shown</td><td>string</td><td>always/hover/never</td><td>hover</td></tr><tr><td>type</td><td>type of the Carousel</td><td>string</td><td>card</td><td>—</td></tr><tr><td>loop</td><td>display the items in loop</td><td>boolean</td><td>-</td><td>true</td></tr><tr><td>direction</td><td>display direction</td><td>string</td><td>horizontal/vertical</td><td>horizontal</td></tr><tr><td>pause-on-hover</td><td>pause autoplay when hover</td><td>boolean</td><td>-</td><td>true</td></tr></tbody></table><h2 id="carousel-events" tabindex="-1">Carousel Events <a class="header-anchor" href="#carousel-events" aria-hidden="true">#</a></h2><table><thead><tr><th>Event Name</th><th>Description</th><th>Parameters</th></tr></thead><tbody><tr><td>change</td><td>triggers when the active slide switches</td><td>index of the new active slide, index of the old active slide</td></tr></tbody></table><h2 id="carousel-methods" tabindex="-1">Carousel Methods <a class="header-anchor" href="#carousel-methods" aria-hidden="true">#</a></h2><table><thead><tr><th>Method</th><th>Description</th><th>Parameters</th></tr></thead><tbody><tr><td>setActiveItem</td><td>manually switch slide</td><td>index of the slide to be switched to, starting from 0; or the <code>name</code> of corresponding <code>el-carousel-item</code></td></tr><tr><td>prev</td><td>switch to the previous slide</td><td>—</td></tr><tr><td>next</td><td>switch to the next slide</td><td>—</td></tr></tbody></table><h2 id="carousel-slots" tabindex="-1">Carousel Slots <a class="header-anchor" href="#carousel-slots" aria-hidden="true">#</a></h2><table><thead><tr><th>Name</th><th>Description</th><th>Subtags</th></tr></thead><tbody><tr><td>-</td><td>customize default content</td><td>Carousel-Item</td></tr></tbody></table><h2 id="carousel-item-attributes" tabindex="-1">Carousel-Item Attributes <a class="header-anchor" href="#carousel-item-attributes" aria-hidden="true">#</a></h2><table><thead><tr><th>Attribute</th><th>Description</th><th>Type</th><th>Accepted Values</th><th>Default</th></tr></thead><tbody><tr><td>name</td><td>name of the item, can be used in <code>setActiveItem</code></td><td>string</td><td>—</td><td>—</td></tr><tr><td>label</td><td>text content for the corresponding indicator</td><td>string</td><td>—</td><td>—</td></tr></tbody></table><h2 id="carousel-item-slots" tabindex="-1">Carousel-Item Slots <a class="header-anchor" href="#carousel-item-slots" aria-hidden="true">#</a></h2><table><thead><tr><th>Name</th><th>Description</th></tr></thead><tbody><tr><td>—</td><td>customize default content</td></tr></tbody></table></div></div><footer class="page-footer" data-v-d1dc05ac><div class="edit" data-v-d1dc05ac><div class="edit-link" data-v-d1dc05ac data-v-7d4aa2c8><a class="link text-sm" href="https://github.com/element-plus/element-plus/edit/dev/docs/en-US/component/carousel.md" target="_blank" rel="noopener noreferrer" data-v-7d4aa2c8>Edit this page on GitHub <i class="el-icon" style="font-size:16px;vertical-align:text-top;line-height:24px;" data-v-7d4aa2c8><!--[--><svg width="1em" height="1em" preserveaspectratio="xMidYMid meet" viewbox="0 0 24 24" data-v-7d4aa2c8><path fill="currentColor" d="M10 6v2H5v11h11v-5h2v6a1 1 0 0 1-1 1H4a1 1 0 0 1-1-1V7a1 1 0 0 1 1-1h6zm11-3v8h-2V6.413l-7.793 7.794l-1.414-1.414L17.585 5H13V3h8z"></path></svg><!--]--></i></a></div></div><div class="updated" data-v-d1dc05ac><p class="last-updated text-sm" data-v-d1dc05ac data-v-2a7b81a2><span class="prefix" data-v-2a7b81a2>Last Updated:</span><span class="datetime" data-v-2a7b81a2></span></p></div></footer><div class="next-and-prev-link" data-v-8ad25866><div class="container" data-v-8ad25866><div class="prev" data-v-8ad25866><a class="link" href="/en-US/component/card" data-v-8ad25866><i class="el-icon mr-1" style="" data-v-8ad25866><!--[--><svg viewbox="0 0 1024 1024" xmlns="http://www.w3.org/2000/svg" data-v-8ad25866><path fill="currentColor" d="M609.408 149.376 277.76 489.6a32 32 0 0 0 0 44.672l331.648 340.352a29.12 29.12 0 0 0 41.728 0 30.592 30.592 0 0 0 0-42.752L339.264 511.936l311.872-319.872a30.592 30.592 0 0 0 0-42.688 29.12 29.12 0 0 0-41.728 0z"></path></svg><!--]--></i><span class="text" data-v-8ad25866>Card</span></a></div><div class="next" data-v-8ad25866><a class="link" href="/en-US/component/collapse" data-v-8ad25866><span class="text" data-v-8ad25866>Collapse</span><i class="el-icon ml-1" style="" data-v-8ad25866><!--[--><svg viewbox="0 0 1024 1024" xmlns="http://www.w3.org/2000/svg" data-v-8ad25866><path fill="currentColor" d="M340.864 149.312a30.592 30.592 0 0 0 0 42.752L652.736 512 340.864 831.872a30.592 30.592 0 0 0 0 42.752 29.12 29.12 0 0 0 41.728 0L714.24 534.336a32 32 0 0 0 0-44.672L382.592 149.376a29.12 29.12 0 0 0-41.728 0z"></path></svg><!--]--></i></a></div></div></div></div><aside ref_key="container" class="toc-wrapper"><nav class="toc-content"><h3 class="toc-content__heading">Contents</h3><ul class="toc-items"><!--[--><li class="toc-item"><a class="toc-link" href="#basic-usage">Basic usage</a><!----></li><li class="toc-item"><a class="toc-link" href="#indicators">Indicators</a><!----></li><li class="toc-item"><a class="toc-link" href="#arrows">Arrows</a><!----></li><li class="toc-item"><a class="toc-link" href="#card-mode">Card mode</a><!----></li><li class="toc-item"><a class="toc-link" href="#vertical">Vertical</a><!----></li><li class="toc-item"><a class="toc-link" href="#carousel-attributes">Carousel Attributes</a><!----></li><li class="toc-item"><a class="toc-link" href="#carousel-events">Carousel Events</a><!----></li><li class="toc-item"><a class="toc-link" href="#carousel-methods">Carousel Methods</a><!----></li><li class="toc-item"><a class="toc-link" href="#carousel-slots">Carousel Slots</a><!----></li><li class="toc-item"><a class="toc-link" href="#carousel-item-attributes">Carousel-Item Attributes</a><!----></li><li class="toc-item"><a class="toc-link" href="#carousel-item-slots">Carousel-Item Slots</a><!----></li><!--]--></ul><div class="toc-marker"></div><div class="join mt-8"><!--[--><a href="mailto:element-plus@outlook.com" target="_blank" class="el-tooltip__trigger"><button ref_key="_ref" class="el-button" type="button" style=""><!--v-if--><span class=""><!--[-->Become a Sponsor!<!--]--></span></button></a><!--teleport start--><!--teleport end--><!--]--></div></nav></aside></div></main><!----></div></div>
|
|
<script>__VP_HASH_MAP__ = JSON.parse("{\"en-us_component_affix.md\":\"a9634a0c\",\"en-us_component_alert.md\":\"8d91f5c5\",\"en-us_component_avatar.md\":\"d8501361\",\"en-us_component_backtop.md\":\"0e1a802e\",\"en-us_component_badge.md\":\"e163ec52\",\"en-us_component_border.md\":\"979635d7\",\"en-us_component_breadcrumb.md\":\"fdb07807\",\"en-us_component_button.md\":\"a44ca78c\",\"en-us_component_calendar.md\":\"d4e227ff\",\"en-us_component_card.md\":\"01ac6f37\",\"en-us_component_carousel.md\":\"17bbb7d1\",\"en-us_component_cascader.md\":\"de0dd4e4\",\"en-us_component_checkbox.md\":\"56d7cc5c\",\"en-us_component_collapse.md\":\"3b7d6a18\",\"en-us_component_color-picker.md\":\"b492421f\",\"en-us_component_color.md\":\"d51e731b\",\"en-us_component_config-provider.md\":\"39fd7e95\",\"en-us_component_container.md\":\"156cc609\",\"en-us_component_date-picker.md\":\"5cf175d0\",\"en-us_component_datetime-picker.md\":\"3b0c1ab8\",\"en-us_component_descriptions.md\":\"bbaf4f32\",\"en-us_component_dialog.md\":\"511aadb0\",\"en-us_component_divider.md\":\"f1aa7d42\",\"en-us_component_drawer.md\":\"b634edc0\",\"en-us_component_dropdown.md\":\"c0a44f67\",\"en-us_component_empty.md\":\"793bac7f\",\"en-us_component_form.md\":\"b39e4013\",\"en-us_component_icon.md\":\"90b68f26\",\"en-us_component_image.md\":\"8c8fdb82\",\"en-us_component_infinite-scroll.md\":\"d3be0931\",\"en-us_component_input-number.md\":\"fb4548e0\",\"en-us_component_input.md\":\"09ac8ae3\",\"en-us_component_layout.md\":\"b82db518\",\"en-us_component_link.md\":\"dc89b40d\",\"en-us_component_loading.md\":\"bde43170\",\"en-us_component_menu.md\":\"c43f9737\",\"en-us_component_message-box.md\":\"42a9a6d9\",\"en-us_component_message.md\":\"f0851ca7\",\"en-us_component_notification.md\":\"8f436c51\",\"en-us_component_page-header.md\":\"3ad5b171\",\"en-us_component_pagination.md\":\"5ff22700\",\"en-us_component_popconfirm.md\":\"5e512a3e\",\"en-us_component_popover.md\":\"32628810\",\"en-us_component_progress.md\":\"47c0b677\",\"en-us_component_radio.md\":\"7eeab4ce\",\"en-us_component_rate.md\":\"d55dc2af\",\"en-us_component_result.md\":\"0ca4c8c5\",\"en-us_component_scrollbar.md\":\"96ce3c51\",\"en-us_component_select-v2.md\":\"44d2d76d\",\"en-us_component_select.md\":\"341bef43\",\"en-us_component_skeleton.md\":\"cb26c939\",\"en-us_component_slider.md\":\"60ff86b1\",\"en-us_component_space.md\":\"73b3e1ee\",\"en-us_component_steps.md\":\"052cc40a\",\"en-us_component_switch.md\":\"87feddd9\",\"en-us_component_table.md\":\"bc025133\",\"en-us_component_tabs.md\":\"4f87a5d3\",\"en-us_component_tag.md\":\"c3501bd0\",\"en-us_component_time-picker.md\":\"1f4c3f6a\",\"en-us_component_time-select.md\":\"164ffee2\",\"en-us_component_timeline.md\":\"02080415\",\"en-us_component_tooltip.md\":\"ae9168fd\",\"en-us_component_transfer.md\":\"f56aef39\",\"en-us_component_tree-v2.md\":\"ebf79845\",\"en-us_component_tree.md\":\"803c3a79\",\"en-us_component_typography.md\":\"f048f4f6\",\"en-us_component_upload.md\":\"e604c4fa\",\"en-us_guide_changelog.md\":\"58bbd55c\",\"en-us_guide_design.md\":\"00afc44b\",\"en-us_guide_i18n.md\":\"0440e3df\",\"en-us_guide_installation.md\":\"ed0bb02e\",\"en-us_guide_migration.md\":\"b6f178c2\",\"en-us_guide_nav.md\":\"f00a6390\",\"en-us_guide_quickstart.md\":\"e7b71db8\",\"en-us_guide_theming.md\":\"fa039422\",\"en-us_guide_transitions.md\":\"de6438d2\",\"en-us_index.md\":\"6932d551\",\"en-us_resource_index.md\":\"d322ce59\",\"index.md\":\"e3d681ed\",\"zh-cn_component_affix.md\":\"8a12e5dd\",\"zh-cn_component_alert.md\":\"90301e95\",\"zh-cn_component_avatar.md\":\"8c04df1a\",\"zh-cn_component_backtop.md\":\"e8016a78\",\"zh-cn_component_badge.md\":\"46df5c45\",\"zh-cn_component_border.md\":\"4b5666f2\",\"zh-cn_component_breadcrumb.md\":\"410adac4\",\"zh-cn_component_button.md\":\"273ae369\",\"zh-cn_component_calendar.md\":\"c3d6d400\",\"zh-cn_component_card.md\":\"8d3f1337\",\"zh-cn_component_carousel.md\":\"381e2635\",\"zh-cn_component_cascader.md\":\"eac93283\",\"zh-cn_component_checkbox.md\":\"5b509e9d\",\"zh-cn_component_collapse.md\":\"3a27cf12\",\"zh-cn_component_color-picker.md\":\"7f1b06c7\",\"zh-cn_component_color.md\":\"41db7618\",\"zh-cn_component_config-provider.md\":\"5c5e5c71\",\"zh-cn_component_container.md\":\"7cf5d7db\",\"zh-cn_component_date-picker.md\":\"3582b807\",\"zh-cn_component_datetime-picker.md\":\"a2d9bea0\",\"zh-cn_component_descriptions.md\":\"4facacae\",\"zh-cn_component_dialog.md\":\"8f4b23ea\",\"zh-cn_component_divider.md\":\"ab78d6ad\",\"zh-cn_component_drawer.md\":\"a7b76f31\",\"zh-cn_component_dropdown.md\":\"3310f8e1\",\"zh-cn_component_empty.md\":\"d266e0a5\",\"zh-cn_component_form.md\":\"1c7e184a\",\"zh-cn_component_icon.md\":\"c2021f1b\",\"zh-cn_component_image.md\":\"5ae29e16\",\"zh-cn_component_infinite-scroll.md\":\"ef34adc6\",\"zh-cn_component_input-number.md\":\"f170f2ac\",\"zh-cn_component_input.md\":\"6bc78923\",\"zh-cn_component_layout.md\":\"95fa747e\",\"zh-cn_component_link.md\":\"a822c095\",\"zh-cn_component_loading.md\":\"2bb319c4\",\"zh-cn_component_menu.md\":\"6ae0f900\",\"zh-cn_component_message-box.md\":\"32f30850\",\"zh-cn_component_message.md\":\"bfe74bfb\",\"zh-cn_component_notification.md\":\"27be2911\",\"zh-cn_component_page-header.md\":\"4ac1ccd3\",\"zh-cn_component_pagination.md\":\"bc6f832a\",\"zh-cn_component_popconfirm.md\":\"1af5570f\",\"zh-cn_component_popover.md\":\"0f29d4eb\",\"zh-cn_component_progress.md\":\"bfddfa6a\",\"zh-cn_component_radio.md\":\"ddcaab1c\",\"zh-cn_component_rate.md\":\"63802f2a\",\"zh-cn_component_result.md\":\"10a7cb05\",\"zh-cn_component_scrollbar.md\":\"20c97060\",\"zh-cn_component_select-v2.md\":\"2636afff\",\"zh-cn_component_select.md\":\"00369ec7\",\"zh-cn_component_skeleton.md\":\"24d33aa4\",\"zh-cn_component_slider.md\":\"f9763103\",\"zh-cn_component_space.md\":\"c0bb3c96\",\"zh-cn_component_steps.md\":\"8ea1dcc9\",\"zh-cn_component_switch.md\":\"5d4cbae1\",\"zh-cn_component_table.md\":\"1000f4b5\",\"zh-cn_component_tabs.md\":\"cb92cf8d\",\"zh-cn_component_tag.md\":\"c8219f8a\",\"zh-cn_component_time-picker.md\":\"84849e24\",\"zh-cn_component_time-select.md\":\"4dc8a155\",\"zh-cn_component_timeline.md\":\"ba96ae40\",\"zh-cn_component_tooltip.md\":\"b46dd48d\",\"zh-cn_component_transfer.md\":\"9df81b03\",\"zh-cn_component_tree-v2.md\":\"15197544\",\"zh-cn_component_tree.md\":\"685d0314\",\"zh-cn_component_typography.md\":\"eade0acb\",\"zh-cn_component_upload.md\":\"c05b8091\",\"zh-cn_guide_changelog.md\":\"06117320\",\"zh-cn_guide_design.md\":\"3c7bb2fd\",\"zh-cn_guide_i18n.md\":\"80f79f38\",\"zh-cn_guide_installation.md\":\"030d67aa\",\"zh-cn_guide_migration.md\":\"c76d1f01\",\"zh-cn_guide_nav.md\":\"e3e60490\",\"zh-cn_guide_quickstart.md\":\"a61ad7ff\",\"zh-cn_guide_theming.md\":\"bd1ccc5f\",\"zh-cn_guide_transitions.md\":\"ab868c0d\",\"zh-cn_index.md\":\"c53cccbc\",\"zh-cn_resource_index.md\":\"f4a3803a\"}")</script>
|
|
<script type="module" async src="/assets/app.e2c1f434.js"></script>
|
|
|
|
</body>
|
|
</html> |