PSA: Too big/wide slider on initialization

See original GitHub issue

When your swiper slider initializes too big (sometimes even far, far wider than the page), this could happen from the slider wrapper element being inside a CSS flexbox/grid container. The following styles fix the issue:

.swiper-container {
  width: 100%;
  max-width: 100%;
  max-height: 100vh;
  // CSS Grid/Flexbox bug size workaround
  // @see https://github.com/kenwheeler/slick/issues/982
  min-height: 0;
  min-width: 0;
}

It also contains a fix for Firefox and it also works with the Slick slider (and probably other like Splide). I had to search quite a bit to find a working solution, so I hope this is helpful for me in the future and other developers, enjoy!

Issue Analytics

State:
Created 3 years ago
Reactions:30
Comments:15

Top GitHub Comments

20reactions

kronthtocommented, Nov 11, 2021

This may be relevant too, it solved it for us: https://stackoverflow.com/a/53022198/7362396 It was added on a parent container flexitem many layers above the Swiper.

.main { /* flex item, child of d-flex */
...
    min-width: 0;
}

By default the flex items (children of flex layout) have the min-width set to auto

15reactions

Codisycommented, Nov 22, 2020

Если у вас проблема с swiper и grid layouts, когда у далекого от слайдера родителя установлены grid-template-columns в фракциях, то эти хаки уже не помогают просто так. Я имею ввиду ситуации когда например у body стоит grid-template-columns: 3fr 9fr; а уже у глубоко лежащего div внутри находится swiper, то ближайшему к swiper родителю надо установить display: grid; тогда эти хаки заработают.

Вот наглядный пример этого поведения: https://jsfiddle.net/codisy/2nc1dz4q/84/