无法创建 Vue.js 轮播

Question

我尝试创建一个 Vue.js Carousel 作为组件。 但是，我迷路了。

它应该每 5 秒切换到下一个“滑块”，带有图像 和文字。或者如果可以，请在说明中添加链接。

友好的问候

P.S 我是新手。

<template>
  <div >
    <div class="carousel"
      v-for="(item,i) in items"
      :key="i"
      :src="item.source"
      :alt="item.alt"
      transition="fade"
    >
     <div class="carousel-image">
        <img v-attr="item.src" alt="image">

     </div>
     <div class="carousel-text">
        <p>{{item.title}}</p>
        <p>{{item.position}}</p>
     </div>
    </div>
  </div>
</template>

<script>
  export default {
    data () {
      return {
        items: [
          {
            source: '../assets/companies/migros.svg.png',
            title: "Lorem ipsum dolor sit amet, consectetur adipisicing elit",
            alt: "1",
            position: "Jon Doe, -- Migros Chef "
          },
          {
            source: '../assets/companies/xxx.svg.png',
            title: "Lorem ipsum dolor sit amet, consectetur adipisicing elit",
            alt: "2",
            position: "Jon Doe, -- xxx "
          },
   
         
        ]
      }
    }
  }
</script>

Answer 1

举个例子：

var app = new Vue({
	el: '#app',
	data() {
		return {
			list: [1,2,3,4],
			curIndex: 0
		}
	},
	created () {
		window.setInterval(_=>{
			if(this.curIndex+1>this.list.length-1){
				this.curIndex = 0;
			}else{
				this.curIndex++
			}
		},3000)
	}
})

.wrapper{
		width: 200px;
		height: 100px;
		position: relative;
	}
	.wrapper>div{
		position: absolute;
		left: 0;
		top: 0;
		width: 100%;
		height: 100px;
		line-height: 100px;	
		text-align: center;
		color: #fff;	
	}
	.wrapper>div:nth-child(1){
		background: red;
	}
	.wrapper>div:nth-child(2){
		background: blue;
	}
	.wrapper>div:nth-child(3){
		background: orange;
	}
	.wrapper>div:nth-child(4){
		background: yellow;
	}
	.fade-enter,.fade-leave-active{
		opacity: 0;
	}
	.fade-enter-active,.fade-leave-active{
		transition: opacity .5s ease-in-out;
	}

<script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
<div id="app">
  	<transition-group tag="div" class="wrapper" name="fade">
  		<div v-for="(item,index) of list" :key="index" v-show="index==curIndex">
			{{item}}
		</div>
	</transition-group>
</div>