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


#1

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


#2

Something is missing yes :slight_smile: But would be good to see relevant code examples of what you have


#3

Если создается через swiper-init, то проверьте, что было <div class="page"></div> в popup

Если создание происходит в ручном режиме, то проверьте события, при которых вы создаете swiper


#4
<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>

#5

BTW: in a browser, after I resize the window, everything works


#6

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}}>