如何解决多行扫描器无法正常工作,来自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%;
}
我想在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
>
版权声明:本文内容由互联网用户自发贡献,该文观点与技术仅代表作者本人。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如发现本站有涉嫌侵权/违法违规的内容, 请发送邮件至 dio@foxmail.com 举报,一经查实,本站将立刻删除。