4.7 Carousel輪播圖

Carousel走馬燈

文章目錄

• 4.7 Carousel輪播圖
• @[toc]
• 一.文字背景輪播
• 二.圖片輪播
• API
• 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