在vue中使用swiper和vue-awesome-swiper

由於版本原因，建議安裝指定版本，不要安裝最新版本。

1.版本如下

• 1.1.swiper

　　安裝版本號：5.3.6

　　安裝命令行代碼：npm install swiper@5.3.6 --save

• 1.2.vue-awesome-swiper

　　安裝版本號： 4.0.4

　　安裝命令行代碼：npm install vue-awesome-swiper@4.0.4 --save

• 1.3.綜合寫法

　　npm install swiper@5.3.6 vue-awesome-swiper --save

• 1.4.安裝成功后package.json文件中　　

       

 2.html部分代碼

                    <swiper ref="mySwiper" :options="swiperOptions">
                        <swiper-slide v-for='(item, index) in swiperList' :key='index'>
                            <img :src="item.src" alt="">
                        </swiper-slide>
                        <div class="swiper-pagination" slot="pagination"></div>
                        <div class="swiper-button-prev" slot="button-prev"></div>
                        <div class="swiper-button-next" slot="button-next"></div>
                    </swiper>

不要遺忘 slot="pagination", slot="button-prev", slot="button-next"

3.javascript部分代碼

import { Swiper, SwiperSlide } from 'vue-awesome-swiper';
import 'swiper/css/swiper.css';

 components: {
     Swiper,
     SwiperSlide
 },

    data () {
        return {
            swiperOptions: {
                // 自動切換
                autoplay: true,
                // 環路
                loop: true,
                // 前進后退按鈕
                navigation: {
                    nextEl: '.swiper-button-next',
                    prevEl: '.swiper-button-prev',
                },
                // 分頁器
                pagination: {
                    el: '.swiper-pagination',
                    clickable :true
                },
                // 切換效果cube
                effect : 'cube',
                cubeEffect: {
                    slideShadows: true,
                    shadow: true,
                    shadowOffset: 100,
                    shadowScale: 0.7
                },
            },
            swiperList: [
                {
                    id: 1,
                    src: '/imgs/slider/slide-1.jpg'
                },{
                    id: 2,
                    src: '/imgs/slider/slide-2.jpg'
                },{
                    id: 3,
                    src: '/imgs/slider/slide-3.jpg'
                },{
                    id: 4,
                    src: '/imgs/slider/slide-4.jpg'
                },{
                    id: 5,
                    src: '/imgs/slider/slide-5.jpg'
                }
            ],

        };
    }

 4.最終效果