Width of slides isn't set if the slide is React component
See original GitHub issueIf I do a regular slide, per docs, everything works fine:
<Swiper>
<div className="slide">Awesome slide</div>
<div className="slide">Awesome slide</div>
<div className="slide">Awesome slide</div>
</Swiper>
However, if I try to encapsulate the slide in a component, like so:
function MyComponent(props) {
return <div className="slide">Awesome slide</div>
}
<Swiper>
<MyComponent/>
<MyComponent/>
<MyComponent/>
</Swiper>
Then the whole Swiper gets broken - I see all slides at once. It seems to be happening because Swiper doesn’t set the width of the div inside the components in this case.
The only solution I found is something like that:
<Swiper>
<div><MyComponent/></div>
<div><MyComponent/></div>
<div><MyComponent/></div>
</Swiper>
I thought that perhaps MyComponent
would be getting the width
as a prop and I could propagate to its children. However, there is no such prop.
Since I assume the issue stems from the original, non-react, library, how about a fix that does the following:
- Goes over every provided child
- Wraps it in a div
Source https://github.com/vitalybe/react-test/tree/react-id-swiper
Screenshot of the issue
Issue Analytics
- State:
- Created 6 years ago
- Reactions:1
- Comments:5 (3 by maintainers)
Top Results From Across the Web
The width of react-slick slide does not change when I resize ...
I think I have a problem with re-render element when resizing browser in reactjs :(. Thanks. javascript · reactjs · react-slick · Share....
Read more >How to create the responsive and swipeable Carousel - Medium
Today I will show you how to build the Carousel, Slider, or Image Gallery component from scratch. If you're not familiar with the...
Read more >Flickity · Options
Flicking, page dots, and previous/next buttons are mapped to group slides, not individual cells. is-selected class is added to the multiple cells in...
Read more >Drawer Navigator | React Navigation
Component that renders a navigation drawer which can be opened and closed via ... in initialRouteName prop, if not passed, defaults to the...
Read more >Documentation - Keen-Slider
If set to auto , the slide size is determined based on the size of there corresponding HTML element. Therefore, the selector -options...
Read more >
Top Related Medium Post
No results found
Top Related StackOverflow Question
No results found
Troubleshoot Live Code
Lightrun enables developers to add logs, metrics and snapshots to live code - no restarts or redeploys required.
Start Free
Top Related Reddit Thread
No results found
Top Related Hackernoon Post
No results found
Top Related Tweet
No results found
Top Related Dev.to Post
No results found
Top Related Hashnode Post
No results found
Yeah, I did it in a more generic way though eventually:
So I can use it like so:
Source: https://github.com/vitalybe/react-test/blob/2b0c45d08fa5579fdb0b6312fcfa7b518608b2b5/src/App.js
Yeah, wrapping could cause more issues than it solve. Like making SEO issues worse and I’m trying to fix current SEO issues in this PR: https://github.com/kidjp85/react-id-swiper/pull/120
I do it like @vitalybe and it’s working just fine. I’m rendering
div
in my component and wrapping them withli
s when rendering Swiper children.