Как перекрутить слайдер в swiper js?

Question

[DZHAMBUALT]

Здраствуйте! У меня есть слайдер в котором 10 слайдов мне нужно прокрутить этот слайдер 3 раза полностью ну чтобы сделать небольшую анимацию.
Что я пробовал? Я пробовал добавить для Swiper свойство loop и при загрузке страницы в useEffect с setTimeout использовал slideTo(30). Он прокрутился НО только до 10-го слайда. Как решить такую проблему?

Код React:

const Roulette = () => {
	const swiperRef = useRef<any>(null)
	const [currentSlide, setCurrentSlide] = useState<number | null>(null)
        const times = 3

	useEffect(() => {
		if (swiperRef.current)
			setTimeout(() => {
				swiperRef.current.slideTo(30)
			}, 300)
	}, [swiperRef])

	const spinWheel = () => {
		if (swiperRef.current) {
			const totalSlides = swiperRef.current.slides.length
			const randomIndex = Math.floor(Math.random() * totalSlides)
			const spinTimes = times * totalSlides + randomIndex
			console.log(spinTimes, swiperRef.current.slideTo)

			// Вращаем колесо
			swiperRef.current.slideTo(spinTimes, 2000, 'ease-out')

			// Выводим индекс в console после вращения
			setTimeout(() => {
				setCurrentSlide(randomIndex)
				console.log('Выпавший слайд: ', randomIndex)
			}, 2000) // 2 секунды - это длина времени вращения
		}
	}

	return (
		<div className='bg-red-200 relative'>
			<Swiper
				onSwiper={swiper => {
					swiperRef.current = swiper
				}}
				slidesPerView={1}
				loop={true}
				className='mySwiper'
			>
				{[...Array(10)].map((_, index) => (
					<SwiperSlide className='swiper-slide' key={index}>
						Слайд {index + 1}
					</SwiperSlide>
				))}
			</Swiper>

			<div>
				<button onClick={() => spinWheel(1)}>Крутить 1 раз</button>
			</div>

			{currentSlide !== null && <div>Выпавший слайд: {currentSlide + 1}</div>}
		</div>
	)
}

Answer 1

[mr Anderson]

Проблема в том, что Swiper с включённым loop воспринимает только фактические индексы слайдов, соответствующие количеству слайдов (в вашем случае — от 0 до 9).
Даже если ты передаёшь индекс больше количества слайдов, Swiper всё равно будет ограничивать значение.

Чтобы реализовать вращение на 3 полных круга + случайный индекс, нужно учитывать поведение с loop, а также использовать slideToLoop, который корректно обрабатывает циклическую прокрутку

swiperRef.current.slideToLoop(randomIndex, 2000, 'ease-out');
setTimeout(() => {
    setCurrentSlide(randomIndex);
    console.log('Выпавший слайд: ', randomIndex);
}, 2000);

И useEffect лишний
потому что он пытался сразу перейти на индекс 30, который не существует

https://jsfiddle.net/fdot6gpe/