Swiper Js vertical loop doesn't work properly for react

Question

I tried to design a time picker component for reactjs like iOS time picker.

I used two vertical swiper one for hour and another for minute.

as you see in the above photo when i swipe bottom it's not working properly. it shows 59,58, 57 and suddenly nothing an you shoud swiper again to show 56, 55, ... . it has same issue in hour picker. it show 23, 22, 21 and nothing and need to swiper again. here is my code:

CodeSandbox Link

import { Swiper, SwiperSlide } from 'swiper/react';
import styles from "./timePicker.module.scss"

const hours = Array.from(Array(24).keys())
const minutes = Array.from(Array(60).keys())

const TimePicker = () => {
    return (
        <div className={styles.timePicker}>
            <div className={styles.picker}>
                <Swiper
                    slidesPerView={3}
                    direction="vertical"
                    grabCursor
                    centeredSlides
                    loop
                >
                    {minutes.map(minute=>{
                        return (
                            <SwiperSlide key={minute}>
                                <div className={styles.time}>
                                    {(''+minute).padStart(2,'0')}
                                </div>
                            </SwiperSlide>
                        )
                    })}
                </Swiper>
            </div>
            <div>:</div>
            <div className={styles.picker}>
                <Swiper
                    slidesPerView={3}
                    direction="vertical"
                    centeredSlides
                    grabCursor
                    loop
                    autoplay
                >
                    {hours.map(hour=>{
                        return (
                            <SwiperSlide key={hour}>
                                <div className={styles.time}>
                                    {(''+hour).padStart(2,'0')}

                                </div>
                            </SwiperSlide>
                        )
                    })}
                </Swiper>
            </div>
        </div>
    );
}

export default TimePicker;

This is a bug? or i do something wrong?

Thanks

Answer 1

Because with such a "small" slider you apparently can swipe a lot more than its size, and Swiper doesn't do anything during swipe. Just increase loopedSlides parameter until you get desired behavior.