IonSlider not showing when dynamically generated

Hi all,

I’m attempting to generate IonSlides from an array, however when doing so the slider seems to disappear. Weirdly, the slider appears sometimes but then will disappear on refresh, also if I set the slider to vertical it works, just not in horizontal mode. This is what I’m using currently:

      <IonSlides options={slideOpt}>
      {
        releases.reverse().map((release: any) => {
          
          return (
              <IonSlide key={release.id}>
                <IonCard>
                  <IonCardHeader class="ion-no-padding">
                    <IonImg alt={release.title.rendered} src={release.featured_image_url} />
                  </IonCardHeader>
                  <IonCardContent class="ion-text-left">
                    <IonCardSubtitle>{release.meta_box.shoe_name}</IonCardSubtitle>
                    <IonCardTitle class="ion-text-uppercase">{release.meta_box.shoe_cway}</IonCardTitle>
                    <p>Release Date: { format( fromUnixTime(release.meta_box.shoe_rdate), "E d MMM yyyy") }</p>
                    <p>{ formatDistance( fromUnixTime(release.meta_box.shoe_rdate), new Date(), { addSuffix: true }) }</p>
                  </IonCardContent>
                  </IonCard>
              </IonSlide>
                );
              })
            }
      </IonSlides>

Using the following slid opts, although changing these makes no difference:

const slideOpt ={
initialSlide: 0,
slidesPerView: 1,
autoplay:true
}

Any help would be much appreciated,
Thank you in advance!

1 post - 1 participant

Read full topic