时间戳

首页 > 解决方案 > 在 swiper js 中更改幻灯片时隐藏元素

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

问题描述

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

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

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

标签： javascripthtmlcsstwitter-bootstrapswiper.js

解决方案

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

最初，脚本是

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

其中启用了淡入淡出效果，但没有提到淡入淡出的那种。

推荐阅读