vue-cli初学轮播图-自测可以用swiper加vue-awesome-swiper

写在前面：查了很多个，总是实现不了，我决定再试一次
参考：https://www.cnblogs.com/fengxueshang/p/9559026.html

第一步: 安装 npm i vue-awesome-swiper --save( 这一个是否安装根据实际情况,如果安装上一个你用没效果也要安装这个 => npm i swiper )


第二步: 在main.js文件里引入

import VueAwesomeSwiper from ‘vue-awesome-swiper’
Vue.use(VueAwesomeSwiper)
在当前页面引入
import Swiper from ‘swiper’;
import ‘swiper/dist/css/swiper.min.css’;
第三步;

<template>

    <div class="swiper-container">
        <div class="swiper-wrapper">
            <div class="swiper-slide"><img src="../../assets/images/fj1.jpg" class="swiper-lazy" /></div>
            <div class="swiper-slide"><img src="../../assets/images/fj2.jpg" class="swiper-lazy" /></div>
            <div class="swiper-slide"><img src="../../assets/images/fj3.jpg" class="swiper-lazy" /></div>
        </div>
        <div class="swiper-pagination swiper-pagination-white"></div>
    </div>
</template>
<script>
import Swiper from 'swiper'; //引用swiper
import 'swiper/dist/css/swiper.min.css';        //引用css

export default{
    data() {
        return {
      
        }
    },
    mounted(){
        var swiper = new Swiper('.swiper-container', {
            //开启循环模式
            loop: true,
            //开启鼠标滚轮控制Swiper切换
            mousewheel: true,
            pagination: {
                el: '.swiper-pagination',
            },
            spaceBetween: 30,
            centeredSlides: true,
            autoplay: {
                delay: 2500,
                disableOnInteraction: false,
            }
        });
        
    }
}
</script>
<style>
.swiper-container {
            /* margin-top: 44px; */
            width: 100%;
            height: 150px;
            border: 0;
        }

        .swiper-container img {
            width: 100%;
            height: 150px;
            border: 0;
        }

        .swiper-slide {
            text-align: center;
            background: #fff;
            /* Center slide text vertically */
            display: -webkit-box;
            display: -ms-flexbox;
            display: -webkit-flex;
            display: flex;
            -webkit-box-pack: center;
            -ms-flex-pack: center;
            -webkit-justify-content: center;
            justify-content: center;
            -webkit-box-align: center;
            -ms-flex-align: center;
            -webkit-align-items: center;
            align-items: center;
        }
</style>