目标样式
注:本文使用的是 Swiper6
实现
首先,使用 npm 安装 Swiper,这里需要注意的是 swiper
是小写。
npm install --save swiper
接下来在项目中引入需要用到的 Swiper
等组件,以上需求只需要 Swiper
SwiperSlide
即可,组件代码如下:
import React from 'react';
import { Swiper, SwiperSlide } from 'swiper/react';
import 'swiper/swiper.scss';
import './index.scss';
export default () => {
return (
<div className='container'>
<Swiper
className='swiper_container'
slidesPerView='auto'
centeredSlides={true}
>
<SwiperSlide className='card'>Slide 1</SwiperSlide>
<SwiperSlide className='card'>Slide 2</SwiperSlide>
<SwiperSlide className='card'>Slide 3</SwiperSlide>
</Swiper>
</div>
);
}
样式:
.container {
width: 100%;
height: 100%;
background: #1ACEA1;
background-size: 100% 100%;
padding-top: 1rem;
.swiper_container {
height: 9.2rem;
width: 100%;
.card {
text-align: center;
width: 16.8rem;
height: 9.2rem;
background: rgba($color: #000, $alpha: 0.3);
border: 0.1rem solid rgba(0, 0, 0, 0.08);
box-sizing: border-box;
border-radius: 1.2rem;
transition: 300ms;
transform: scale(0.87);
&:last-child {
margin-right: 0;
}
}
.swiper-slide-active, .swiper-slide-duplicate-active{
transform: scale(1);
}
}
}
想要实现两侧小,中间大的效果,核心思想:
- Swiper 组件的
slidesPerView
值设置为auto
; centeredSlides={true}
是卡片居中的关键,默认是居左;- 将默认卡片缩小,当前选中的卡片为正常倍数,设置了缩小之后,卡片之间自动会留出间距。
需要注意的是不能给 slidesPerView
设置值,如果设置值(值为数字),Swiper 会强制给 swiper-slide 元素添加宽度,宽度为 容器总宽度/slidesPerView 的值
,如下图为 slidesPerView={1}
的情况:
以上就可以实现目标样式啦~