使用antd List組件實現輪播圖

import { List, Avatar, Carousel } from 'antd';
import { connect } from 'dva';
import './lamp.less'
const PositionCarousel = props => {
    const Count= 3;
    const data = [
        {
            img: "",
            createTime: '2019-11-26',
            storeName: "健之佳",
            areaNo: "871",
            drugs: "生當作人傑，死亦為鬼雄。至今思項羽，不肯過江東。",
            tel: '13122036650',
        },
        {
            img: "",
            createTime: '2019-11-29',
            storeName: "健之佳",
            areaNo: "872",
            drugs: "梧桐雨細。漸滴作秋聲，被風驚碎。潤逼衣篝，線裊蕙爐沈水。悠悠歲月天涯醉。一分秋、一分憔悴。紫簫吟斷，素箋恨切，夜寒鴻起。又何苦、凄涼客里。負草堂春綠，竹溪空翠。落葉西風，吹老幾番塵世。從前諳盡江湖味。聽商歌、歸興千里。露侵宿酒，疏簾淡月，照人無寐。",
            tel: '13131231',
        },
        {
            img: "",
            createTime: '2019-11-26',
            storeName: "健之佳",
            areaNo: "873",
            drugs: "Ant Design, a design language for background applications, is refined by Ant UED Team",
            tel: '13131231',
        },
        {
            img: "",
            createTime: '2019-11-26',
            storeName: "健之佳",
            areaNo: "874",
            drugs: "Ant Design, a design language for background applications, is refined by Ant UED Team",
            tel: '13131231',
        },
        {
            img: "",
            createTime: '2019-11-26',
            storeName: "健之佳",
            areaNo: "876",
            drugs: "Ant Design, a design language for background applications, is refined by Ant UED Team",
            tel: '13131231',
        },
        {
            img: "",
            createTime: '2019-11-26',
            storeName: "健之佳",
            areaNo: "888",
            drugs: "Ant Design, a design language for background applications, is refined by Ant UED Team",
            tel: '13131231',
        }
    ];
    while (data.length % Count != 0) {
        data.push({});
    }
    function formatdrugs(drugs){
        let stringdrugs = drugs.toString();
        if (stringdrugs.length > 53){
            stringdrugs = stringdrugs.substr(0,53)+"..."
        } 
        return stringdrugs;
    }

    const sliceitems = [];
    for (let i = 0; i < data.length; i += Count) {
        let endIndex = i + Count < data.length ? i + Count : data.length;
        sliceitems.push(data.slice(i, endIndex));
    }

    // console.log(sliceitems);

    const items = [];
    for (let i = 0; i < sliceitems.length; i++) {
        items.push(<div><List
            itemLayout="horizontal"
            dataSource={sliceitems[i]}
            renderItem={item => (
                <List.Item key={item.title}>
                    <List.Item.Meta
                        avatar={<Avatar src="https://timgsa.baidu.com/timg?image&quality=80&size=b9999_10000&sec=1575339764&di=04ba2b635d619b1e405be69245aad7b9&imgtype=jpg&er=1&src=http%3A%2F%2Fimg0.pconline.com.cn%2Fpconline%2F1702%2F12%2F8823860_13_thumb.jpg " />}
                    />
                    <div className="list-tittle">{item.areaNo + " " + item.storeName}<br />{item.tel}</div>
                    <div className="Content">{formatdrugs(item.drugs)}</div>
                    <div className="createTimeContent">{item.createTime}</div>

                </List.Item>

            )}
        /></div>)
    }
    // console.log(items)
    return (
        <div style={{ backgroundColor: "#070f2d" }}>
            <Carousel autoplay dotPosition={"right"} dots={false}>
                {items}
            </Carousel>
        </div>
    );
}

export default connect()(PositionCarousel);

.list-tittle{
  color: white;
  width: 20%;
  height: 80px;
  overflow: hidden;
}
.Content{
  color: white;
  width: 50%;
  height: 80px;
  overflow: hidden;
}
.createTimeContent{
  margin-left: 1%;
  color:white;
  overflow: hidden;
  height: 80px;
  width: 19%;
  line-height: 80px;
}