カルーセルアニメーションを実現するVueコンポーネント

<テンプレート>
  <div id="ラッパー">
    <トランジショングループ名="リスト" タグ="ul" モード="アウトイン">
      <li v-for="(item,index) in piclist" :key="item.url" :style="config[index]">
        <img :src="item.url">
      </li>
    </トランジショングループ>
    <a href="javascript:;" id="arrLeft" class="prev" @click="turnleft"></a>
    <a href="javascript:;" id="arrRight" class="next" @click="turnright"></a>
  </div>
</テンプレート>

エクスポートデフォルト{
  データ（） {
    戻る {
      写真リスト: [
        { url: require("../image/pic1.png") },
        { url: require("../image/pic2.png") },
        { url: require("../image/pic3.png") }
      ]、
      //ファイルイメージ構成 config: [
        {
          位置: "絶対"、
          幅: "400px",
          上: "20px",
          左: "50px",
          不透明度: 0.2、
          zインデックス: 2,
          遷移: "1s"
        },
        {
          位置: "絶対"、
          幅: "800px",
          上: "100px",
          左:「200px」、
          不透明度: 1,
          zインデックス: 4,
          遷移: "1s"
        },
        {
          位置: "絶対"、
          幅: "400px",
          上: "20px",
          左:「750ピクセル」、
          不透明度: 0.2、
          zインデックス: 2,
          遷移: "1s"
        }
      ]、
      前: 0,
      今: Date.now()
    };
  },
  メソッド: {
  //ボタンをクリックして切り替えるアニメーションを実現し、複数回のクリックを防ぐために時間パラメータを設定します turnleft: function() {
      this.now = Date.now();
      if (this.now - this.previous > 1000) {
        this.config.push(this.config.shift());
        this.previous = this.now;
      }
    },
    右折: 関数() {
      this.now = Date.now();
      if (this.now - this.previous > 1000) {
        this.config を unshift します (this.config.pop());
        this.previous = this.now;
      }
    }
  }
};

* {
  マージン: 0;
  パディング: 0;
}
#ラッパー{
  マージン: 自動;
  高さ: 500px;
  幅: 79%;
  位置: 相対的;
}
ul {
  リストスタイル: なし;
}
画像 {
  高さ: 500px;
  幅: 100%;
}
.前,
。次 {
  位置: 絶対;
  高さ: 60px;
  幅: 60ピクセル;
  境界線の半径: 50%;
  上位: 50%;
  上マージン: -56px;
  オーバーフロー: 非表示;
  テキスト装飾: なし;
  背景色: 水色;
  zインデックス: 5;
  不透明度: 1;
}
.前へ {
  左: 0;
}
。次 {
  右: 0;
}
.picleft{
  幅: 400;
  トップ: 20;
  残り: 50;
  不透明度: 0.2;
  zインデックス: 2;
}
.piccenter {
  幅: 800;
  上: 100;
  残り: 200;
  不透明度: 1;
  zインデックス: 4;
}
.picright{
  幅: 400;
  トップ: 20;
  残り: 750;
  不透明度: 0.2;
  zインデックス: 2;
}