I can’t get a swiper to work inside a popup. Is there something I am missing?
Something is missing yes But would be good to see relevant code examples of what you have
Если создается через swiper-init, то проверьте, что было <div class="page"></div>
в popup
Если создание происходит в ручном режиме, то проверьте события, при которых вы создаете swiper
<Popup id="my-popup" closeOnEscape={false} closeByBackdropClick={false} close={false} swipeToClose={false} tabletFullscreen={false} backdrop={false} animate={false}>
<View>
<Page>
<Swiper>
<SwiperSlide>
<Card noShadow noBorder className="lead">
<CardHeader>Introduction</CardHeader>
<CardContent style={{padding:"4em"}}>---</CardContent>
</Card>
</SwiperSlide>
<SwiperSlide>
<Card noShadow noBorder className="lead">
<CardHeader>About</CardHeader>
<CardContent style={{padding:"4em"}}>---</CardContent>
</Card>
</SwiperSlide>
<SwiperSlide>
<Card noShadow noBorder className="lead">
<CardHeader>Create / Login</CardHeader>
<CardContent></CardContent>
</Card>
</SwiperSlide>
</Swiper>
</Page>
</View>
BTW: in a browser, after I resize the window, everything works
It happens, because when swiper created in was invisible (e.g. in hidden popup), so it couldn’t calc its sizes. Easiest fix will be enabling these params on swiper:
<Swiper params={{observer: true, observeParents: true}}>
2 Likes