CODEWITHSUNDEEP
reactjsswiper.js
Hamid Saif
Hamid Saif

Reputation: 193

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

Upvotes: 13

Views: 13136

Answers (3)

Dikeneko
Dikeneko

Reputation: 358

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

Upvotes: -2

Nithin Shastry
Nithin Shastry

Reputation: 169

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

Upvotes: 0

Кирилл Пиринен
Кирилл Пиринен

Reputation: 171

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

Upvotes: 17

Related Questions