import * as React from 'react' ; import Swipers from 'swiper' ; import "./Swiper.scss" ; import 'swiper/css/swiper.min.css' ; const Swiper = ( props ) => { const swiperRef = React . useRef ( null ) ; React . useEffect ( ( ) => { const slideChangeFn = ( ) => { props . changeIndex ( swiper . realIndex ) ; } ; const swiper = new Swipers ( swiperRef . current , { autoplay : { delay : 3000 , disableOnInteraction : false , } , loop : true , pagination : { el : '.swiper-pagination' , clickable : true , } , navigation : { nextEl : '.right' , prevEl : '.left' , } , lazy : { loadPrevNext : true , } , watchSlidesProgress : true , } ) ; swiper . on ( 'slideChange' , slideChangeFn ) ; return ( ) => swiper . destroy ( true , false ) ; } , [ ] ) ; const bannerList = props . banners . map ( ( data , index ) : JSX . Element => { return ( < div key = { index } className = "swiper-slide" style = { { background : `url(${ data . imageUrl }) repeat-x` , backgroundSize : `770px 336px` } } />); } ) ; return ( < div className = "swiper-container" style = { { height : '100%' } } ref = { swiperRef } > < div className = "swiper-wrapper" > { bannerList } < /div> < div className = "swiper-pagination" / > < /div>); } ; export default ( Swiper ) ;