网上各种例子，试了都不靠谱，自己用tabs + 跑马灯实现一个，简单直接，不用css，也不写动画，效果刚刚好，不多说，上源码
<template>
<div style="width: 80%; margin-left: auto; margin-right: auto;">
<div style="margin-top: 40px">
<el-tabs v-model="activeTab" @tab-click="tabClick">
<el-tab-pane label="1111" name="111"> </el-tab-pane>
<el-tab-pane label="2222" name="222"> </el-tab-pane>
<el-tab-pane label="3333" name="333"> </el-tab-pane>
</el-tabs>
<el-carousel
trigger="click"
height="400px"
indicator-position="none"
arrow="never"
ref="tabRef"
:autoplay="false"
>
<el-carousel-item name="111">
111
</el-carousel-item>
<el-carousel-item name="222">
222
</el-carousel-item>
<el-carousel-item name="333">
333
</el-carousel-item>
</el-carousel>
</div>
</div>
</template>
<script setup lang="ts">
import {ref ,onMounted ,nextTick} from 'vue';
const activeTab = ref('111');
const tabRef = ref();
const tabClick = (tab,event) =>{
activeTab.value = tab.props.name;
tabRef.value.setActiveItem(tab.props.name);
}
onMounted(() => {
nextTick(() => {
tabRef.value.setActiveItem(activeTab.value);
});
});
</script>
<style scoped>
</style>
简单的效果图
image.png
