技術標籤：vue

1.引入swiper元件
注意npm和cnpm不要混用

cnpm i [email protected]5.4.5 -S

2.在main.js中引入模組

import 'swiper/css/swiper.css'
import VueAwesomeSwiper from 'vue-awesome-swiper'
Vue.use(VueAwesomeSwiper)

3.html程式碼展示

<template>
  <div>
     <swiper :options="swiperOption">
        <
 
swiper-slide v-for="(slide, index) in swiperList" :key="index" >
            <div align="center"><img :src="slide" alt=""></div>
        </swiper-slide>
        <div class="swiper-pagination" slot="pagination"
 
></div>
    </swiper>
  </div>
</template>

<script>
import { Swiper, SwiperSlide } from 'vue-awesome-swiper'
export default {
    name:'work',
    components: {
        Swiper,
        SwiperSlide
    },
    data(){
        return {
            swiperList :[
                'https://s3.ax1x.com/2021/01/28/yCkUP0.jpg'
 
,
                'https://s3.ax1x.com/2021/01/28/yCAQF1.jpg',
                'https://s3.ax1x.com/2021/01/28/yCAjt1.jpg'
            ],
            swiperOption: {
                autoplay:true,
                initialSlide: 0,
                loop: true,
                pagination: { el: '.swiper-pagination' },
                paginationClickable: true,
                onSlideChangeEnd: swiper => {
                console.log('onSlideChangeEnd', swiper.realIndex)
                }
            }
        }
    }
}
</script>

<style>
img{
    width: 360px;
    height: 175px;
}
</style>