首先需要下載依賴npm install vue-awesome-swiper --save

同時引入css樣式

<link rel="stylesheet"  href="/static/css/swiper.min.css" charset="utf-8">

<template>
    <div>
        <swiper :options="swiperOption" ref="mySwiper">
            <!-- 這部分放你要渲染的那些內容 -->
<swiper-slide><div class=
 
"fd_slide fd_slide1">I'm Slide 1</div></swiper-slide>
            <swiper-slide><div class="fd_slide fd_slide2">I'm Slide 2</div></swiper-slide>
            <swiper-slide><div class="fd_slide fd_slide3">I'm Slide 3</div></swiper-slide>
            <swiper-slide
 
><div class="fd_slide fd_slide4">I'm Slide 4</div></swiper-slide>
        </swiper>
    </div>
</template>
<script>
    import { swiper, swiperSlide } from 'vue-awesome-swiper'
export default{
        components: {
            swiper,
swiperSlide
        },
data(){
            return 
 
{
                swiperOption: {
                    initialSlide:0,//設定初始化時slide的索引
direction:'horizontal',//Slides的滑動方向，可設定水平(horizontal)或垂直(vertical)。
loop: false,  //無限滾動
speed:300,//滑動速度
autoplay:100,//自動切換的時間間隔
onSlideChangeEnd: swiper => { //滑動之後回撥函式
                        //切換結束時，告訴我現在是第幾個slide
console.log('onSlideChangeEnd', swiper.realIndex)
                    }
                },
}
        },
}
</script>
<style lang='less'>
    .fd_slide{
        height: 888px;
width: 100%;
background: red;
}
    .fd_slide1{
        background: yellow;
}
    .fd_slide2{
        background: red;
}
    .fd_slide3{
        background: yellowgreen;
}
    .fd_slide4{
        background: orange;
}
</style>