多行滑动器无法在 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%;}我想在反应中从 swiper.js 创建多行滑块。我无法通过他们在文档中提供的内容来实现这一点。这是我想从 swiper.js 创建的 github 存储库 https://github.com/nolimits4web/Swiper/blob/master/demos/170-slides-per-column.html 我如何解决这个问题

Answer 1

我也遇到过同样的问题。这是对我有用的解决方案。包含slidesPerColumnFill="row"在您的刷卡器上。它会像：

<Swiper

  slidesPerView={3} // or 'auto'

  slidesPerColumn={2}

  slidesPerGroup={3}

  spaceBetween={5}

  slidesPerColumnFill="row"

  grabCursor={true}

  autoplay={{ delay: 3000 }}

  navigation

>

Answer 2

我的情况是，刷卡器无法正常工作，因为缺少导入

import 'swiper/css';

在版本“swiper”中：“^8.3.2”和“react”：“^18.2.0”