这个堆叠轮播的在网上找了很久,但是要么轮播的时候不流畅,要么不好随意设置成想要的效果,总之找到的都有大大小小的毛病,今天对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