react-轮播图

轮播图

https://www.npmjs.com/package/react-awesome-swiper

1.下载

npm install react-awesome-swiper --save

2.使用

components/Banner.jsx

import React, { Component } from 'react'
import AwesomeSwiper from 'react-awesome-swiper';

export default class Banner extends Component {
    constructor(){
        super()
        this.swiperRef = null;
        this.config  = {
            loop : true,
            autoplay: {
              delay: 3000,
              stopOnLastSlide: false,
              disableOnInteraction: true,
            },
            // Disable preloading of all images
            preloadImages: false,
            // Enable lazy loading
            lazy: true,
            speed: 500,
            navigation: {
              nextEl: '.swiper-button-next',
              prevEl: '.swiper-button-prev',
            },
            pagination: {
              el: '.swiper-pagination',
              bulletElement : 'li',
              hideOnClick :true,
              clickable :true,
            },
            on: {
              slideChange: function () {
                console.log(this.activeIndex);
              },
            },
          };
    }
    
    render() {
        // console.log(this.props);
        return (
          <AwesomeSwiper ref={ref => (this.swiperRef = ref)} config={this.config} className="your-classname">
            <div className="swiper-wrapper">
                {this.props.imgs.map(item=>(
                     <div className="swiper-slide" key={item}>
                         <img src={item} alt=""/>
                     </div>
                ))}
            </div>
            <div className="swiper-button-prev"></div>
            <div className="swiper-button-next"></div>
            <div className="swiper-pagination"></div>
          </AwesomeSwiper>
        )
      }
}

import React, { Component } from 'react'
import Banner from '../components/Banner'
export default class Index extends Component {
    constructor(){
        super()
        this.state = {
            imgs:[
                '/slider/01.jpg',
                '/slider/02.jpg',
                '/slider/03.jpg',
            ]
        }
    }
    render() {
        return (
            <div>
                <Banner imgs={this.state.imgs} />
            </div>
        )
    }
}