title: swiper -- slidesPerView={'auto'} wont work for me
body: <p>im working on a swiper. my intention is to collect some  in slider but i dont want to use breakPonit attribute for responsively work.
  i want to slidesPerView, automatically fill the swiper wrapper.
  i read the document and use Demo...
  the resault is like that just one  apear on the view, while width and spaceBetween is minimun and in wide screen wont change.</p>
  <p>this is my code but its not my desired:</p>
  <pre><code>import React from 'react';
  import { Swiper, SwiperSlide } from &quot;swiper/react&quot;;
  import &quot;swiper/css&quot;;
  import &quot;swiper/css/navigation&quot;;
  import &quot;swiper/css/scrollbar&quot;;
  import &quot;swiper/css/free-mode&quot;;
  import SwiperCore, { Autoplay, FreeMode, Navigation, Scrollbar } from &quot;swiper&quot;;
  import { styled } from &quot;@mui/material&quot;;
  
  SwiperCore.use([Scrollbar,FreeMode, Autoplay, Navigation]);
  
  //-----------style to swiper by: styled()
  let Swip = styled(Swiper)(({ theme }) =&gt; ({
      padding: 17,
      paddingBottom: 35,
      width: &quot;90%&quot;,
      &quot;&amp; .swiper-wrapper&quot;: { padding: 0 },
      
  }));
  export default function Brands() {
    return( 
    &lt;Swip
                  // autoplay={{
                  //     delay: 6000,
                  //     disableOnInteraction: false,
                  // }}
                  navigation={true}
                  spaceBetween={10}
                  loop={true}
                  freeMode={true}
                  scrollbar={{
                    &quot;hide&quot;:false
                  }}
              &gt;
                  &lt;SwiperSlide&gt;
                      &lt;div style={{width:100,height:50 , backgroundColor:'black'}}/&gt;
                  &lt;/SwiperSlide&gt;
                
                  &lt;SwiperSlide&gt;
                      &lt;div style={{width:100,height:50 , backgroundColor:'black'}}/&gt;
                  &lt;/SwiperSlide&gt;
                
                  &lt;SwiperSlide&gt;
                      &lt;div style={{width:100,height:50 , backgroundColor:'black'}}/&gt;
                  &lt;/SwiperSlide&gt;
                
                  &lt;SwiperSlide&gt;
                      &lt;div style={{width:100,height:50 , backgroundColor:'black'}}/&gt;
                  &lt;/SwiperSlide&gt;
                
                  &lt;SwiperSlide&gt;
                      &lt;div style={{width:100,height:50 , backgroundColor:'black'}}/&gt;
                  &lt;/SwiperSlide&gt;
                
                  &lt;SwiperSlide&gt;
                      &lt;div style={{width:100,height:50 , backgroundColor:'black'}}/&gt;
                  &lt;/SwiperSlide&gt;
                
                  &lt;SwiperSlide&gt;
                      &lt;div style={{width:100,height:50 , backgroundColor:'black'}}/&gt;
                  &lt;/SwiperSlide&gt;
                
                  &lt;SwiperSlide&gt;
                      &lt;div style={{width:100,height:50 , backgroundColor:'black'}}/&gt;
                  &lt;/SwiperSlide&gt;
                
                  &lt;SwiperSlide&gt;
                      &lt;div style={{width:100,height:50 , backgroundColor:'black'}}/&gt;
                  &lt;/SwiperSlide&gt;
                
                  &lt;SwiperSlide&gt;
                      &lt;div style={{width:100,height:50 , backgroundColor:'black'}}/&gt;
                  &lt;/SwiperSlide&gt;
                
                  &lt;SwiperSlide&gt;
                      &lt;div style={{width:100,height:50 , backgroundColor:'black'}}/&gt;
                  &lt;/SwiperSlide&gt;
                
                  &lt;SwiperSlide&gt;
                      &lt;div style={{width:100,height:50 , backgroundColor:'black'}}/&gt;
                  &lt;/SwiperSlide&gt;
                
                  &lt;SwiperSlide&gt;
                      &lt;div style={{width:100,height:50 , backgroundColor:'black'}}/&gt;
                  &lt;/SwiperSlide&gt;
                
                  &lt;SwiperSlide&gt;
                      &lt;div style={{width:100,height:50 , backgroundColor:'black'}}/&gt;
                  &lt;/SwiperSlide&gt;
                
                  &lt;SwiperSlide&gt;
                      &lt;div style={{width:100,height:50 , backgroundColor:'black'}}/&gt;
                  &lt;/SwiperSlide&gt;
                
                  &lt;SwiperSlide&gt;
                      &lt;div style={{width:100,height:50 , backgroundColor:'black'}}/&gt;
                  &lt;/SwiperSlide&gt;
                
                  &lt;SwiperSlide&gt;
                      &lt;div style={{width:100,height:50 , backgroundColor:'black'}}/&gt;
                  &lt;/SwiperSlide&gt;
                
                  &lt;SwiperSlide&gt;
                      &lt;div style={{width:100,height:50 , backgroundColor:'black'}}/&gt;
                  &lt;/SwiperSlide&gt;
                
                  &lt;SwiperSlide&gt;
                      &lt;div style={{width:100,height:50 , backgroundColor:'black'}}/&gt;
                  &lt;/SwiperSlide&gt;
                
                  
                
              &lt;/Swip&gt;
    )}
  
  </code></pre>