logoAnt Design

⌘ K
  • Design
  • Development
  • Components
  • Blog
  • Resources
5.12.1
  • Components Overview
  • General
    • Button
    • FloatButtonNew
    • Icon
    • Typography
  • Layout
    • Divider
    • FlexNew
    • Grid
    • Layout
    • Space
  • Navigation
    • Anchor
    • Breadcrumb
    • Dropdown
    • Menu
    • Pagination
    • Steps
  • Data Entry
    • AutoComplete
    • Cascader
    • Checkbox
    • ColorPickerNew
    • DatePicker
    • Form
    • Input
    • InputNumber
    • Mentions
    • Radio
    • Rate
    • Select
    • Slider
    • Switch
    • TimePicker
    • Transfer
    • TreeSelect
    • Upload
  • Data Display
    • Avatar
    • Badge
    • Calendar
    • Card
    • Carousel
    • Collapse
    • Descriptions
    • Empty
    • Image
    • List
    • Popover
    • QRCodeNew
    • Segmented
    • Statistic
    • Table
    • Tabs
    • Tag
    • Timeline
    • Tooltip
    • TourNew
    • Tree
  • Feedback
    • Alert
    • Drawer
    • Message
    • Modal
    • Notification
    • Popconfirm
    • Progress
    • Result
    • Skeleton
    • Spin
    • Watermark
  • Other
    • Affix
    • AppNew
    • ConfigProvider
When To Use
Examples
Basic
Position
Scroll automatically
Fade in
API
Methods
Design Token
FAQ
How to add custom arrows?

Carousel

  • CardCollapse

    Resources

    Ant Design Charts
    Ant Design Pro
    Ant Design Pro Components
    Ant Design Mobile
    Ant Design Mini
    Ant Design Landing-Landing Templates
    Scaffolds-Scaffold Market
    Umi-React Application Framework
    dumi-Component doc generator
    qiankun-Micro-Frontends Framework
    ahooks-React Hooks Library
    Ant Motion-Motion Solution
    China Mirror 🇨🇳

    Community

    Awesome Ant Design
    Medium
    Twitter
    yuqueAnt Design in YuQue
    Ant Design in Zhihu
    Experience Cloud Blog
    seeconfSEE Conf-Experience Tech Conference

    Help

    GitHub
    Change Log
    FAQ
    Bug Report
    Issues
    Discussions
    StackOverflow
    SegmentFault

    Ant XTechMore Products

    yuqueYuQue-Document Collaboration Platform
    AntVAntV-Data Visualization
    EggEgg-Enterprise Node.js Framework
    kitchenKitchen-Sketch Toolkit
    GalaceanGalacean-Interactive Graphics Solution
    xtechAnt Financial Experience Tech
    Theme Editor
    Made with ❤ by
    Ant Group and Ant Design Community

    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

    API

    Common props ref:Common props

    PropertyDescriptionTypeDefaultVersion
    autoplayWhether to scroll automaticallybooleanfalse
    autoplaySpeedDelay between each auto scroll (in milliseconds)number3000
    dotPositionThe position of the dots, which can be one of top bottom left rightstringbottom
    dotsWhether to show the dots at the bottom of the gallery, object for dotsClass and any othersboolean | { className?: string }true
    fadeWhether to use fade transitionbooleanfalse
    infiniteInfinitely wrap around contentsbooleantrue
    speedAnimation speed in millisecondsnumber500
    easingTransition interpolation function namestringlinear
    effectTransition effectscrollx | fadescrollx
    afterChangeCallback function called after the current index changes(current: number) => void-
    beforeChangeCallback function called before the current index changes(current: number, next: number) => void-
    waitForAnimateWhether to wait for the animation when switchingbooleanfalse

    Methods

    NameDescription
    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

    Component TokenHow to use?

    Token NameDescriptionTypeDefault Value
    dotActiveWidthWidth of active indicatornumber24
    dotHeightHeight of indicatornumber3
    dotWidthWidth of indicatornumber16

    Global TokenHow to use?

    FAQ

    How to add custom arrows?

    See #12479.

    4

    1

    2

    3

    4

    1

    2

    3

    4

    Basic

    Basic usage.

    expand codeexpand code

    4

    1

    2

    3

    4

    1

    2

    3

    4

    Scroll automatically

    Timing of scrolling to the next card/picture.

    expand codeexpand code

    4

    1

    2

    3

    4

    1

    2

    3

    4

    Position

    There are 4 position options available.

    expand codeexpand code

    1

    2

    3

    4

    Fade in

    Slides use fade for transition.

    expand codeexpand code