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

class Index extends Component {
    container = null
    swiper

    componentDidMount() {
        const {bannerList} = this.props
        const _this = this
        this.swiper = new Swiper('.swiper-container', {
            direction: 'horizontal',
            loop: true,
            spaceBetween: 12,
            centeredSlides: true,
            slidesPerView: 'auto',
            loopedSlides: 2,
            on: {
                sliderMove() {

                }

            }
        })
    }

    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 Index;