Swiper嵌套在display:grid css中。

Question

我正在使用swiperjs来解决计算宽度的问题，我的滑块已经开始工作了，但是我想把它放在一个我用CSS网格创建的容器里，这个容器有2列，2行，其中swiper要进入第2行，并且它跨越了两列。

我有我的滑块工作，但是我想把它放在一个我用CSS网格创建的容器里，这个容器有2列，还有2行，其中swiper要进入第2行，而且它跨越了两列。 然而宽度计算是天文数字般的大。 我碰巧注意到，如果我调整窗口的大小，它的计算量也会变大。

我的设置也没有什么特别之处......就像我说的，当它不在我的行中时，它也能工作。

https:/codepen.ioJohndgrahampenVwvmmZL

感谢任何想法。

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

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

我以后可能会花点时间测试一下是不是css网格造成的问题。