Swiper实现手风琴式的图片展示

基础的Swiper+简单的过度动画实现效果

效果是这样的

Swiper版本:^6.3.4

相关代码

React

import { Swiper, SwiperSlide } from 'swiper/react';
import 'swiper/swiper.scss';
render(){
	renturn(
		<div>
			<Swiper
			//一屏三个slider
			slidesPerView={3}
			// 每个slider之间的间隙-100
			spaceBetween={-100}
			// 循环
			loop
			// 初始值是最后一张图片，因为放大的图片是next
			initialSlide={arrImgs.length-1}>
              {
                arrImgs.map(item=>{
                  return (
                    <SwiperSlide key={item}>
                      <img src={item} alt="" className='heart_item_img'/>
                    </SwiperSlide>
                  )
                })
              }
            </Swiper>
		</div>
	)
}

Css(Sass)

.heart_item{
   .swiper-container{
   	// 因为container有个overflow: hidden;而且图片需要rotate,所以需要个padding
     padding: rem(50) 0;
   }
   .swiper-slide{
   	// 图片旋转
     transform: rotateY(38deg) rotateZ(-10deg);
     transition: all 0.5s linear;
   }
   .swiper-slide-next{
   	// next的transition
     z-index: 999;
     box-shadow: 0px 0px 5px #333;
     transform: scale(1.1);
     transition: all 0.5s linear;
   }
   .heart_item_img{
     border: rem(2) solid #a5d7fe;
     border-radius: rem(10);
     overflow: hidden;
   }
}

rem是适配手机尺寸的方法，见另一篇文章，也可按自己需求写px。