reactjsionic-frameworkion-slides

Ionic Slide React Content Is All On One Line

I am trying to create a view with multiple slides. However, the components on the same slide render on just one line as opposed to the title above the button. Could someone help me fix this? My slides code is:

const ExploreContainer: React.FC<ContainerProps> = ({ name }) => {
  return (
    <IonContent>
      <IonSlides pager={true} options={slideOpts}>
        <IonSlide>
          <IonTitle size="large"> Slide 1 Title</IonTitle>
          <IonButton color="primary">Get Started</IonButton>
        </IonSlide>
        <IonSlide>
            <h1>Slide 2</h1>
        </IonSlide>
        <IonSlide>
            <h1>Slide 3</h1>
        </IonSlide>
      </IonSlides>
    </IonContent>
  );
};

The display I'm getting is:

enter image description here

Solution

  • The ion components must be wrapped in a <div>

    The correct slide syntax should read:

       <IonSlide>
      <div><IonTitle size="large"> Slide 1 Title</IonTitle></div>
      <IonButton color="primary">Get Started</IonButton>
    </IonSlide>