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

我正在使用Swiper框架启动Web应用程序。
我已经开始使用库中提供的简单演示应用程序。
当我使用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 );
          }
        });
    });

谢谢！

最佳答案

你做错了哥们。当我不熟悉它时，我发现了同样的问题，但后来我知道我必须根据其语法生成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和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 );

关于javascript - iDanero.us swiper-动态加载数据时初始div宽度不正确，我们在Stack Overflow上找到一个类似的问题：https://stackoverflow.com/questions/27644837/