import React from 'react' ; import { Swiper , SwiperSlide } from 'swiper/react' ; import SwiperCore from 'swiper' ; import classnames from 'classnames' ; import { BlogSub } from '@root/src/models/blog' ; import './style.less' ; type Props = { list : BlogSub [ ] ; onSwiper : ( swiper : SwiperCore ) => void ; className ? : string ; } ; interface ImageSwiper { ( props ) : JSX . Element | null ; } const ImageSwiper = ( { list , onSwiper , className } ) => { const onInit = ( swiper ) => { const slides = swiper . slides ; for ( let i = 0 ; i < slides . length ; i ++ ) { const slide = slides . eq ( i ) ; slide . css ( 'zIndex' , 100 - i ) ; } } ; const onSetTranslate = ( swiper ) => { const slides = swiper . slides ; const offsetAfter = swiper . width * 0.92 ; for ( let i = 0 ; i < slides . length ; i ++ ) { const slide = slides . eq ( i ) ; const progress = ( slides [ i ] as any ) . progress ; if ( progress <= 0 ) { slide . transform ( 'translate3d(' + progress * offsetAfter + 'px, 0, 0) scale(' + ( 1 - Math . abs ( progress ) / 20 ) + ')' ) ; slide . css ( 'opacity' , progress + 3 ) ; } if ( progress > 0 ) { slide . transform ( 'rotate(' + - progress * 5 + 'deg)' ) ; slide . css ( 'opacity' , 1 - progress ) ; } } } ; const onSetTransition = ( swiper , transition ) => { for ( let i = 0 ; i < swiper . slides . length ; i ++ ) { const slide = swiper . slides . eq ( i ) ; slide . transition ( transition ) ; } } ; return ( < Swiper className = { classnames ( 'banner-images' , className ) } watchSlidesProgress resistanceRatio = { 0 } onInit = { onInit } onResize = { ( swiper ) => swiper . update ( ) } onSetTranslate = { onSetTranslate } onSetTransition = { onSetTransition } onSwiper = { onSwiper } loop > { list . map ( ( item , index ) => ( < SwiperSlide key = { index } className = "banner-image" > < img src = { item . cover } className = "img" / > < /SwiperSlide>))} < /Swiper>); } ; export default ImageSwiper ;