React 中使用Swiper实现中间小,两侧大的轮播图

2,970 阅读1分钟

目标样式

image.png

注:本文使用的是 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);
        }
    }
}

想要实现两侧小,中间大的效果,核心思想:

  1. Swiper 组件的 slidesPerView 值设置为 auto
  2. centeredSlides={true} 是卡片居中的关键,默认是居左;
  3. 将默认卡片缩小,当前选中的卡片为正常倍数,设置了缩小之后,卡片之间自动会留出间距。

需要注意的是不能给 slidesPerView 设置值,如果设置值(值为数字),Swiper 会强制给 swiper-slide 元素添加宽度,宽度为 容器总宽度/slidesPerView 的值,如下图为 slidesPerView={1} 的情况:

image.png

以上就可以实现目标样式啦~