问题：Swiper父容器隐藏时实例化组件，组件滑动失效
解决办法：初始化组件时，配置 observe true、observeParents true。
observe参数
启动动态检查器(OB/观众/观看者)，当改变swiper的样式（例如隐藏/显示）或者修改swiper的子元素时，自动初始化swiper。
observeParents参数
将observe应用于Swiper的父元素。当Swiper的父元素变化时，例如window.resize，Swiper更新。
https://www.swiper.com.cn/api/observer/218.html
https://www.swiper.com.cn/api/observer/219.html
1 <!DOCTYPE html> 2 <html lang="en"> 3 <head> 4 <meta charset="UTF-8"> 5 <title>Title</title> 6 <link href="https://cdn.staticfile.org/Swiper/4.4.1/css/swiper.min.css" rel="stylesheet"> 7 <script src="https://cdn.staticfile.org/Swiper/4.4.1/js/swiper.min.js"></script> 8 </head> 9 <body> 10 <button onclick="toggle(this)">切换显示/隐藏swiper</button> 11 <button onclick="toggleParent(this)">切换显示/隐藏swiper父容器</button> 12 <div id="popup" style="display: none"> 13 <div class="swiper-container" style="display: block"> 14 <div class="swiper-wrapper"> 15 <div class="swiper-slide"><img src="http://h5.descente-china.com.cn/images/Slideshow_Daniel/Slideshow_Daniel001.jpg" alt=""></div> 16 <div class="swiper-slide"><img src="http://h5.descente-china.com.cn/images/Slideshow_Daniel/Slideshow_Daniel002.jpg" alt=""></div> 17 <div class="swiper-slide"><img src="http://h5.descente-china.com.cn/images/Slideshow_Daniel/Slideshow_Daniel003.jpg" alt=""></div> 18 <div class="swiper-slide"><img src="http://h5.descente-china.com.cn/images/Slideshow_Daniel/Slideshow_Daniel004.jpg" alt=""></div> 19 <div class="swiper-slide"><img src="http://h5.descente-china.com.cn/images/Slideshow_Daniel/Slideshow_Daniel005.jpg" alt=""></div> 20 <div class="swiper-slide"><img src="http://h5.descente-china.com.cn/images/Slideshow_Daniel/Slideshow_Daniel006.jpg" alt=""></div> 21 <div class="swiper-slide"><img src="http://h5.descente-china.com.cn/images/Slideshow_Daniel/Slideshow_Daniel007.jpg" alt=""></div> 22 </div> 23 </div> 24 </div> 25 </body> 26 <script> 27 var swiper = new Swiper('.swiper-container', {observer: true, observeParents: true,}); 28 var swiper_container = document.querySelector('.swiper-container'); 29 var popup = document.querySelector('#popup'); 30 31 function toggle() { 32 var display = swiper_container.style.display; 33 if (display === 'block') { 34 swiper_container.style.display = 'none'; 35 } else { 36 swiper_container.style.display = 'block'; 37 } 38 39 40 } 41 42 function toggleParent() { 43 var display = popup.style.display; 44 if (display === 'block') { 45 popup.style.display = 'none'; 46 } else { 47 popup.style.display = 'block'; 48 } 49 } 50 </script> 51 </html>
