Невозможно создать Карусель Vue.js

Question

Я пытаюсь создать Карусель Vue.js как компонент.Тем не менее, я потерялся.

Он должен переходить к следующему «ползунку» каждые 5 секунд, с изображением и текстом.Или, если можете, то, пожалуйста, поставьте ссылку в описании.

дружеское отношение

PS Я новичок.

<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>