react Swiper做出堆叠轮播图_react轮播叠层卡片切换

这个堆叠轮播的在网上找了很久，但是要么轮播的时候不流畅，要么不好随意设置成想要的效果，总之找到的都有大大小小的毛病，今天对Swiper这个进行研究，发现几个属性就可以做出满意的堆叠轮播图 Swiper React Components

这个swiper很多属性藏得深

想当年自己找了一个别人写的，然后把另一个伙伴坑了很久一段时间，做出的效果也是勉勉强强

1.先放效果图

2.代码

有很多注意的点

a.安装插件

npm i swiper

b.页面引入

import { Swiper, SwiperSlide } from 'swiper/react';
import {Navigation, Pagination, EffectCreative} from "swiper";

c.css引入，在项目全局引入css的地方

import 'swiper/css'
import 'swiper/css/navigation'
import 'swiper/css/pagination'

d.按照官网文档的写法

const SwiperTestPage = () => {
 
 
    const  bannerImg=[
        {color: "black"},
        {color: "blue"},
        {color: "red"},
        {color: "green"},
        {color: "yellow"},
        {color: "blue"},
        {color: "black"},
        {color: "#ccc"},
    ]
 
        return (
            <Layout style={
  {backgroundColor: '#ccc'}}>
                <div>
 
                    <Swi