Swiper中文论坛

标题: swiper插件zoom案例bug [打印本页]
作者: empty_back    时间: 2017-5-15 16:40
标题: swiper插件zoom案例bug
通过myswiper.prependSlide()方法新创建出来的slide在放大的时候不能拖动查看
  1. <!DOCTYPE html>
  2. <html lang="en">
  3. <head>
  4.     <meta charset="utf-8">
  5.     <title>Swiper demo</title>
  6.     <meta name="viewport" content="width=device-width, initial-scale=1, minimum-scale=1, maximum-scale=1">

  8.     <!-- Link Swiper's CSS -->
  9.     <link rel="stylesheet" href="dist/css/swiper.min.css">

  11.     <!-- Demo styles -->
  12.     <style>
  13.     html, body {
  14.         position: relative;
  15.         height: 100%;
  16.     }
  17.     body {
  18.         background: #000;
  19.         font-family: Helvetica Neue, Helvetica, Arial, sans-serif;
  20.         font-size: 14px;
  21.         color:#000;
  22.         margin: 0;
  23.         padding: 0;
  24.     }
  25.     .swiper-container {
  26.         width: 100%;
  27.         height: 100%;
  28.     }
  29.     .swiper-slide {
  30.         overflow: hidden;
  31.     }
  32.     </style>
  33. </head>
  34. <body>
  35.     <!-- Swiper -->
  36.     <div class="swiper-container">
  37.         <div class="swiper-wrapper">
  38.             
  39.         </div>
  40.         <!-- Add Pagination -->
  41.         <div class="swiper-pagination swiper-pagination-white"></div>
  42.         <!-- Add Navigation -->
  43.         <div class="swiper-button-prev"></div>
  44.         <div class="swiper-button-next"></div>
  45.     </div>

  47.     <!-- Swiper JS -->
  48.     <script src="dist/js/swiper.min.js"></script>

  50.     <!-- Initialize Swiper -->
  51.     <script>
  52.     var swiper = new Swiper('.swiper-container', {
  53.         zoom: true,
  54.         pagination: '.swiper-pagination',
  55.         nextButton: '.swiper-button-next',
  56.         prevButton: '.swiper-button-prev'
  57.     });
  58.     for(var i=0;i<4;i++){
  59.         swiper.appendSlide('<div class="swiper-slide"><div class="swiper-zoom-container"><img src="http://lorempixel.com/800/800/sports/1"></div></div>');
  60.     }
  61.     swiper.update();
  62.    
  63.     </script>
  64. </body>
  65. </html>
复制代码


作者: Henry_hmy    时间: 2017-5-16 12:12
大兄弟，请问你这个问题解决了么？
作者: Henry_hmy    时间: 2017-5-16 15:10
我也遇到这个问题了。
作者: binglang31    时间: 2017-8-21 15:54


我也遇到这个问题了。



欢迎光临 Swiper中文论坛 (http://bbs.swiper.com.cn/) Powered by Discuz! X3.2