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>

访问官网：
https://ssense.github.io/vue-carousel/guide/