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

Question

我正在使用 Swiper 框架启动一个网络应用程序。 我已经开始使用库中提供的简单演示应用程序。 当我使用来自 Ajax 调用的 JSON 将演示应用程序的内容替换为动态内容时，我发现初始“swiper-wrapper”类宽度为 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。 swiper html的语法如下:

<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 和 wrapper，这是完全错误的。您的 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 );