解决 Swiper.4.x.js 无法动态加载数据 无法渲染 pagination 问题

最近在做项目的时候需要做动态轮播，使用的是Swiper.4.x.js。问题是需要动态修改swiper的数据但是pagination一直无法出来。

 <div class="swiper live-calendar-swiper" id="live-calendar-swiper">
                      <div class="swiper-wrapper vlist">
                      </div>
                      <div class="swiper-pagination"></div>

                    </div>

function getlivedata(selectDay) {
      $.ajax({
        url: 链接地址,
        type: "get",
        data: {
        },
        success: function (res) {
          let data = res.data;
          // $('.live-calendar-swiper').html('')
          $('.vlist').html(`
            ${data.map(i => {
            return `<div class="swiper-slide">
              <a href="/detail/${i.pubId}">
                          <p>
                            <span class="tag">${i.state == 0 ? '直播预告' : i.state == 1 ? '正在直播' : '直播回放'}</span>
                            <img src="${i.resPosterUrl}" class="image" />
                          <p class="title">
                           ${i.resName}
                          </p>
                          </p></a>
                        </div>`
          }).join('')
            }
         `)
        }
      });
    }

　　

 var mySwiper = new Swiper("#live-calendar-swiper", {
            pagination: {
                el:'.swiper-pagination'   
            },
            loop: isLoop,
            observer: true, // 监听动态加载 dom 结构
            observeParents: true,
            observeSlideChildren: true,
            autoplay: {
                delay: 2000,
                disableOnInteraction: false // 保证在手动滑动轮播图后能够自动滑动
            }
        });

　　

　上面的代码 能够显示轮播图，并在多个模块之间切换能够正常工作，但有一个问题，pagination 并不能渲染；试了很多办法之后，无果。

最后推荐使用 swiper 3.x （下载地址：https://pan.baidu.com/s/1kVBLmmF）的版本，具体代码实现如下：

 var mySwiper = new Swiper("#live-calendar-swiper", {
      loop: true,
      autoplay: 2000,
      autoplayDisableOnInteraction: false, // 保证在手动滑动轮播图后能够自动滑
      observer: true,
      observeParents: true,
      observeSlideChildren: true,
      pagination: '.swiper-pagination',
      paginationClickable: true,
    });

上面代码和4.x版本动态数据的效果一样，并能够实现 pagination 的渲染。