Advertisement

react-Ant Design框架下文字滚动条与图片滚动条的实现

阅读量:

前言

在基于react-Ant Design框架的项目开发过程中,完成文字轮播与图片轮播功能的实现,现将相关经验进行记录。在此过程中,某些细节问题需要特别留意,以免影响整体效果。

文字轮播图实现

在Ant Design框架中,若需实现轮播图功能,则必须调用Carousel组件
首要步骤是依据实际需求对所需组件进行按需导入

复制代码
    import {Card, Carousel} from 'antd'
    
    
      
    

在构建轮播内容时,应采用Carousel标签进行封装,其中autoplay属性用于配置自动播放功能。

复制代码
    export class Index extends Component {
      render() {
    return (
      <div className='carousel'>
        <Card title="文字轮播" className='card-wrap'>
          <Carousel autoplay effect='fade'>
            <div>
              <h3>周一特惠</h3>
            </div>
            <div>

全部评论 (0)

还没有任何评论哟~