我使用swiper 10， 当display:none后，再display:block，autoplay坏掉了
我做的范例codepen 范例
测试步骤
step1. 点击hange display to none
step2. 点击hange display to block
autoplay就不运作了
这个问题是由于swiper插件在元素display属性为none时，无法正确初始化导致的。为了解决这个问题，我们需要在显示元素之前手动重新初始化swiper插件。
具体的解决方案如下：
首先，给swiper容器添加一个唯一的id，例如swiper-container。
在点击"change display to block"按钮的事件处理程序中，先销毁原有的swiper实例，然后重新初始化swiper。
代码示例：
// 获取swiper容器元素
var swiperContainer = document.getElementById('swiper-container');
// 初始化swiper
var swiper = new Swiper(swiperContainer, {
// swiper的配置项
autoplay: {
delay: 2000,
},
// 其他配置项...
});
// 点击"change display to none"按钮事件处理程序
document.getElementById('hide').addEventListener('click', function() {
// 隐藏swiper容器
swiperContainer.style.display = 'none';
});
// 点击"change display to block"按钮事件处理程序
document.getElementById('show').addEventListener('click', function() {
// 显示swiper容器
swiperContainer.style.display = 'block';
// 销毁原有的swiper实例
swiper.destroy();
// 重新初始化swiper
swiper = new Swiper(swiperContainer, {
// swiper的配置项
autoplay: {
delay: 2000,
},
// 其他配置项...
});
});
通过以上步骤，我们在显示元素之前先销毁原有的swiper实例，然后再重新初始化swiper，可以解决自动播放功能失效的问题。