Ionic React Swiper not showing number of slides in slidesPerView property-CodePudding

I am using Ionic with React for the first time. While using the swiper, the number of slides per view property is not being respected and only 1 slide is being shown. What am I doing wrong?

I am using the following imports:

`import { Swiper, SwiperSlide } from 'swiper/react';

import 'swiper/swiper-bundle.css'`

<IonGrid>
    <IonRow>
       <IonCol size="3">
          <IonSelect
          onIonChange={((e) => {
            setForm({album: form.album, month: form.month, year: e.detail.value});
          })} 
          value={String(form.year)}>
            {[...Array(10)].map((num, i) =>
              <IonSelectOption 
                key={`year_${form.year - i}`}>
                  {form.year - i}
              </IonSelectOption>
            )}
          </IonSelect>
        </IonCol>
        <IonCol size="9">
          <Swiper 
          slidesPerView={6}
          onSwiper={(swiper) => console.log(swiper)} 
          onTap={(context) => onMonthTap(context)} 
          initialSlide={ form.month }>        
            {["Jan", "Feb", "Mar", "Apr", "May", "Jun", "Jul", "Aug", "Sep", "Oct", "Nov", "Dec"].map((mon, idx) => {
              return (
                <>
                <SwiperSlide key={`month_${idx}`}>
                  <IonLabel>{form.month === idx ? <b>{mon}</b> : mon}</IonLabel>
                </SwiperSlide>
                </>
              )
            })}
          </Swiper>
        </IonCol>
      </IonRow>
  </IonGrid>

CodePudding user response：

You can pass slideOpts as parameter to swiper

// Optional parameters to pass to the swiper instance.
// See http://idangero.us/swiper/api/ for valid options.

const slideOpts = {
  initialSlide: 1,
  speed: 400
};

export const SlidesExample: React.FC = () => (
  <IonContent>
    <IonSlides pager={true} options={slideOpts}>
      <IonSlide>
        <h1>Slide 1</h1>
      </IonSlide>
      <IonSlide>
        <h1>Slide 2</h1>
      </IonSlide>
      <IonSlide>
        <h1>Slide 3</h1>
      </IonSlide>
    </IonSlides>
  </IonContent>
);

CodePudding user response：

doing a swiper update helped but only after introducing some delay. I am not sure if this is the right answer or not but works for me for the time being.

<Swiper 
  slidesPerView={6}
  spaceBetween={10}
  onSwiper={(swiper) => setSwiperInstance(swiper)}
  onTap={(context) => onMonthTap(context)} 
  initialSlide={ month }
>    


useEffect(() => {
  const timeout = setTimeout(() => {
    swiperInstance && swiperInstance.update();
  }, 50);
}, [swiperInstance]);