Vue+swiperでタイムライン効果を実現

<テンプレート>
  <div class="hello" style="高さ:100%;幅:100%;位置:相対;">
    <div class="swiperlist">
      <div class="スワイパー">
        <div class="スワイパーコンテナ">
          <div class="スワイパーラッパー">
            <div class="swiper-slide" v-for="(activity, index) in superurl" :key="index">
              <div style="padding-left: 4px;">
                <div class="step-line"></div>
                <div class="step-content">
                  <div class="ステップ数"></div>
                  <div class="sub_title">{{activity.img}}</div>
                </div>
              </div>
            </div>
          </div>
        </div>
        <div class="buttom" v-if="superurl.length>2">
          <div class="スワイパーボタン前"></div>
          <div class="スワイパーボタン-次へ"></div>
        </div>
      </div>
    </div>
  </div>
</テンプレート>
<スクリプト>
「swiper」からSwiperをインポートします。
"../../../../../node_modules/swiper/css/swiper.min.css"をインポートします。
「./baseMap.vue」からbaseMapをインポートします。
"../../../../../static/mapbox/css/map.css"をインポートします。
エクスポートデフォルト{
  名前:「マップ」、
  コンポーネント:
    ベースマップ
  },
  データ（） {
    戻る {
      スーパーURL: [
        {
          URL: "",
          画像: "2019-01"
        },
        {
          URL: "",
          画像: "2019-02"
        },
        {
          URL: "",
          画像: "2019-03"
        },
        {
          URL: "",
          画像: "2019-04"
        },
        {
          URL: "",
          画像: "2019-05"
        },
        {
          URL: "",
          画像: "2019-06"
        }
      ]
    };
  },
  時計： {}、
  メソッド: {},
  マウント() {
    var mySwiper = 新しいSwiper(".swiper-container", {
      slidesPerView: 3, // 3 つのスライドを表示します centeredSlides: true, // true に設定すると、アクティブなスライドはデフォルトの左ではなく中央に配置されます。
      centerInsufficientSlides: true, // このパラメータをオンにします。スライドの合計数が slidesPerView より少ない場合、スライドは中央に配置されます。ループモードとslidesPerColumnには適用されません
      centeredSlidesBounds: true, // 最初のスライドと最後のスライドが常に端に収まるようにします。
      // loop: true, // loop // autoplay: true, // autoplay direction: "vertical", // 垂直画面ナビゲーション: {
        nextEl: ".swiper-button-next",
        前へ: ".swiper-button-prev"
      }
    });
  }
};
</スクリプト>
<スタイルスコープ>
.スワイパーリスト{
  幅: 90ピクセル;
  高さ: 256px;
  位置: 絶対;
  背景: #f5f5f5;
  左: 5px;
  上: 205px;
  オーバーフロー: 非表示;
  パディング: 32px 0;
  境界線の半径: 6px;
}
.スワイパー{
  幅: 100%;
  高さ: 250px;
  オーバーフロー: 非表示;
}
.スワイパーコンテナ{
  高さ: 250px !重要;
}
.スワイパースライドアクティブ{
  色: #3a70ca;
}
.スワイパーボタン前へ、
.swiper-container-rtl .swiper-button-next {
  左: 28px;
  右: 自動;
  上: 15px;
  変換: 回転(90度);
  色: #3a70ca;
}
.スワイパーボタン次へ、
.swiper-container-rtl .swiper-button-prev {
  トップ：94%
  変換: 回転(90度);
  左: 28px;
  色: #3a70ca;
}
.swiper-button-next:後、
.swiper-button-prev:after {
  フォントサイズ: 25px;
}
.sub_title {
  左マージン: 15px;
  上マージン: -19px;
}
.ステップ数 {
  表示: インラインブロック;
  高さ: 2px;
  幅: 2px;
  色: #fff;
  背景色: #3a70ca;
  行の高さ: 30px;
  境界線の半径: 50%;
  テキスト配置: 中央;
  境界線: 2px実線 #3a70ca;
  上マージン: 36px;
}
.ステップ番号:後{
  コンテンツ： "";
  幅: 2px;
  高さ: 84px;
  左境界線: 1.5px 点線 #3a70ca;
  /* 背景色: #3a70ca; */
  位置: 絶対;
  上: 0px;
  左マージン: -1px;
}
</スタイル>