react轮播图----react-slick

最新推荐文章于 2024-08-22 08:39:05 发布

weixin_30530339

最新推荐文章于 2024-08-22 08:39:05 发布

阅读量2.3k

点赞数

文章标签： javascript ViewUI

原文链接：http://www.cnblogs.com/huangmin1992/p/7609727.html

版权

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;