swiper -- slidesPerView={'auto'} wont work for me

Question

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.

this is my code but its not my desired:

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>
  )}

Commandeer

I'm having the same problem. Did you manage to solve it? – Relevance

Answer 1

I researched a lot and finally found out that you have to override slides css to force them to be specific width. For example according to it's content:.swiper-slide { width: auto; }

Loner

Answer 2

In my case I was rendering a list of components using map without key. Adding key helped me with the issue.

Darden

Answer 3

Did you try slidesPerView="auto" and not {'auto'}?

Bellicose