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;

react轮播图----react-slick的相关教程结束。