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

在main.js 引入

import VueCarousel from 'vue-carousel';

Vue.use(VueCarousel);
1
2
3

在这里插入代码片
<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>

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40

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