Swiper.js responsiveness doesn't work with breakPoints-CodePudding

I tried this very basic Swiper example to check the responsiveness using the Swiper library, but the problem is when I resize my screen I don't get the slidesPerView as specified at the breakpoints (it's constantly one slidePerView).

Here is the code:

import React from 'react'
import {Swiper , SwiperSlide} from 'swiper/react'
import 'swiper/css'

const SwiperCard =()=>{
return(
        <Swiper

            breakPoints={{
            0: {slidesPerView: 1},
            480: {slidesPerView: 2,
                   spaceBetween: 16},
            768: {slidesPerView: 4,
                   spaceBetween: 16},
            1024:{slidesPerView: 8,
                   spaceBetween: 16}
            }}
        >
        <SwiperSlide>
            <div style={{backgroundColor: 'red'}}>slide1</div>
        </SwiperSlide>
        <SwiperSlide>
            <div style={{backgroundColor: 'red'}}>slide2</div>
        </SwiperSlide>
        <SwiperSlide>
            <div style={{backgroundColor: 'red'}}>slide3</div>
        </SwiperSlide>
        <SwiperSlide>
            <div style={{backgroundColor: 'red'}}>slide4</div>
        </SwiperSlide>
        <SwiperSlide>
            <div style={{backgroundColor: 'red'}}>slide5</div>
        </SwiperSlide>
        <SwiperSlide>
            <div style={{backgroundColor: 'red'}}>slide6</div>
        </SwiperSlide>
        <SwiperSlide>
            <div style={{backgroundColor: 'red'}}>slide7</div>
        </SwiperSlide>
        <SwiperSlide>
            <div style={{backgroundColor: 'red'}}>slide8</div>
        </SwiperSlide>
        </Swiper>


)
}
export default SwiperCard

the App.js

import './App.css';
import SwiperCard from './component/SwiperCard'
function App() {
  return (
    <div className="App">

        <SwiperCard />
    </div>
  );
}

export default App;

I wish I get an answer, cuz I want to include it in my react project.

CodePudding user response：

The prop's name is wrong. breakpoints with a small letter "p" is correct.
Its documentation is here: https://swiperjs.com/swiper-api#param-breakpoints