Vue2.0 走马灯（非swiper实例）

例子

https://www.swiper.com.cn/demo/web/index.html（下拉到最后一个）

Vue中安装

main.js中引用

不需要

页面中使用

样式及html太长了，先不放了，例子里面可以下载，如果有需要我这边实例的可以评论说下。。

<template>
  <ul class="principal-swiper">
      <li v-for="item in HeadmasterStarList" :key="item.id">
            <img :src="'http://xusheng.manyunad.com'+item.image">
      </li>
  </ul>
<template>
import anime from "animejs/lib/anime.es.js";
export default {
  name: "Index",
   mounted() {
    // this.$nextTick(_ => {
    //   this.settingEl = this.$refs.principal; //<div class="hot-wrap">..</div>
    //   this.docEl = document;
    // });
    let xTrans = [];
    anime.set(".principal-swiper", {
      translateX: function(el, i, l) {
        xTrans[i] = { x: i * 100 };
        return i * 100;
      }
    });

    anime({
      targets: xTrans,
      duration: 6000, //走一周持续时间
      easing: "linear",
      x: "+=200",
      loop: true,
      update: function(anim) {
        anime.set(".principal-swiper", {
          translateX: function(el, i, l) {
            return xTrans[i].x % 600;
          }
        });
      }
    });
  }
}