使 Swiper 滑块响应 React.js

Question

我想让我的 Swiper Slider 在 React.js 中响应我正在使用 Swiper React Components，我是新手。我在 css 中的媒体查询中添加了相同的宽度，并在组件的断点中添加了相同的宽度。但仍然存在问题，它没有响应并在右侧添加了一些 space。

above 576px breakpoint look like this

above 768px breakpoint look like this

感谢任何帮助。

滑块组件：

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：我还在媒体查询中添加了 .swiper-container class。

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

Answer 1

嘿，当我从断点删除宽度和删除 css 时，这对我有用。我不确定这是否是正确的方法。如果有人知道正确的方法，请纠正我。我认为这对我有用，这就是我发布答案的原因。

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

使 Swiper 滑块响应 React.js

Make Swiper Slider Responsive in React.js

swiper

reactjs

react-swiper