一个基于vue的时间轴轮播图插件

简单Demo效果： 

引入： 

<script src="js/jquery.min.js"></script> <!-- >=1.11.2 -->
<script src="js/timeline.min.js"></script>

<link rel="stylesheet" href="css/timeline.css">

Html: 

<template>
    <div class="timeline-container timeline-theme-1">
      <div class="timeline js-timeline">
        <div data-time="2017" class="theme-2" >
          your content or markup
        </div>
        <div data-time="2016" class="theme-6">
          your content or markup
        </div>
        <div data-time="2015" class="theme-4">
          your content or markup
        </div>
        <div data-time="2014" class="theme-5">
          your content or markup
        </div>
        <div data-time="2013" class="theme-3">
          your content or markup
        </div>
      </div>
    </div>
</template>

<style>
.timeline-theme-1 {
  width: 600px;
  margin: 70px auto auto;
}

.timeline-theme-1 .timeline-list {
    width: 600px !important;
    height: 250px;
}

.js-timeline .box-item {
  float: left;
  width: 600px;
  height: 250px;
  color: #fff;
  text-align: center; }

.theme-1 {
  background: #4A2AB2; }

.theme-2 {
  background: #7dffc3; }

.theme-3 {
  background: #23A5E9; }

.theme-4 {
  background: #93C763; }

.theme-5 {
  background: #949923; }

.theme-6 {
  background: #990055; }
</style>

 JS：

$('.js-timeline').Timeline({
        autoplay: true,
        mode: 'vertical',
        itemClass: 'box-item'
})

github地址：https://github.com/ilkeryilmaz/timelinejs 

附：基于jquery 横向/纵向 时间轴插件推荐 

其他效果（可能会有闪屏Bug）