title: Slider skipped in the mobile device
body: <p>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?</p>
  <pre><code> &lt;Swiper
            spaceBetween={50}
            slidesPerView={1}
            slidesPerGroup={1}
            onSlideChange={() =&gt; console.log(&quot;slide change&quot;)}
            onSwiper={(swiper) =&gt; console.log(swiper)}
            grabCursor={true}
            navigation={{
              nextEl: &quot;.image-swiper-button-next&quot;,
              prevEl: &quot;.image-swiper-button-prev&quot;,
              disabledClass: &quot;swiper-button-disabled&quot;,
            }}
            modules={[Navigation]}
            breakpoints={{
              // when window width is &gt;= 320px
              320: {
                slidesPerView: 1,
                spaceBetween: 24,
              },
              // when window width is &gt;= 480px
              480: {
                slidesPerView: 2,
                spaceBetween: 24,
              },
              // when window width is &gt;= 640px
              640: {
                slidesPerView: 2,
                spaceBetween: 24,
              },
              1024: {
                slidesPerView: 4,
                spaceBetween: 32,
                slidesPerGroup: 1,
              },
              1336: {
                slidesPerView: 5,
                spaceBetween: 32,
              },
            }}
            tag=&quot;section&quot;
            wrapperTag=&quot;ul&quot;
            id=&quot;main&quot;
            className=&quot;mySwiper relative mt-10 space-y-12 w-12/12 mx-auto flex flex-row&quot;
          &gt;
  </code></pre>