Question

我正在使用Swiper框架启动Web应用程序。我已经开始使用库中提供的简单演示应用程序了。当我使用来自Ajax调用的JSON用动态内容替换演示应用程序的内容时，我发现最初的＆＃9; swiper-wrapper＆＃39; class width是0px，直到我更改浏览器大小然后它生成正确的宽度。

这是我用于加载数据的Jquery代码，我将它放在标记之前。我也为代码尝试了不同的位置。

$(document).ready(function () {
    $.ajax({
          type: "POST",
          dataType: "JSON",
          url: "json.php", //Relative or absolute path to response.php file
          success: function(data) {
            var toadd;
            toadd = '';
            for (var i=0; i < data.length;i++)
            {           
                toadd+='<div class="swiper-slide"><div class="swiper-container scroll-container"><div class="swiper-scrollbar"></div><div class="swiper-wrapper"><div class="swiper-slide"><div class="page-inner">';
                toadd+="<h1>" + data[0]["title"] + "</h1>";
                toadd+="<img class=\"movie-pic\" src="+data[0]["image"]+">";
                toadd+="<div class=\"movie-text\">Test language</div>";
                toadd+="</div></div></div></div></div>";    
            }
            $(".swiper-wrapper").html( toadd );
          }
        });
    });

谢谢！

Answer 1

你做错了伙计。当我刚接触它时，我发现了同样的问题，但后来我知道我必须根据它的语法生成html。 html的swiper语法如下：

<div class="swiper-container">  \\ This is main container of your swiper
<div class="swiper-wrapper">    \\ wrapper is immediate child of container and than you have slides inside it
  <!--First Slide-->
  <div class="swiper-slide"> 
    <!-- Any HTML content of the first slide goes here -->
  </div>

  <!--Second Slide-->
  <div class="swiper-slide">
    <!-- Any HTML content of the second slide goes here -->
  </div>

  <!--Third Slide-->
  <div class="swiper-slide"> 
    <!-- Any HTML content of the third slide goes here -->
  </div>
  <!--Etc..-->
  </div>
  </div>

当您将幻灯片作为外部div和内部幻灯片时，您正在添加swiper-container和包装器，这是完全错误的。您的for循环语法如下：

 var toadd;
 toadd = '<div class="swiper-container"><div class="swiper-wrapper">';
 for (var i=0; i < data.length;i++)
 {

      toadd+='<div class="swiper-slide"><div class="page-inner">';
      toadd+="<h1>" + data[0]["title"] + "</h1>";
      toadd+="<img class=\"movie-pic\" src="+data[0]["image"]+">";
      toadd+="<div class=\"movie-text\">Test language</div>";
      toadd+="</div></div>";

 }
 toadd+='</div></div>'
 $("parent_ctrl_swiper_id").html( toadd );

Answer 2

我设法通过在初始化后添加以下函数来解决这个问题。

function reinitSwiper(swiper) {
  setTimeout(function () {
   swiper.reInit();
  }, 500);
}

感谢您的帮助

iDanero.us swiper - 动态加载数据时初始div宽度不正确

2 个答案: