SwiperJs loop is broken

I tried to use it for looping but when my slides per view are 2 I cant loop back to first card element in right direction on last card, while I can easily loop if I go in left direction

Changes I have made are in space-between

CODE:

import React from "react";
import "./testimonial.css";
import { Data } from './Data';
// Import Swiper React components
import { Swiper, SwiperSlide } from "swiper/react";
// Import Swiper styles
import "swiper/css";
import "swiper/css/pagination";
// import required modules
import { Pagination } from "swiper";
const Testimonials = () => {
return (
<section className="testimonial container section">
<h2 className="section__title">Testimonials</h2>
<span className="section__subtitle">What my Clients say</span>
<Swiper className="testimonial__container"
loop={true}
grabCursor={true}
spaceBetween={24}
pagination={{
clickable: true,
}}
breakpoints={{
576: {
slidesPerView: 2,
},
768: {
slidesPerView: 2,
spaceBetween: 48,
}
}}
modules={[Pagination]}
>
{Data.map(({id, image, title, description})=>{
return (
<SwiperSlide className="testimonial__card" key={id}>
<img src={image} alt={title} className="testimonial__img" />
<h3 className="testimonial__name">{title}</h3>
<p className="testimonial__description">{description}</p>
</SwiperSlide>
)
})}
</Swiper>
</section>
)
}
export default Testimonials

I was expecting a complete loop behaviour in both directions but got loop behaviour in only 1 direction ie right to left

I ran into the same Problem! But i found the solution that was if you are using swiper v9 then looping might not work in both ways in my case it was only working if I keep going to PrevSlides. So what i did was downgraded to v8 and then implemented the looping and it started working in both Directions.

Here is the version that i'm using

"swiper": "8.0.0",

Here is my implementation for the Swiper with Looping. I have used here custom navigation buttons if you don't want that you can just remove them and change navigation={false} to navigation={true}

 import React, { useState } from "react";
import Image from "next/image";
import { Swiper, SwiperSlide } from "swiper/react";
import { FreeMode, Navigation, Thumbs } from "swiper";
import coach1 from "public/images/coaches/coach1.jpeg";
import coach2 from "public/images/coaches/coach2.jpeg";
import arrowLeft from "public/icons/arrow-left.svg";
import CoachCard from "./CoachCard";
import "swiper/css";
import "swiper/css/navigation";
import "swiper/css/free-mode";
const Slider = () => {
const [swiper, setSwiper] = useState<any>(null);
const coachData = [
{
id: 1,
name: "MILEY CYRUS",
categories: ["HIIT", "Strength Training", "Strength Training"],
image: coach1,
},
{
id: 2,
name: "BROOKLYN MOORE",
categories: ["Pilates", "Yoga"],
image: coach2,
},
{
id: 3,
name: "MILEY CYRUS",
categories: ["HIIT", "Strength Training", "Strength Training"],
image: coach1,
},
{
id: 4,
name: "BROOKLYN MOORE",
categories: ["Pilates", "Yoga"],
image: coach2,
},
];
const handleSwiperInit = (swiper: any) => {
setSwiper(swiper);
};
return (
<div>
<Swiper
loop={true}
spaceBetween={10}
slidesPerView={2.2}
modules={[FreeMode, Navigation, Thumbs]}
className="mySwiper2"
navigation={false}
onInit={handleSwiperInit}
>
{coachData.map((item, index) => (
<SwiperSlide key={index}>
<CoachCard coach={item} />
</SwiperSlide>
))}
</Swiper>
<div className="mt-[50px] flex justify-center gap-4">
<span
className="cursor-pointer"
onClick={() => {
swiper?.slidePrev();
}}
>
<Image src={arrowLeft} alt="arrowLeft" />
</span>
<span
className="cursor-pointer"
onClick={() => {
swiper?.slideNext();
}}
>
<Image src={arrowLeft} alt="arrowLeft" className="rotate-180" 
/>
</span>
</div>
</div>
);
};
export default Slider;

I faced the same problem I am using v10.3.0, fixed it by:

<Swiper
spaceBetween={30}
modules={[Navigation]}
loop
autoplay={{
stopOnLastSlide: false,
}}
> 
{/* Your Slides*/}
</Swiper>