Ionic React Swiper not showing number of slides in slidesPerView property


enter image description here

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’`

       <IonCol size"3">
          onIonChange{((e) > {
            setForm({album: form.album, month: form.month, year: e.detail.value});
            {[...Array(10)].map((num, i) >
                key{`year_${form.year - i}`}>
                  {form.year - i}
        <IonCol size"9">
          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>


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.

  onSwiper{(swiper) > setSwiperInstance(swiper)}
  onTap{(context) > onMonthTap(context)} 
  initialSlide{ month }

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

Answered By – Manav

Leave a Comment