Slider skipped in the mobile device

I have totally 17 slides, so when it is in a big screen, it shows well, but when I am in a mobile device, somehow it skipped a few slides, it does not slide one by one, I have already set slidesPerview =1 and even pergroup is still 1. can anyone help me?

 <Swiper
          spaceBetween={50}
          slidesPerView={1}
          slidesPerGroup={1}
          onSlideChange={() => console.log("slide change")}
          onSwiper={(swiper) => console.log(swiper)}
          grabCursor={true}
          navigation={{
            nextEl: ".image-swiper-button-next",
            prevEl: ".image-swiper-button-prev",
            disabledClass: "swiper-button-disabled",
          }}
          modules={[Navigation]}
          breakpoints={{
            // when window width is >= 320px
            320: {
              slidesPerView: 1,
              spaceBetween: 24,
            },
            // when window width is >= 480px
            480: {
              slidesPerView: 2,
              spaceBetween: 24,
            },
            // when window width is >= 640px
            640: {
              slidesPerView: 2,
              spaceBetween: 24,
            },
            1024: {
              slidesPerView: 4,
              spaceBetween: 32,
              slidesPerGroup: 1,
            },
            1336: {
              slidesPerView: 5,
              spaceBetween: 32,
            },
          }}
          tag="section"
          wrapperTag="ul"
          id="main"
          className="mySwiper relative mt-10 space-y-12 w-12/12 mx-auto flex flex-row"
        >