var swiper = new Swiper("#swiper1", {
slidesPerView: 3,
observer:true,
observeParents:true,
grid: {
rows: 2,
},
spaceBetween: 30,
pagination: {
el: ".swiper-pagination",
clickable: true,
},
});
-
observer:true,//修改swiper自己或子元素时,自动初始化swiper
-
observeParents:true,//修改swiper的父元素时,自动初始化swiper 加上这两个属性就可以了
swiper中 :slidesPerView 绑定与 grid 布局冲突。
报错解释:
在使用Swiper库创建滑块视图时,:slidesPerView
是一个Swiper的属性,用于控制同一时间在视图中可见的滑块数量。如果你在Swiper的配置中同时使用了 :slidesPerView
和 grid 布局(即grid
参数),可能会发现它们的行为不一致或出现冲突。这是因为 slidesPerView
属性设计上是针对传统的滑块排列方式,而 grid
布局则用于网格布局的场景。
解决方法:
-
如果你需要使用网格布局,应当使用Swiper提供的相关网格布局参数,如
slidesPerColumn
或slidesPerColumnFill
,而不是:slidesPerView
。 -
如果你需要在网格布局中控制可见的滑块数量,可能需要调整
slidesPerColumn
的值,以及相关的尺寸设置,来达到你想要的效果。 -
确保Swiper的版本与你的使用场景相兼容,有时新版本可能增加了对特定场景的支持。
示例代码:
// 使用Swiper的grid选项来设置网格布局 const swiper = new Swiper('.swiper-container', { // 设置Swiper为网格布局 grid: { // 设置每列显示的滑块数量 slidesPerColumn: 2, // 设置列高是否需要填满容器(可选) slidesPerColumnFill: 'row', }, // 其他Swiper配置... });
在调整配置时,请根据Swiper的文档和你的具体需求来适当调整参数。
标签:滑块,渲染,网格,接口,grid,swiper,slidesPerView,Swiper From: https://www.cnblogs.com/luckyuns/p/18369367