vue+element-ui carousel走马灯一次轮播(显示)指定张数图片
在Vue中使用Element UI的Carousel组件实现一次轮播指定张数的图片,可以通过设置autoplay
和autoplay-count
属性来实现。以下是一个简单的示例代码:
<template>
<el-carousel :interval="3000" height="200px" :autoplay="true" :autoplay-count="5">
<el-carousel-item v-for="item in 10" :key="item">
<h3>{{ item }}</h3>
</el-carousel-item>
</el-carousel>
</template>
<script>
export default {
name: 'CarouselExample'
};
</script>
<style>
.el-carousel__item h3 {
color: #475669;
font-size: 14px;
opacity: 0.75;
line-height: 200px;
margin: 0;
text-align: center;
}
</style>
在这个例子中,el-carousel
组件设置了autoplay
属性为true
来启用自动播放,autoplay-count
属性为5
来指定每次自动播放的图片数量。interval
属性用于设置自动播放的间隔时间,这里设置为3000毫秒(3秒)。el-carousel-item
为每个轮播的项目,这里用v-for
指令生成了10个项目,实际使用时可以替换为实际的图片。
评论已关闭