0

我正在使用 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 );
          }
        });
    });

谢谢！

4

2 回答 2

0

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

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

谢谢您的帮助

于 2014-12-25T12:28:14.797 回答
0

你做错了伙计。当我刚接触它时，我发现了同样的问题，但后来我知道我必须根据它的语法生成 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 和包装器，这是完全错误的。您的 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 );
于 2014-12-25T06:51:59.563 回答