自适应图片高度轮播

TweenMax结合Swiper实现根据图片高度动画过渡切换轮播

前言：需求是轮播不限制图片高度，平缓自然过渡与切换；

1 . 使用（可以到官网自行下载）：

//引入文件
<link rel="stylesheet" href="/static/ctrip/swiper-bundle.min.css">
<script src="/static/js/jquery-3.5.1.min.js"></script>
<script src="/static/ctrip/swiper-bundle.min.js"></script>
<script src="/static/ctrip/TweenMax.min.js"></script>

2 . html代码：

 <div class="swiper-container" id="gallery">
     <div class="swiper-wrapper img_arr"></div>
     <div class="swiper-pagination"></div>
     <canvas id="shows" style="position: absolute; left: 0px; top: 0px;"></canvas>
 </div>

3 . js代码：

//请求渲染图片
$.ajax({
   
  type: "post",
   url: "xxx",
   dataType: "json",
   success: function(diary) {
   
	// 轮播图
      let img_arr = '';
      diary.img_arr.forEach((v1, i) => {
   
          img_arr += `
              <div class="swiper-slide clearfix">
                      <img src="${
     v