在 swiper js 中更改幻灯片时隐藏元素

Posted 2023-05-08

【中文标题】在 swiper js 中更改幻灯片时隐藏元素

【英文标题】：Hide elements while changing slide in swiper js

【发布时间】：2021-11-23 21:05:02

【问题描述】：

我在页面上使用 Swiper js 制作幻灯片。每张幻灯片都有另一个图像元素位于幻灯片图像内部和一部分外部。所以当幻灯片改变时，可以看到幻灯片之外的部分。

我尝试将overflow: hidden 用于不同类别的 swiper js，但没有成功。

这里是您可以查看滑块的链接：https://project-instock.netlify.app/index1.html#0

【问题讨论】：

你为什么不使用scroll-snap规则？

scroll-snap如何在幻灯片变化时隐藏img元素？

@DiD 你能解释一下吗？据我所知，scroll-snap 用于支持智能手机上的触摸。一次滚动一个部分。

@tru-shar 滚动脚本在我的 macbook 上有点不寻常。在触摸板上以一点速度移动时，它会同时滚动两帧。此外，scroll-snap 在移动设备上的工作效率更高。

在普通页面上移动触摸板，页面将滚动 1/4-1/3 屏幕。也就是说，scroll-snap 会在初始帧上离开页面，但脚本会向下移动两帧。

【参考方案1】：

我通过添加 fadeEffect: crossFade: true, 来做到这一点。

最初，脚本是

var swiper = new Swiper('.mySwiper5', 
effect: 'fade',
centeredSlides: true,
pagination: 
el: '.swiper-pagination',
clickable: true,
,
autoplay: 
delay: 7000,
disableOnInteraction: false,
,
);

启用了淡入淡出效果，但没有提及淡入淡出的种类。