多行滑动器无法响应 swiper.js
Multi row swiper not working in react from swiper.js
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 创建多行滑块。我无法通过他们在文档中提供的内容来实现这一目标。这是我要从 swiper.js 创建的内容的 github 存储库
https://github.com/nolimits4web/Swiper/blob/master/demos/170-slides-per-column.html
我该如何解决这个问题
我遇到了同样的问题。这是对我有用的解决方案。在您的刷卡器上添加 slidesPerColumnFill="row"
。它将像:
<Swiper
slidesPerView={3} // or 'auto'
slidesPerColumn={2}
slidesPerGroup={3}
spaceBetween={5}
slidesPerColumnFill="row"
grabCursor={true}
autoplay={{ delay: 3000 }}
navigation
>
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 创建多行滑块。我无法通过他们在文档中提供的内容来实现这一目标。这是我要从 swiper.js 创建的内容的 github 存储库 https://github.com/nolimits4web/Swiper/blob/master/demos/170-slides-per-column.html 我该如何解决这个问题
我遇到了同样的问题。这是对我有用的解决方案。在您的刷卡器上添加 slidesPerColumnFill="row"
。它将像:
<Swiper
slidesPerView={3} // or 'auto'
slidesPerColumn={2}
slidesPerGroup={3}
spaceBetween={5}
slidesPerColumnFill="row"
grabCursor={true}
autoplay={{ delay: 3000 }}
navigation
>