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

【问题标题】：Hide elements while changing slide in swiper js在 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 会在初始帧上离开页面，但脚本会向下移动两帧。

标签： javascript html css twitter-bootstrap swiper.js

【解决方案1】：

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

最初，脚本是

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

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

【讨论】：