swiper -- slipsPerView={'auto'} 对我不起作用

Question

我正在研究 swiper。我的目的是在滑块中收集一些，但我不想使用breakPonit属性来进行响应式工作。我想要 SlidesPerView，自动填充 swiper 包装器。我阅读了文档并使用了演示...结果就像视图上只出现一个，而 width 和 spaceBetween 是最小的，并且在宽屏中不会改变。

这是我的代码，但它不是我想要的：

import React from 'react';
import { Swiper, SwiperSlide } from "swiper/react";
import "swiper/css";
import "swiper/css/navigation";
import "swiper/css/scrollbar";
import "swiper/css/free-mode";
import SwiperCore, { Autoplay, FreeMode, Navigation, Scrollbar } from "swiper";
import { styled } from "@mui/material";

SwiperCore.use([Scrollbar,FreeMode, Autoplay, Navigation]);

//-----------style to swiper by: styled()
let Swip = styled(Swiper)(({ theme }) => ({
    padding: 17,
    paddingBottom: 35,
    width: "90%",
    "& .swiper-wrapper": { padding: 0 },
    
}));
export default function Brands() {
  return( 
  <Swip
                // autoplay={{
                //     delay: 6000,
                //     disableOnInteraction: false,
                // }}
                navigation={true}
                spaceBetween={10}
                loop={true}
                freeMode={true}
                scrollbar={{
                  "hide":false
                }}
            >
                <SwiperSlide>
                    <div style={{width:100,height:50 , backgroundColor:'black'}}/>
                </SwiperSlide>
              
                <SwiperSlide>
                    <div style={{width:100,height:50 , backgroundColor:'black'}}/>
                </SwiperSlide>
              
                <SwiperSlide>
                    <div style={{width:100,height:50 , backgroundColor:'black'}}/>
                </SwiperSlide>
              
                <SwiperSlide>
                    <div style={{width:100,height:50 , backgroundColor:'black'}}/>
                </SwiperSlide>
              
                <SwiperSlide>
                    <div style={{width:100,height:50 , backgroundColor:'black'}}/>
                </SwiperSlide>
              
                <SwiperSlide>
                    <div style={{width:100,height:50 , backgroundColor:'black'}}/>
                </SwiperSlide>
              
                <SwiperSlide>
                    <div style={{width:100,height:50 , backgroundColor:'black'}}/>
                </SwiperSlide>
              
                <SwiperSlide>
                    <div style={{width:100,height:50 , backgroundColor:'black'}}/>
                </SwiperSlide>
              
                <SwiperSlide>
                    <div style={{width:100,height:50 , backgroundColor:'black'}}/>
                </SwiperSlide>
              
                <SwiperSlide>
                    <div style={{width:100,height:50 , backgroundColor:'black'}}/>
                </SwiperSlide>
              
                <SwiperSlide>
                    <div style={{width:100,height:50 , backgroundColor:'black'}}/>
                </SwiperSlide>
              
                <SwiperSlide>
                    <div style={{width:100,height:50 , backgroundColor:'black'}}/>
                </SwiperSlide>
              
                <SwiperSlide>
                    <div style={{width:100,height:50 , backgroundColor:'black'}}/>
                </SwiperSlide>
              
                <SwiperSlide>
                    <div style={{width:100,height:50 , backgroundColor:'black'}}/>
                </SwiperSlide>
              
                <SwiperSlide>
                    <div style={{width:100,height:50 , backgroundColor:'black'}}/>
                </SwiperSlide>
              
                <SwiperSlide>
                    <div style={{width:100,height:50 , backgroundColor:'black'}}/>
                </SwiperSlide>
              
                <SwiperSlide>
                    <div style={{width:100,height:50 , backgroundColor:'black'}}/>
                </SwiperSlide>
              
                <SwiperSlide>
                    <div style={{width:100,height:50 , backgroundColor:'black'}}/>
                </SwiperSlide>
              
                <SwiperSlide>
                    <div style={{width:100,height:50 , backgroundColor:'black'}}/>
                </SwiperSlide>
              
                
              
            </Swip>
  )}

Answer 1

我研究了很多，最后发现你必须重写幻灯片 css 以强制它们具有特定的宽度。例如根据其内容：.swiper-slide { width: auto; }