Swiper.js响应不适用于breakPoints

Question

我尝试了这个非常基本的Swiper示例来使用Swiper库检查响应，但问题是当我调整屏幕大小时，没有得到断点指定的slidesPerView (经常是一个slidePerView)。

以下是代码：

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;

我希望我得到一个答案，因为我想把它包括在我的反应项目中。

Answer 1

道具的名字错了。带有小字母"p“的breakpoints是正确的。

它的文档在这里：https://swiperjs.com/swiper-api#param-breakpoints