Error in responsive breakpoints of swiper in react

Question

I am trying to implement a swiper slider in React but the responsive breakdown is not working. I want in mobile devices the slider to have 2 slides but it is not working.

In the mobile devices it's showing like this

This is the SwiperSlider.jsx file (Component)

import img1 from "../images/swiper-img1.webp";
import img2 from "../images/swiper-img2.webp";
import { Swiper, SwiperSlide } from "swiper/react";
import "swiper/css";
import "swiper/css/pagination";
import { Autoplay, Pagination } from "swiper/modules";

const SwiperSlider = () => {
  return (
    <>
      <Swiper
        slidesPerView={2}
        spaceBetween={10}
        centeredSlides={true}
        loop={true}
        speed={1500}
        autoplay={{
          delay: 500,
          disableOnInteraction: false,
        }}
        pagination={{
          clickable: true,
        }}
        modules={[Autoplay, Pagination]}
        breakpoints={{
          640: {
            slidesPerView: 3,
            spaceBetween: 20,
          },
          768: {
            slidesPerView: 4,
            spaceBetween: 25,
          },
          981: {
            slidesPerView: 5,
            spaceBetween: 30,
          },
        }}
        className="my-contributions-swiper"
      >
        <SwiperSlide>
          <div className="img-div">
            <img src={img1} />
          </div>
        </SwiperSlide>

        <SwiperSlide>
          <div className="img-div">
            <img src={img2} />
          </div>
        </SwiperSlide>

        <SwiperSlide>
          <div className="img-div">
            <img src={img1} />
          </div>
        </SwiperSlide>

        <SwiperSlide>
          <div className="img-div">
            <img src={img2} />
          </div>
        </SwiperSlide>

        <SwiperSlide>
          <div className="img-div">
            <img src={img1} />
          </div>
        </SwiperSlide>

        <SwiperSlide>
          <div className="img-div">
            <img src={img2} />
          </div>
        </SwiperSlide>
      </Swiper>
    </>
  );
};

export default SwiperSlider;

this is App.jsx file

import SwiperSlider from "./SwiperSlider";
const App = () => {
  return (
    <>
      <div>
        <h1>testing</h1>
        <SwiperSlider />
      </div>
    </>
  );
};

export default App;

Please someone assist me on this.

I tried adding padding, but the issue was not resolved. I am expecting a two-slide slider on mobile devices.

Answer 1

remove centeredSlides={true} because this line centers the images. Also, you don't need to add the lines slidesPerView={3} and spaceBetween={10} because you have already assigned them in the breakpoints.