javascript - 多行刷卡器无法从 swiper.js 使用react

Question

import React, { Fragment } from "react";
import { Swiper, SwiperSlide } from "swiper/react";
import SwiperCore, { EffectCoverflow, Navigation } from "swiper";
import "swiper/swiper-bundle.css";
import "./App.css";
import Party2 from "./Party2.png";

SwiperCore.use([EffectCoverflow, Navigation]);

const slides = [];
for (let i = 0; i < 10; i += 1) {
  slides.push(
    <SwiperSlide key={`slide-${i}`}>
      <img
        className="review-slider-image"
        src={Party2}
        style={{ listStyle: "none" }}
        alt={`Slide ${i}`}
      />
    </SwiperSlide>
  );
}

const App = () => {
  return (
    <Fragment>
      <Swiper
        slidesPerView="3" // or 'auto'
        slidesPerColumn="2"
        slidesPerGroup="3"
        spaceBetween="5"
        grabCursor={true}
        autoplay={{ delay: 3000 }}
        navigation
      >
        {slides}
      </Swiper>
    </Fragment>
  );
};

export default App;

CSS 代码

body {
  background: #eee;
  font-family: Helvetica Neue, Helvetica, Arial, sans-serif;
  font-size: 14px;
  color: #000;
  margin: 0;
  padding: 0;
}

.swiper-container {
  width: 100%;
  height: 100%;
  margin-left: auto;
  margin-right: auto;
}

.swiper-slide {
  width: 300px;
  height: 300px;
}

.swiper-slide img {
  width: 100%;
}

我想在 react 中从 swiper.js 创建多行 slider 。我无法通过他们在文档中提供的内容来实现这一目标。这是我想从 swiper.js 创建的 github 存储库 https://github.com/nolimits4web/Swiper/blob/master/demos/170-slides-per-column.html 我该如何解决这个问题

Answer 1

我也遇到了同样的问题。这是对我有用的解决方案。在您的 swiper 上包含 slidesPerColumnFill="row"。它会是这样的:

<Swiper
  slidesPerView={3} // or 'auto'
  slidesPerColumn={2}
  slidesPerGroup={3}
  spaceBetween={5}
  slidesPerColumnFill="row"
  grabCursor={true}
  autoplay={{ delay: 3000 }}
  navigation
>