如何解决如何在swiper.js中制作圆形幻灯片
import React,{ useState,Fragment } from "react";
import { Swiper,SwiperSlide } from "swiper/react";
import SwiperCore,{
Navigation,Pagination,EffectFade,EffectCoverflow,EffectCube,} from "swiper";
import "swiper/swiper-bundle.css";
import "./App.css";
SwiperCore.use([
EffectCoverflow,Navigation,]);
const slides = [];
for (let i = 0; i < 5; i += 1) {
slides.push(
<SwiperSlide key={`slide-${i}`}>
<img
src={`https://picsum.photos/id/${i + 1}/500/300`}
style={{ listStyle: "none" }}
alt={`Slide ${i}`}
/>
</SwiperSlide>
);
}
function App() {
return (
<Fragment>
<Swiper
initialSlide="2"
effect="coverflow"
navigation
grabCursor={true}
centeredSlides={true}
slidesPerView="3"
coverflowEffect={{
rotate: 50,stretch: 0,depth: 300,modifier: 3,}}
>
{slides}
</Swiper>
</Fragment>
);
}
export default App;
CSS代码
body {
background: #fff;
font-family: Helvetica Neue,Helvetica,Arial,sans-serif;
font-size: 14px;
color: #000;
margin: 0;
padding: 0;
}
.swiper-container {
width: 100%;
padding-top: 50px;
padding-bottom: 50px;
}
img {
width: 100%;
}
.swiper-slide {
border-radius: 50% !important;
}
我想使所有幻灯片都像一个圆形。我无法在swiperjs中做到这一点。谁能帮助我做到这一点。这是我到目前为止所做的工作。
我尝试使用border-radius进行此操作,并将其应用于许多类,还使用了!important,但无法实现。
https://nifty-rosalind-68dc39.netlify.app/
解决方法
我认为您必须在div
内添加.swiper-slide
并赋予其相等的宽度和高度,然后才能使用border-radius: 100%
。在这种情况下,您必须在滑动选项中使用auto slides per view。
<div class="swiper-slide">
<div class="round-item">
<img src="..." alt="..." />
</div>
</div>
.swiper-slide .round-item {
width: 200px;
height: 200px;
border-radius: 100%;
overflow: hidden;
}
.swiper-slide .round-item img {
width: 100%;
height: 100%;
object-fit: cover;
}
版权声明:本文内容由互联网用户自发贡献,该文观点与技术仅代表作者本人。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如发现本站有涉嫌侵权/违法违规的内容, 请发送邮件至 dio@foxmail.com 举报,一经查实,本站将立刻删除。