Make Swiper Slider Responsive in React.js

Question

I want to make my Swiper Slider Responsive in React.js I am using Swiper React Components and I am new to this. I have added same width in media queries in css and added same width to breakpoints on component as well. But Still issue exist and it's not responsive and adding some space on the right side.

above 576px breakpoint look like this

above 768px breakpoint look like this

I appreciate any help.

SLIDER COMPONENT:

import React from "react";
import { Navigation, Pagination } from "swiper";
import { Swiper, SwiperSlide } from "swiper/react";
import "./mainslider.css";
import "swiper/css";
import "swiper/css/navigation";
import "swiper/css/pagination";
import "swiper/css/scrollbar";

const MainSlider = () => {
  return (
    <Swiper
      // install Swiper modules
      breakpoints={{
        576: {
          width: 576,
          slidesPerView: 2,
        },
        768: {
          width: 768,
          slidesPerView: 1,
        },
      }}
      modules={[Navigation, Pagination]}
      spaceBetween={0}
      slidesPerView={1}
      navigation
      // pagination={{ clickable: true }}
      // scrollbar={{ draggable: true }}
      // onSwiper={(swiper) => console.log(swiper)}
      // onSlideChange={() => console.log("slide change")}
    >
      <SwiperSlide className="bg-color1">
        <div className="container-lg">
          <div className="row">
            <div className="col-md-6 d-flex justify-content-center align-items-center">
              <img
                className="img-fluid"
                src="https://static.wixstatic.com/media/2c0034_5916d66c114c4a3fb055fd0fff15f402~mv2.png"
                alt=""
              />
            </div>
            <div className="col-md-6 text-center text-md-left d-md-flex justify-content-md-center flex-md-column">
              <h1 className="h1">Valencia Orange</h1>
              <p className="paragraph mb-2">
                Valencia Orange is a juice which is really a wonderful and will give you a Orange taste and nothing else.
              </p>
              <a href="" className="btn btn-black align-self-md-start">
                Shop
              </a>
            </div>
          </div>
        </div>
      </SwiperSlide>
      <SwiperSlide className="bg-color2">
        <div className="container-lg">
          <div className="row">
            <div className="col-md-6 d-flex justify-content-center align-items-center">
              <img
                className="img-fluid"
                src="https://static.wixstatic.com/media/2c0034_ecb14379435e405996be56ad460df8d0~mv2.png"
                alt=""
              />
            </div>
            <div className="col-md-6 text-center text-md-left d-md-flex justify-content-md-center flex-md-column">
              <h1 className="h1">Lean Green</h1>
              <p className="paragraph mb-2">
                Lean Green is a juice which is really a wonderful and will give you a Orange taste and nothing else.
              </p>
              <a href="" className="btn btn-black align-self-md-start">
                Shop
              </a>
            </div>
          </div>
        </div>
      </SwiperSlide>
      <SwiperSlide className="bg-color3">
        <div className="container-lg">
          <div className="row">
            <div className="col-md-6 d-flex justify-content-center align-items-center">
              <img
                className="img-fluid"
                src="https://static.wixstatic.com/media/2c0034_efd3336ca11743f796271887c60c2dd1~mv2.png"
                alt=""
              />
            </div>
            <div className="col-md-6 text-center text-md-left d-md-flex justify-content-md-center flex-md-column">
              <h1 className="h1">Pomegranate</h1>
              <p className="paragraph mb-2">
                Pomegranate is a juice which is really a wonderful and will give you a Orange taste and nothing else.
              </p>
              <a href="" className="btn btn-black align-self-md-start">
                Shop
              </a>
            </div>
          </div>
        </div>
      </SwiperSlide>
    </Swiper>
  );
};

export default MainSlider;

SWIPER CSS: I have added .swiper-container class in media queries also.

.swiper {
  height: auto;
}
.swiper .swiper-slide {
  padding-top: 5rem;
  padding-bottom: 2rem;
}
.swiper .swiper-slide.bg-color1 {
  background-color: #d6b404;
}
.swiper .swiper-slide.bg-color2 {
  background-color: #7fca83;
}
.swiper .swiper-slide.bg-color3 {
  background-color: #ff8888;
}
.swiper .img-fluid {
  width: 25%;
}

@media screen and (min-width: 576px) {
  .swiper-container {
    width: 576px;
  }
}

@media screen and (min-width: 768px) {
  .swiper-container {
    width: 768px;
  }
}

@media (min-width: 992px) {
  .swiper .swiper-slide {
    display: flex;
    justify-content: center;
    align-items: center;
    width: 100%;
    height: 100vh;
  }
}

Corso

Answer 1

Hey this worked for me when I removed width from breakpoint and when I removed css. I am not sure whether this is the correct way. Please correct me if anyone know the correct way. I thought this worked for me and that is why I posted the answer.

breakpoints={{
    576: {
      // width: 576,
      slidesPerView: 2,
    },
    768: {
      // width: 768,
      slidesPerView: 1,
    },
  }}


/* @media screen and (min-width: 576px) {
  .swiper-container {
    width: 576px;
  }
}

@media screen and (min-width: 768px) {
  .swiper-container {
    width: 768px;
  }
} */

Corso

please don't edit question to add your answer like you did here: #72171571 .. a question need to remain a question – Vertievertiginous

Ok I will edit and keep as it is – Corso

sorry but i am unable to change now, stackoverflow saying you need to add atleast 6 charaters edit. I will improve next time. – Corso

Answer 2

Hey you have to wrape </SwiperSlides/> into a div that is inside the </Swiper />

( code from one of my projects) :

 return (
<section>
  <p className='text-white text-3xl font-semibold mb-6'>New Releases</p>
  <Swiper
    spaceBetween={50}
  slidesPerView={6}
  breakpoints={{
    0: {
      slidesPerView: 1,
    },
    400:{
      slidesPerView:2,
    },
    639: {
      slidesPerView: 3,
    },
    865:{
      slidesPerView:4
    },
    1000:{
      slidesPerView:5
    },
    1500:{
      slidesPerView:6
    },
    1700:{
      slidesPerView:7
    }
  }}
  >
  <div>
    {
      newReleases?.length ?
      newReleases.map(album =>{
        return <SwiperSlide key={album.key}>
          <div className='rounded-[10px] p-4 bg-[#181818] w-fit h-[280px]'>
            <div className='h-[158px] w-[158px] object-cover'>
              <img className='h-[158px] rounded-md' src={album.images[1].url} alt="" />
            </div>
            <p className='line-clamp-1 text-white text-xl pt-6'>{album.name}</p>
            <p className='line-clamp-1 pt-1 text-gray-300 pt-4'>{album.artists[0].name}</p>

          </div>
        </SwiperSlide>
      })
      : null
    }
  </div>
  </Swiper>
</section>

)

Deceitful