react輪播圖----react-slick

1.安裝

　　npm install react-slick;

　　//安裝樣式

　　npm install slick carousel;

　　再在App.css中引入

　　@import "~slick-carousel/slick/slick.css";

　　@import "~slick-carousel/slick/slick-theme.css";

2.運用

  　　

import React, { Component } from 'react';
import Slider from 'react-slick';
import './App.css';

class App extends Component {
  render() {
    return (
        <div>
              <Carousel />
          </div>
    );
  }
}
//輪播圖插件 react-slick

class Carousel extends React.Component {
    render() {
        let settings ={
            dots:true,
            infinite:true,
            speed:500,
            slidesToShow:1,
            slidesToScroll:1
        }
        return (
               <Slider {...settings}>
                <div><h3>1</h3></div>
                <div><h3>2</h3></div>
                <div><h3>3</h3></div>
                <div><h3>4</h3></div>
                <div><h3>5</h3></div>
                <div><h3>6</h3></div>
            </Slider>
        );
    }
}

export default App;