Carousel走马灯

    • 当有一组平级的内容。

    • 当内容空间不足时，可以用走马灯的形式进行收纳，进行轮播展现。

    • 常用于一组图片或卡片轮播。

    最简单的用法。

    2. .ant-carousel .slick-slide {
    3.   text-align: center;
    4.   height: 160px;
    5.   line-height: 160px;
    6.   background: #364d79;
    7.   overflow: hidden;
    8. }
    10. .ant-carousel .slick-slide h3 {
    11. }

    Carousel走马灯 - 图2

    自动切换

    定时切换下一张。

    1. /* For demo */
    2. .ant-carousel .slick-slide {
    3.   text-align: center;
    4.   height: 160px;
    5.   line-height: 160px;
    7.   overflow: hidden;
    8. }
    10. .ant-carousel .slick-slide h3 {
    11.   color: #fff;
    12. }

    位置有 4 个方向。

    1. /* For demo */
    2. .ant-carousel .slick-slide {
    3.   text-align: center;
    4.   height: 160px;
    5.   background: #364d79;
    6.   overflow: hidden;
    7. }
    9. .ant-carousel .slick-slide h3 {
    11. }

    渐显

    1. /* For demo */
    2. .ant-carousel .slick-slide {
    3.   text-align: center;
    4.   height: 160px;
    5.   line-height: 160px;
    6.   background: #364d79;
    7.   overflow: hidden;
    8. }
    10. .ant-carousel .slick-slide h3 {
    11. }
    名称描述
    goTo(slideNumber, dontAnimate)切换到指定面板, dontAnimate = true 时，不使用动画
    next()切换到下一面板
    prev()切换到上一面板

    更多参数可参考：