多行滑动器无法在 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&nbsp; slidesPerView={3} // or 'auto'&nbsp; slidesPerColumn={2}&nbsp; slidesPerGroup={3}&nbsp; spaceBetween={5}&nbsp; slidesPerColumnFill="row"&nbsp; grabCursor={true}&nbsp; autoplay={{ delay: 3000 }}&nbsp; navigation>

Answer 2

我的情况是，刷卡器无法正常工作，因为缺少导入import&nbsp;'swiper/css';在版本“swiper”中：“^8.3.2”和“react”：“^18.2.0”