mirror/ant-design
1
0
Fork 0
mirror of https://github.com/ant-design/ant-design.git synced 2024-12-05 09:49:57 +08:00
Code Issues Actions 24 Packages Projects Releases Wiki Activity
60dbef4963
ant-design/components/carousel/index.en-US.md
黑雨 cef58664e8
📝doc: add design token table (#41717) 
* ✨feat: add token

* 📝doc: update lint

* 📝doc: update doc
2023-04-11 10:25:24 +08:00

2.1 KiB
Raw Blame History

category group title cover coverDark demo
Components Data Display Carousel https://mdn.alipayobjects.com/huamei_7uahnr/afts/img/A*bPMSSqbaTMkAAAAAAAAAAAAADrJ8AQ/original https://mdn.alipayobjects.com/huamei_7uahnr/afts/img/A*a-58QpYnqOsAAAAAAAAAAAAADrJ8AQ/original
cols
2

A carousel component. Scales with its container.

When To Use

  • When there is a group of content on the same level.
  • When there is insufficient content space, it can be used to save space in the form of a revolving door.
  • Commonly used for a group of pictures/cards.

Examples

Basic Position Scroll automatically Fade in

API

Property Description Type Default Version
autoplay Whether to scroll automatically boolean false
dotPosition The position of the dots, which can be one of top bottom left right string bottom
dots Whether to show the dots at the bottom of the gallery, object for dotsClass and any others boolean | { className?: string } true
easing Transition interpolation function name string linear
effect Transition effect scrollx | fade scrollx
afterChange Callback function called after the current index changes (current: number) => void -
beforeChange Callback function called before the current index changes (current: number, next: number) => void -

Methods

Name Description
goTo(slideNumber, dontAnimate) Go to slide index, if dontAnimate=true, it happens without animation
next() Change current slide to next slide
prev() Change current slide to previous slide

Find more APIs in react-slick documentation.

Design Token

FAQ

How to add custom arrows?

See #12479.