react，在首页引入走马灯（轮播图）的问题

Question

已写的代码如下：
轮播图代码：

import React from 'react';
import { Space, Swiper } from 'antd-mobile';
import styles from './demo2.less';
const colors = ['#ace0ff', '#bcffbd', '#e4fabd', '#ffcfac'];
const items = colors.map((color, index) => (<Swiper.Item key={index}>
    <div className={styles.content} style={{ background: color }}>
      {index + 1}
    </div>
  </Swiper.Item>));
export default () => {
    return (
        <Space direction='vertical' block>
          <Swiper indicatorProps={{
            color: 'white',
        }} defaultIndex={1}>
            {items}
          </Swiper>
        </Space>
    );
};

首页的代码：

import React from 'react';
import { NavBar, TabBar } from 'antd-mobile';
import { Route, Routes, useLocation, useNavigate, MemoryRouter as Router, } from 'react-router-dom';
import { SmileOutline, MessageOutline, KeyOutline, UserOutline, } from 'antd-mobile-icons';
import styles from '../../pages/Home/demo2.less';
import Home from '../Home/index.js'
import '../Homepage/index'
const Bottom = () => {
    const navigate = useNavigate();
    const location = useLocation();
    const { pathname } = location;
    const setRouteActive = (value) => {
        navigate(value);
    };
    const tabs = [
        {
            key: '/home',
            title: '首页',
            icon: <SmileOutline />,
        },
        {
            key: '/home/houselist',
            title: '找房',
            icon: <KeyOutline />,
        },
        {
            key: '/home/news',
            title: '资讯',
            icon: <MessageOutline />,
        },
        {
            key: '/home/profile',
            title: '我的',
            icon: <UserOutline />,
        },
    ];
    return (<TabBar activeKey={pathname} onChange={value => setRouteActive(value)}>
      {tabs.map(item => (<TabBar.Item key={item.key} icon={item.icon} title={item.title}/>))}
    </TabBar>);
};
export default () => {
    return (
    // <Router initialEntries={['/homepage']}>{
      <div className={styles.app}>
        <div className={styles.top}>
          <NavBar>配合路由使用</NavBar>
        </div>
        <div className={styles.body}>
          <Routes>
            <Route exact path='/' element={<Homepage />} />
            <Route exact path='home' element={<Homepage />} />
            <Route exact path='houselist' element={<Houselist />} />
            <Route exact path='news' element={<News />} />
            <Route exact path='profile' element={<Profile />} />
          </Routes>
        </div>
        <div className={styles.bottom}>
          <Bottom />
        </div>
      </div>
    //   }
    // </Router>
    );
};
function Homepage() {
    return <div>这是首页</div>;
}
function Houselist() {
    return <div>这是房源列表</div>;
}
function News() {
    return <div>这是资讯</div>;
}
function Profile() {
    return <div>这是我的资料</div>;
}

请问如何才能导入轮播图，让轮播图显示在首页里？请问是在下图所示的DIV标签里导入吗？

Answer 1

先 引入 插件 比如 swiper 或者 其它 ui库自带的 。然后直接 使用就行 。

直接在 homepage里 写就行

http://ant-design-mobile.antgroup.com/zh/components/swiper