javascript - Multi row swiper not working in react from swiper.js - Stack Overflow

admin管理员组

文章数量:1278795

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 code

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

I want to create multi row slider from swiper.js in react. I am not able to achieve that with what they have provided in the documentation. Here is the github repo of what I want to create from swiper.js .html How do I solve this issue

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 code

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

I want to create multi row slider from swiper.js in react. I am not able to achieve that with what they have provided in the documentation. Here is the github repo of what I want to create from swiper.js https://github./nolimits4web/Swiper/blob/master/demos/170-slides-per-column.html How do I solve this issue

• javascript
• reactjs
• swiper.js

Share Improve this question Follow asked Nov 7, 2020 at 6:21 ronak patelronak patel 41811 gold badge1010 silver badges2525 bronze badges

Add a ment  | 

2 Answers 2

Sorted by: Reset to default 9

I've had the same problem. Here is the solution that worked for me. Include slidesPerColumnFill="row" on your swiper. It will be like:

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

I my case, the swiper was not working correctly, because was missing the import

import 'swiper/css';

in version "swiper": "^8.3.2" and "react": "^18.2.0"

本文标签： javascriptMulti row swiper not working in react from swiperjsStack Overflow