Closed kimfucious closed 6 years ago
I wound up resolving this, after a bunch of trial and error.
In brief, I isolated the SwiperContainer component by wrapping it in it's own div, thus nesting it far enough down so that it it's innards were not affected by the Flexbox two levels up.
Hi there,
Great job with react-id-swiper! 👍
Let me start by saying that this might be a Swiper issue, rather than a react-id-swiper issue, but I'm not sure, as I've only tested with react-id-swiper.
In brief, I've created a component as shown below.
This all works really nice, as can be seen here (second section, where it says, "False Positives").
My issue is that I want to center the entire conents of the component in the background container, and set that container's height to the full height of the viewport.
At present, I've got it sitting in a regular div set to full height.
Like I've done with the rest of the site, I wrap components in a Flexbox container with the height set to 100vh and set the Flexbox to
align-items: center
(orjustify-content: center
if I'm working with a Flexbox column).The problem is that when I wrap the Swiper component in a Flexbox (row or column doesn't matter), all slides are displayed, rather than what is set in the slidesPerView parameter.
I've tried nesting the Swiper Container deeper within another
div
, but that didn't any effect.The repo is here, if you wanna take a look.
I could center things with other, more conventional methods; however, I am curious to understand why wrapping things in a Flexbox messes stuff up.
Any thoughts you might have or suggestions of things to try would be much appreciated.
Swiper Component