React共享单车后台管理系统开发（记录笔记4）——4.7 Carousel轮播图

版权声明：本文为博主原创文章，未经博主允许不得转载。 https://blog.csdn.net/qq_35812380/article/details/84633279

4.7 Carousel轮播图

Carousel走马灯

import { Carousel } from 'antd';

function onChange(a, b, c) {
  console.log(a, b, c);
}

ReactDOM.render(
  <Carousel afterChange={onChange}>
    <div><h3>1</h3></div>
    <div><h3>2</h3></div>
    <div><h3>3</h3></div>
    <div><h3>4</h3></div>
  </Carousel>,
  mountNode);
/* For demo */
.ant-carousel .slick-slide {
  text-align: center;
  height: 160px;
  line-height: 160px;
  background: #364d79;
  overflow: hidden;
}

.ant-carousel .slick-slide h3 {
  color: #fff;
}

一.文字背景轮播

1.Carousel组件

• 引入Carousel:import {Carousel} from “antd”;
• autoplay:设置自动切换
• effect="fade":指定淡入淡出动画

//src/pages/ui/carousel.js
import React from 'react';
import {Card, Carousel} from "antd";
import "./ui.less";

export default class Carousels extends React.Component{


  render() {
    return(
      <div>
        <Card title="文字背景轮播" className="card-wrap">
          <Carousel autoplay effect="fade">
            <div><h3>Ant Motion Banner - React</h3></div>
            <div><h3>Ant Motion Banner - Vue</h3></div>
            <div><h3>Ant Motion Banner - Angular</h3></div>
          </Carousel>
        </Card>
      </div>
    );
  }
}

二.图片轮播

既然是图片轮播,要将内容换成图片

• <div><img src="/carousel-img/carousel-1.jpg" alt=""/></div>

将resource文件下的carousel文件夹拷贝到public下:

• 导入自定义样式:

• 修改图片的默认高度,!important设置优先级

• + .slider-wrap .ant-carousel .slick-slide {
  +  height: 240px!important;
  + }
  

• //src/pages/ui/ui.less
  .card-wrap {
    margin-bottom: 10px;
      button {
      margin-right: 10px;
    }
  }
  
  /* modals */
  /* use css to set position of modal */
  .vertical-center-modal {
    text-align: center;
    white-space: nowrap;
  }
  
  .vertical-center-modal:before {
    content: "";
    display: inline-block;
    height: 100%;
    vertical-align: middle;
    width: 0;
  }
  
  .vertical-center-modal .ant-modal {
    display: inline-block;
    vertical-align: middle;
    top: 0;
    text-align: left;
  }
  
  
  /* For demo */
  .ant-carousel .slick-slide {
    text-align: center;
    height: 160px;
    line-height: 160px;
    background: #364d79;
    overflow: hidden;
  }
  
  .ant-carousel .slick-slide h3 {
    color: #fff;
  }
  
  .slider-wrap .ant-carousel .slick-slide {
    height: 240px!important;
  }
  
  

//src/pages/ui/carousel.js
import React from 'react';
import {Card, Carousel} from "antd";
import "./ui.less";

export default class Carousels extends React.Component {
  render() {
    return (
      <div>
        <Card title="文字背景轮播" className="card-wrap">
          <Carousel autoplay effect="fade">
            <div><h3>Ant Motion Banner - React</h3></div>
            <div><h3>Ant Motion Banner - Vue</h3></div>
            <div><h3>Ant Motion Banner - Angular</h3></div>
          </Carousel>
        </Card>
        <Card title="图片轮播" className="slider-wrap">
          <Carousel autoplay effect="fade" >
            <div><img src="/carousel-img/carousel-1.jpg" alt=""/></div>
            <div><img src="/carousel-img/carousel-2.jpg" alt=""/></div>
            <div><img src="/carousel-img/carousel-3.jpg" alt=""/></div>
          </Carousel>
        </Card>
      </div>
    );
  }
}

API

Carousel

---

参数	说明	类型	默认值
afterChange	切换面板的回调	function(current)	无
autoplay	是否自动切换	boolean	false
beforeChange	切换面板的回调	function(from, to)	无
dots	是否显示面板指示点	boolean	true
easing	动画效果	string	linear
effect	动画效果函数(淡入,淡出)，可取 scrollx, fade	string	scrollx
vertical	垂直显示/垂直方向	boolean	false