在 Swiper.js 中更改幻灯片时隐藏元素可以通过以下步骤实现:
on
方法监听 slideChange
事件。这个事件会在幻灯片切换时触发。slideChange
事件的回调函数中,使用 JavaScript 或 jQuery 等方法选择需要隐藏的元素,并设置其样式属性 display
为 none
,或者添加一个类名来隐藏它。以下是一个示例代码:
// 创建 Swiper 实例
var swiper = new Swiper('.swiper-container', {
// Swiper 配置项
// ...
// 监听 slideChange 事件
on: {
slideChange: function () {
// 在幻灯片切换时隐藏元素
var elementToHide = document.getElementById('elementId'); // 或者使用其他选择器方法选择元素
elementToHide.style.display = 'none'; // 或者添加一个类名来隐藏元素
}
}
});
在上述代码中,你需要将 'elementId'
替换为你需要隐藏的元素的 ID 或类名。
这样,当幻灯片切换时,指定的元素将会被隐藏。你可以根据需要自定义其他样式或动画效果来隐藏元素。
领取专属 10元无门槛券
手把手带您无忧上云