问题：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>