Javascript 如何在swiper.js中制作圆形幻灯片

我想把所有的幻灯片都做成一个圆形。我不能在swiperjs中这样做。有人能帮我做这件事吗。这是我迄今为止所做工作的链接

我尝试使用border radius来实现它，并将其应用于许多类，还使用了！这很重要，但未能实现

---

我认为您必须在

内添加一个
div
。滑动滑梯

并提供相同的宽度和高度，然后您可以使用

边框半径：100%

。在这种情况下，您必须使用in-swiper选项

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

---

对于

img

标签集。样式

边框半径：50%你需要设置
img，左滑动阴影，右滑动阴影
到
边界半径：50%
我这样做了，但不能得到完美的圆。它就像是椭圆形的形状。我更新了linkI，但没用。我已经更新了相同的链接。我在inspect元素中读取了您的代码，结果发现
。圆形项目现在是一个圆圈，但里面的图像不是。我将更新我的答案，告诉您必须如何更改
img
cs，并且由于固定的宽度大小，我需要更改大型和超大设备的宽度。在
之前，这不会有任何问题。圆形项目
宽度小于视口宽度，当视口小于568px时，您可以将
.round item
宽度减小到300px，对于更大的尺寸，swiper将在ronakpatel自动显示项目
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;
}


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