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

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

Answers (1)

AnswerDeveloper

Dec 29, 2022

To make the swiper slides automatically fill the width of the swiper wrapper, you can use the slidesPerView prop. This prop allows you to specify the number of slides that should be visible at once. For example, you can set slidesPerView: 'auto' to make the swiper adjust the number of slides that are visible based on the width of the swiper wrapper.

You can also use the freeMode prop to enable free mode scrolling, which allows the swiper to scroll freely between slides rather than snapping to them. This can be useful if you want to allow the user to scroll through the slides manually.

Here is an example of how you could use these props to make the swiper automatically fill the width of the wrapper:


<Swipnavigation={true}spaceBetween={10}loop={true}freeMode={true}slidesPerView='auto'scrollbar={{
    "hide":false
  }}
><SwiperSlide><div style={{width:100,height:50 , backgroundColor:'black'}}/></SwiperSlide>
  ...
</Swip>