Swiper嵌套在display:grid-css中

Question

我正在用swiperjs与计算出的宽度作斗争。

我已经让我的滑块工作了，但我试图把它放在我用CSS网格创建的容器中，该容器有2列和2行，其中滑动器将进入第二行，它横跨两列。然而，宽度计算是天文数字般的大。我碰巧注意到，如果我调整窗口的大小，它的计算也会变大。

我的设置也没有什么特别之处。。。就像我说的，当它不在我的排时，它会起作用。

https://codepen.io/Johndgraham/pen/VwvmmZL

任何想法都值得赞赏。

var swiper = new Swiper(".swiper-container", {
slidesPerView: 1,
spaceBetween: 10,
// init: false,
pagination: {
el: ".swiper-pagination",
clickable: true
},
breakpoints: {
576: {
slidesPerView: 2,
spaceBetween: 20
},
992: {
slidesPerView: 3,
spaceBetween: 40
},
1200: {
slidesPerView: 4,
spaceBetween: 40
}
}
});

Answer 1

我遇到了同样的问题，我已经通过将min-width: 0设置为网格项来解决了这个问题。

我在这个线程上找到了解决方案：防止内容扩展网格项

Answer 2

我通过将.swiper-container和.swiper-wrapper设置为具有display: inherit;，解决了Swiper在网格内的大小调整问题

我还将.swiper-slide设置为具有display: inherit; width: auto !important; max-width: 100% !important

Answer 3

我最终改变了css网格的位置来解决这个问题，现在让它嵌套工作。

稍后我可能需要一些时间来测试是否是CSS网格导致了问题。