[Solved] I can't get a swiper to work inside a popup

I can’t get a swiper to work inside a popup. Is there something I am missing?

Something is missing yes :slight_smile: 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

Thank you so much @nolimits4web, you are the best. This was bugging me for 4 hrs.