问题
所有最新版本的 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 中幻灯片元素，而幻灯片本身现在位于影子 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 中）
P.S.
并且一如既往，如果您喜欢 Swiper，请通过捐赠或认捐来支持该项目
- 在 Patreon 上：https://www.patreon.com/swiperjs
- 在 Open Collective 上：https://opencollective.com/swiper
并查看我们的高级项目
您的支持对我们意义重大！