css - React Swiper carousel 上的幻灯片在较小的视口上重叠，如何解决这个问题？

Question

在更大的视口上，它看起来像这样：

但在较小的视口上，幻灯片重叠

现在，显而易见的解决方案是slidesToShow在较小的视口上简单地将数量设置为较小的数量。但是，为每个幻灯片编号设置视口太麻烦了。有谁知道如何解决这个问题，同时保持能够以一致的方式从幻灯片滚动到另一张幻灯片？编码：

import SwiperCore, { Navigation, Pagination, Scrollbar, A11y } from 'swiper';
import { Swiper, SwiperSlide } from 'swiper/react';

import './App.css';
import 'swiper/swiper.scss';
import 'swiper/components/navigation/navigation.scss';
import 'swiper/components/pagination/pagination.scss';
import 'swiper/components/scrollbar/scrollbar.scss';

SwiperCore.use([Navigation, Pagination, Scrollbar, A11y]);

const Slide = ({data}) => {
    const styles = {
        width: '200px',
        height: '200px',
        margin: 'auto',
        background: 'lightblue',
        border: '1px solid black'}
    return (
        <div style={styles}>
            {data}
        </div>
    )
}

function App() {
    const settings = {
        dots: true,
        infinite: true,
        speed: 500,
        slidesToShow: 1,
        slidesToScroll: 1
    };
    const numbers = [1,2,3,4,5,6,7,8,9,10]
  return (
    <div className="App">
      <div className="App-header">
        <p>asdf</p>
          <Swiper
              spaceBetween={10}
              slidesPerView={3}
              navigation
              pagination={{ clickable: true }}
              scrollbar={{ draggable: true }}
              onSwiper={(swiper) => console.log(swiper)}
              onSlideChange={() => console.log('slide change')}
          >
              {
                  numbers.map(
                      (item) => {
                          return (
                              <SwiperSlide><Slide data={item}/></SwiperSlide>
                              )
                      })
              }
          </Swiper>
      </div>
    </div>
  );
}

export default App;

标签： cssreactjscarouselswiperswiper.js