Swiper 嵌套在 display:grid css 内答案

【问题标题】：Swiper nested inside display:grid cssSwiper 嵌套在 display:grid css 内
【发布时间】：2020-04-22 19:29:55
【问题描述】：

我正在使用 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
    }
  }
});

【问题讨论】：

标签： swiper

【解决方案1】：

我通过将 .swiper-container 和 .swiper-wrapper 设置为 display: inherit; 解决了 Swiper inside grid 的大小问题

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

【讨论】：

【解决方案2】：

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

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

【讨论】：