element Carousel走马灯

首先引入js和css

<!-- 引入样式 -->
<link rel="stylesheet" href="https://unpkg.com/element-ui/lib/theme-chalk/index.css">
<!-- 引入组件库 -->
<script src="https://unpkg.com/element-ui/lib/index.js"></script>

接着引入vue

<script src="https://cdn.jsdelivr.net/npm/vue@2/dist/vue.js"></script>

快速上手

<!-- 轮播图 -->
<section class="banner">
    <el-carousel>
        <el-carousel-item v-for="(item,index) in imgs" :key="index">
            <img :src="item.src" alt="轮播图">
        </el-carousel-item>
    </el-carousel>
</section>

<script th:inline="javascript">
    let vue = new Vue({
        el: "#app"
        , data: {
            imgs: [[${contentBanner}]]
        }
    });
</script>

效果如下

这是具体参数和事件