vue使用carousel(走马灯)开发轮播图

走马灯)开发轮播图"/>

vue使用carousel(走马灯)开发轮播图

在main.js 引入

import VueCarousel from 'vue-carousel';Vue.use(VueCarousel);

在这里插入代码片
<template><div><div class="my-swipe"><carousel :per-page="1" :loop="true" :autoplay="true" :paginationEnabled="true" :paginationPadding="3" :paginationSize="8"><slide v-for="(slide, index) in imgs" :key="index"><img :src="slide" alt="Slide" width="100%;"/></slide></carousel></div></div>
</template><script>export default {name: "swipe",data(){return{imgs:[]}},mounted(){},methods:{}}
</script><style scoped>.my-swipe{width: 100%;max-width: 800px; /* 根据需要设置轮播图容器的宽度 */margin: 0 auto;}
</style>

访问官网：
/