import React, { Component } from 'react';
import Swiper from 'swiper'
import 'swiper/dist/css/swiper.min.css'

class TopSwiper extends Component {
    container = null
    swiper

    componentDidMount() {
        this.swiper = new Swiper('.swiper-container', {
            direction: 'horizontal',
            on:{
                progress(e){
                    console.log(e);
                }
            }
        })
    }

    render() {
        const {bannerList} = this.props
        return (
            <div className={'swiper-container'} ref={el => this.container = el}>
                <ul className="swiper-wrapper">
                    {bannerList.length && bannerList.map((item, index) => {
                        return (
                            <li className={'swiper-slide'} key={index}>
                                <img src={item.name} alt=""/>
                            </li>
                        )
                    })}
                </ul>
            </div>
        );
    }
}

export default TopSwiper;