问题
所有最新版本的 Safari 浏览器都存在一个错误（#6650），该错误无法正确地 3D 转换传递到插槽中自定义元素中的元素。
这会导致使用 3D 变换的 Swiper 特效（例如 Cube、Coverflow 和（可能）Creative Effect）出现错误的外观。
<swiper-container effect="cube">
<!-- "perspective" prop can't be applied to these slides -->
<swiper-slide>Slide 1</swiper-slide>
<swiper-slide>Slide 2</swiper-slide>
<swiper-slide>Slide 3</swiper-slide>
</swiper-container>
解决方案
在 Swiper v10.1.0 中，我们引入了幻灯片插槽来解决此问题。在这种情况下，我们不将幻灯片放入 swiper-container 中，而只放入它们的内容
<swiper-container effect="cube">
<!-- Content goes to the first slide (with index 0) -->
<div slot="slide-0">Slide 1</div>
<!-- Content goes to the second slide (with index 1) -->
<div slot="slide-1">Slide 2</div>
<!-- Content goes to the third slide (with index 2) -->
<div slot="slide-2">Slide 3</div>
</swiper-container>
Swiper 组件将动态检查传递的幻灯片插槽元素的数量，并自动创建所需数量的幻灯片。可以使用的幻灯片插槽的数量没有限制。
但在此情况下，我们需要重新考虑幻灯片的样式，因为我们没有直接在 DOM 中的幻灯片元素，而且幻灯片本身现在位于 shadow DOM 中。
因此，建议为幻灯片内容使用一些自定义包装器，例如：
<swiper-container effect="cube">
<!-- Content goes to the first slide (with index 0) -->
<div slot="slide-0" class="slide-content">
<img class="slide-image" src="path/to/slide-image.jpg" />
<div class="slide-title">Slide 1</div>
</div>
<!-- Content goes to the second slide (with index 1) -->
<div slot="slide-1" class="slide-content">
<img class="slide-image" src="path/to/slide-image.jpg" />
<div class="slide-title">Slide 2</div>
</div>
<!-- Content goes to the third slide (with index 2) -->
<div slot="slide-2" class="slide-content">
<img class="slide-image" src="path/to/slide-image.jpg" />
<div class="slide-title">Slide 3</div>
</div>
...
</swiper-container>
<style>
/* make sure slide content takes all available slide size */
.slide-content {
width: 100%;
height: 100%;
position: relative;
}
/* slide image */
.slide-image {
position: absolute;
left: 0;
top: 0;
width: 100%;
height: 100%;
object-fit: cover;
}
/* slide title */
.slide-title {
color: #fff;
position: absolute;
left: 32px;
bottom: 32px;
font-weight: bold;
font-size: 32px;
}
</style>
现在一切正常（在 Safari 中）
附言
一如既往，如果您喜欢 Swiper，请通过捐赠或承诺来支持该项目
- 在 Patreon 上：https://www.patreon.com/swiperjs
- 在 Open Collective 上：https://opencollective.com/swiper
并查看我们的高级项目
您的支持对我们意义重大！