SwiperJs loop is broken

Question

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

Answer 1

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;