observer:true,observeParents:true初始化，循环播放初始化会无效

愤路的小鸟 · 发表于 2019-5-22 09:14:08

本帖最后由愤路的小鸟于 2019-5-22 09:25 编辑

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width,initial-scale=1.0,user-scalable=no">
<title>首页</title>
<link rel="stylesheet" href="swiper/swiper.css">
<script src="jquery-2.0.0.js"></script>
<script src="swiper/swiper.js"></script>

</head>
<body style="background: #f6f6f6;">
<h1>observer: true, observeParents: true 初始化不会将loop: true也一起初始化</h1>
<div class="swiper-container" style="height: 210px;">
<div class="swiper-wrapper" id="slide"></div>
<div class="swiper-pagination"></div>
</div>

</body>
<script>
//模拟ajax
setTimeout(function () {
      var aaa = [
         "http://zxpic.imtt.qq.com/zxpic_imtt/2019/05/21/1130/originalimage/113437_2017788197_1_600_400.jpg",
         "http://zxpic.imtt.qq.com/zxpic_imtt/2019/05/21/1130/originalimage/113437_2017788197_1_600_400.jpg",
         "http://zxpic.imtt.qq.com/zxpic_imtt/2019/05/21/1130/originalimage/113437_2017788197_1_600_400.jpg",
         "http://zxpic.imtt.qq.com/zxpic_imtt/2019/05/21/1130/originalimage/113437_2017788197_1_600_400.jpg",
         "http://zxpic.imtt.qq.com/zxpic_imtt/2019/05/21/1130/originalimage/113437_2017788197_1_600_400.jpg",
         "http://zxpic.imtt.qq.com/zxpic_imtt/2019/05/21/1130/originalimage/113437_2017788197_1_600_400.jpg",
         "http://zxpic.imtt.qq.com/zxpic_imtt/2019/05/21/1130/originalimage/113437_2017788197_1_600_400.jpg",
         "http://zxpic.imtt.qq.com/zxpic_imtt/2019/05/21/1130/originalimage/113437_2017788197_1_600_400.jpg",
      ];
      $("#slide").html(function () {
         var html = '';
         aaa.forEach(function (val) {
            html += "<div class=\"swiper-slide\"><img src=\""+val+"\"></div>"
         });
         return html;
      });
},3000);

new Swiper('.swiper-container', {
      loop: true,
      spaceBetween: 30,
      pagination: {
         el: '.swiper-pagination'
      },
      observer: true,//修改swiper自己或子元素时，自动初始化swiper
      observeParents: true //修改swiper的父元素时，自动初始化swiper
});
</script>
</html>