SOURCE

var vm = new Vue({
			el: '#carousel',
			data: {
				slideList: [{
					"clickUrl": "#",
					"image": "http://dummyimage.com/1745x492/f1d65b"
				}, {
					"clickUrl": "#",
					"image": "http://dummyimage.com/1745x492/40b7ea"
				}, {
					"clickUrl": "#",
					"image": "http://dummyimage.com/1745x492/f1d65b"
				}, {
					"clickUrl": "#",
					"image": "http://dummyimage.com/1745x492/40b7ea"
				}],
				currentIndex: 0,
				timer: ''
			},
			mounted: function() {
				this.$nextTick(function() {
					this.timer = setInterval(function() {
						vm.autoPlay()
					}, 3000)
				})
			},
			methods: {
				go: function() {
					this.timer = setInterval(function() {
						vm.autoPlay()
					}, 3000)
				},
				stop: function() {
					clearInterval(this.timer)
					this.timer = null
				},
				change: function(index) {
					this.currentIndex = index
				},
				autoPlay: function() {
					this.currentIndex++
						if(this.currentIndex > this.slideList.length - 1) {
							this.currentIndex = 0
						}
				}
			}
		})

<div class="wrap" id="carousel">
  <transition-group tag="ul" class='slide-ul' name="list">
    <li v-for="(list,index) in slideList" :key="index" v-show="index===currentIndex"
    class="list-item" @mouseenter="stop" @mouseleave="go">
      <a :href="list.clickUrl">
        <img class="slide-img" :src="list.image">
      </a>
    </li>
  </transition-group>
  <div class="carousel-items">
    <span v-for="(item,index) in slideList.length" :class="{'active':index===currentIndex}"
    @mouseover="change(index)">
    </span>
  </div>
</div>

ul,
li {
  list-style: none;
  margin: 0;
  padding: 0;
}

.wrap {
  position: relative;
  width: 100%;
  max-width: 600px;
  height: 280px;
  overflow: hidden;
}

.slide-img {
  width: 100%;
  height: 280px;
}

.carousel-items {
  position: absolute;
  z-index: 10;
  bottom: 20px;
  width: 100%;
  text-align: center;
  font-size: 0;
}

.carousel-items span {
  display: inline-block;
  height: 6px;
  width: 30px;
  margin: 0 3px;
  background-color: #b2b2b2;
  cursor: pointer;
}

.carousel-items .active {
  background-color: red;
}

.list-item {
  position: absolute;
}

.list-enter-active {
  transition: all 1s ease;
  transform: translateX(0)
}

.list-leave-active {
  transition: all 1s ease;
  transform: translateX(-100%)
}

.list-enter {
  transform: translateX(100%)
}

.list-leave {
  transform: translateX(0)
}