Swiper nested inside display:grid css

Question

I'm battling the calculated width, with swiperjs.

I have have my slider working, however I'm trying to place it inside a container I created with CSS grid that has 2 columns, and 2 rows where the swiper is going into the 2nd row and it spans two columns. However the width calculations are astronomically large. I happen to notice that it's calculation also gets bigger if I resize the window.

nothing to special with my settings either... like I said it works when it's not in my row.

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

Any thoughts are appreciated.

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
    }
  }
});

score 5 · Answer 1 · answered Feb 01 '23 at 14:27

5

I came across the same issue and I've fixed by setting min-width: 0 to the grid items.

I've found the solution on this thread: Prevent content from expanding grid items

answered Feb 01 '23 at 14:27

david6630

169
1
3
8

score 3 · Answer 2 · answered May 29 '21 at 13:18

3

I resolved sizing issues with Swiper inside grid by setting .swiper-container and .swiper-wrapper to have display: inherit;

I also set .swiper-slide to have display: inherit; width: auto !important; max-width: 100% !important

answered May 29 '21 at 13:18

space_food_

800
1
7
23

score 0 · Answer 3 · answered Apr 22 '20 at 20:11

0

I ended up changing the placement of my css grid to work around this, and now have it working nested.

I may take some time later to test out if it's the CSS grid that was causing the issue.

answered Apr 22 '20 at 20:11

John Graham

83
1
6

Swiper nested inside display:grid css

3 Answers3